TypeScript中的泛型

一、泛型的定义

泛型（Generics）是指在定义函数、接口或者类的时候， 不预先指定其类型，而是在使用时手动指定其类型的一种特性。
定义实在有点难懂，通过举例说明为何需要泛型。以下是一个参数类型和输出类型都为Number的金额函数。

function amount(value:number):number{
  return value;
};

如果有个新需求，就是金额函数不仅可以输入Number类型，也可以输入字符串类型，那当前函数就不符合要求，于是可以再新加一个函数：

function amount2(value:string):string{
  return value;
};

这样需求是可以满足，不过会产生代码冗余，不是很好的解决办法，这时候就可以用泛型解决这个问题。

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

上例中，我们在函数名后面加了 <T>, 其中的 T 表示任意输入的类型， 后面的 T 即表示输出的类型，且与输入保持一致，接下来就可以调用。

console.log(amount<number>(100)); //100
console.log(amount<string>("壹佰")); //壹佰

二、泛型类

下例是个getMax函数，作用是获取list中最大值的类，通过add函数给list添加值，getValue获取list中最大值。

class getMax {
  public list:Array<Number> = [];
  add(param:number):void{
    this.list.push(param);
  }
  getValue(){
    let firstItem = this.list[0];
    let value = this.list.reduce((acc,item)=>{
      if(acc<item) acc = item;
      return acc;
    },firstItem);
    return value;
  }
};
let arr = new getMax();
arr.add(77);
arr.add(33);
arr.add(66);
console.log(arr.getValue()); //77

但是目前只支持Number类型，如果想要传入String类型的话就不行了，于是可以改成泛型类，通过调用的时候来控制变量的类型即可实现。

class getMax<T> {
  public list:Array<T> = [];
  add(param:T):void{
    this.list.push(param);
  }
  getValue(){
    let firstItem = this.list[0];
    let value = this.list.reduce((acc,item)=>{
      if(acc<item) acc = item;
      return acc;
    },firstItem);
    return value;
  }
};

//支持Number类型
let arr = new getMax<Number>();
arr.add(77);
arr.add(33);
arr.add(66);
console.log(arr.getValue()); //77

//支持String类型
let arr = new getMax<String>();
arr.add('a');
arr.add('b');
arr.add('c');
console.log(arr.getValue()); //c

三、泛型接口

参考上例，定义一个getMax接口，在声明类的时候可以自定义类型。

interface getMax<T> {
  list:Array<T>,
  add(param:T):void;
  getValue():T;
};

class getMaxVal implements getMax<Number> {
  public list:Array<Number> = [];
  add(param:Number){
    this.list.push(param);
  };
  getValue():Number{
    let firstItem = this.list[0];
    let value = this.list.reduce((acc,item)=>{
      if(acc<item) acc = item;
      return acc;
    },firstItem);
    return value;
  }
}