Typescript 中的 泛型

typeScript 中的泛型

1. 泛型的定义

泛型：软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以自己的数据类型来使用组件。

通俗理解：泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持。

 

泛型： 可以支持不特定的数据类型。 要求： 传入的参数和返回的参数一致

T表示泛型，具体什么类型是调用这个方法的时候决定的

2. 泛型函数

function getData<T>(value:T):T {
    return value;
}
getData<number>(123);
getData<number>('13') // 错误的写法

3. 泛型类

// 比如有个最小堆算法 普通类型
class MinClass{
    public list:number[]=[];
    add(num:number){
        this.list.push(num)
    }
    min():number{
        var minNum=this.list[0];
        for(var i=0;i<this.list.length;i++){
            if(minNum>this.list[i]) {
                minNum = this.list[i];
            }
        }
        return minNum;
    }
}
var m1 = new MinClass();
m1.add(12);
m1.add(2);
m1.add(4);
m1.add(1);
alert(m1.min());

// 泛型类
class MinClass<T>{
    public list:T[]=[];
    add(value:T):void{
        this.list.push(value)
    }
    min():T{
        var minNum=this.list[0];
        for(var i=0;i<this.list.length;i++){
            if(minNum>this.list[i]) {
                minNum = this.list[i];
            }
        }
        return minNum;
    }
}
var m1 = new MinClass<number>();
m1.add(12);
m1.add(2);
m1.add(4);
m1.add(1);
alert(m1.min());

  var m2 = new MinClass<string>(); // 实例化类 并且指定了类的T代表的类型是string

  m2.add('a');

  m2.add('b');

  m2.add('c');

  alert(m2.min());

4. 泛型接口

// 第一种定义方式
interface ConfigFn{
    <T>(value:T):T;
}
var getData:ConfigFn = function<T>(value:T):T {
    return value;
}
getData<number>(123);
getData<number>('123') // 错误写法

 

// 第二种定义方式
interface ConfigFn<T>{
    (value:T):T;
}
function getData<T>(value:T):T{
    return value;
}
var myGetData:ConfigFn<string> = getData;
myGetData('123');
myGetData(123);

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

   1. 定义一个类

   2. 把类作为参数来约束数据传入的类型

/* 
定义一个 User的类，这个类的作用就是映射数据库字段
然后定义一个 MysqlDb的类，这个类用于操作数据库
然后把User类作为参数传入到MysqlDb中

var user = new User({
    username: '张三',
    password: '123456'
});
var Db = new MysqlDb();
Db.add(user);
*/
class User{
    username:string | undefined;
    password:string | undefined;
}

  class MysqlDb<T>{
      add(info:T):boolean{
          console.log(info);
          return true;
      }
  }
  var u = new User();
  u.username = '李斯';
  u.password = '1232123';


  var Db = new MysqlDb<User>();
  Db.add(u);