TS之泛型

Posted 2021-02-22 codexlx

1.泛型:

• 在软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能支持当前数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能
• 在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件
• 简而言之：泛型就是解决 类、接口、方法的复用性，以及对不特定数据类型的支持

在ts中，比如一个函数要支持传入类型与返回类型支持多种数据类型，可以使用any，any就是完全放弃了数据类型检查

ts中的泛型：<T>

　　可以支持不特定的数据类型

　　要求，传入的参数和返回的参数一致

function getData<T>(value: T): T {
  return value;
}

// 类型检查和传入参数必须一致
console.log(getData<number>(123));
console.log(getData<string>(‘abc‘));

 2.泛型类：

　　如有个方法，需要同时支持返回字符串和数字两种类型，需要通过泛型类来实现

class MinClass<T>{
  public list: T[] = [];

  add(value: T): void {
    this.list.push(value);
  }

  min(): T {
    let minNum = this.list[0];
    for (let e of this.list) {
      if (minNum > e) {
        minNum = e
      }
    }
    return minNum;
  }
}

// 制定类的代表类型是number
let m = new MinClass<number>();   //实例化类，并且制定了类的代表类型是number
m.add(5);
m.add(9);
m.add(12);
m.add(4);
console.log(m.min());

// 制定类的代表类型是number
let m1 = new MinClass<string>();
m1.add(‘d‘);
m1.add(‘f‘);
m1.add(‘z‘);
m1.add(‘q‘);
console.log(m1.min());

 3.泛型接口

先看看函数类型接口：

interface ConfigFn{
  (value1:string,value2:string):string;
}

let setData:ConfigFn=function(v1:string,v2:string):string{
  return v1+v2;
}

setData(‘name‘,‘张三‘);

 

泛型接口：

interface ConfigFn {
  <T>(value: T): T;
}

// function getData<T>(value:T):T{}
let getData: ConfigFn = function <T>(value: T): T {
  return value;
}

getData<string>(‘张三‘);
getData<number>(123);

 

 4.把类作为参数类型的泛型类

（1）

class User {
  username: string | undefined;
  password: string | undefined
}

class mysqlDb {
  // 用User这个类来验证传入数据的合法性
  add(user: User): boolean {
    return true;
  }
}

// 增加数据
let u = new User();
u.username = ‘张三‘;
u.password = ‘123456‘;

let Db = new MysqlDb();
console.log(Db.add(u));

 

（2）泛型类实现

class MysqlDb<T> {
  add(info: T): boolean {
    console.log(info);
    return true;
  }
}

class User {
  username: string | undefined;
  password: string | undefined
}


let u = new User();
u.username = ‘张三‘;
u.password = ‘123456‘;

// 对不特定类型进行类型校验
let Db = new MysqlDb<User>();
Db.add(u);