TypeScript泛型

TypeScript泛型

一、什么是泛型

泛型的本质是参数化类型，也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中，分别称为泛型类、泛型接口、泛型方法。

二、泛型方法

1、需求：定义identity函数。 这个函数会返回任何传入它的值

不用泛型的话，这个函数可能是下面这样：

functionidentity(arg:number):number{

returnarg;

}

或者，使用any类型来定义函数：

functionidentity(arg:any):any{

returnarg;

}

使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。

问题：我们需要一种方法使返回值的类型与传入参数的类型是相同的。

2、解决办法：

使用类型变量，它是一种特殊的变量，只用于表示类型而不是值。

functionidentity<T>(arg: T):T{

returnarg;

}

给identity添加了类型变量T。 T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。 之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。 这允许我们跟踪函数里使用的类型的信息。

3、使用方法：

定义了泛型方法后，可以用两种方法使用。

第一种是，传入所有的参数，包含类型参数：

letoutput = identity<string>("myString");

第二种方法更普遍。利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定T的类型：

letoutput = identity("myString");

注意：我们没必要使用尖括号（<>）来明确地传入类型；编译器可以查看myString的值，然后把T设置为它的类型。 类型推论帮助我们保持代码精简和高可读性。

三、泛型类：

需求：找最小数的算法，需要同时支持返回数字和字符串两种类型，通过类的泛型来实现

非泛型实现方式：

classMinClass {

publiclist:number[]=[];

add(num:number){

this.list.push(num);

}

min():number{

varminNum =this.list[0];

for(vari=0;i<this.list.length;i++){

if(minNum>this.list[i]){

minNum =this.list[i];

}

}

returnminNum

}

}

varm=newMinClass();

m.add(2);

m.add(12);

m.add(33);

m.add(52);

console.log(m.min());

泛型方式实现：

classMinClass1<T> {//泛型类

publiclist:T[] = [];

add(value:T):void{

this.list.push(value)

}

min():T{

varminNum =this.list[0];

for(vari=0;i<this.list.length;i++){

if(minNum>this.list[i]){

minNum =this.list[i];

}

}

returnminNum

}

}

varm1=newMinClass1<string>();//这里的泛型是string，当然也可以是number

m1.add('a');

m1.add('A')

m1.add('b')

console.log(m1.min());

四、泛型接口：

例如：函数接口：

interfaceConfigFn {

(value1:string,value2:string):string//函数接口

}

varsetData:ConfigFn =function(value1:string,value2:string):string{

returnvalue1+value2

}

console.log(setData('name:','刘备'));//函数接口的实现

转换成泛型：

1、第一种定义方式：

//泛型接口：

interfaceConfigFns {

<T>(value:T):T//'T'表示参数类型

}

vargetData: ConfigFns =function<T>(value:T):T{//泛型接口的实现

returnvalue;

}

2、第二种方式：

interfaceConfigFns<T> {

(value:T):T

}

functiongetData(value:T):T {

returnvalue;

}

varGetData:ConfigFns<string> =getData;

console.log(GetData('Deyun'))