TypeScript泛型约束条件示例详解

第TypeScript泛型约束条件示例详解目录什么是泛型泛型的应用场景泛型约束(限制条件)泛型函数调用指定类型总结

什么是泛型

两个值之间存在的对应关系，就可以用泛型来解决

泛型的应用场景

当一个函数的返回值的类型需要与此函数的参数类型想关联的时候，就需要使用泛型

例如

//约定此函数调用时必须传入一个数组，并返回数组第一项

functionarrFnT(arr:T[]):T|undefined{

returnarr[0]

constn=arrFn([1,2])//number类型

consts=arrFn(['a','b'])//string类型

constu=arrFn([])//undefined类型

//也可以进行指定类型

arrFnnumber([1,2])//此时数组中元素就必须是number类型

再例如，我们将数组的map方法进行加工

//定义一个map函数

//第一个参数约定传入一个数组

//第二个参数约定传入一个函数

//此函数的返回值就是操作之后的数组

functionmapIn,Out(arr:In[],fun:(val:In)=Out):Out[]{

returnarr.map(fun)

constres=map([1,2,3,4,5],(i)=i+1)

console.log(res)///[2,3,4,5,6]

泛型约束(限制条件)

默认情况下，泛型函数的类型变量T可以代表多个类型，这导致在泛型函数内部无法访问任何属性

当我们需要用到一些属性的时候，就无法使用，会报错，比如字符串、数组的长度

接下来我们看个例子

//定义一个函数，传入两个值，来比较哪个更长,相等就返回0

functioncompareTextends{length:number}(a:T,b:T){

if(a.lengthb.length){

returnb

}elseif(a.length===b.length){

return(a.length-b.length)

}else{

returna

constres1=compare('哈哈哈','哈哈哈')

console.log(res1)//0

constres2=compare('我真酷','你酷')

console.log(res2)//'我真酷'

constres3=compare('我酷','你真酷')

console.log(res1)//'你真酷'

当然，当我们在使用泛型约束的时候，也会出现常见的错误

//我们定义一个泛型T，并让其继承一个有length属性的对象

//给参数指定类型，第一个参数为T类型，第二参数为number类型

//返回值也为T类型

constmyTs=Textends{length:number}(obj:T,num:number):T={

if(obj.length=num){

returnobj

}else{

return{length:num}//此处会报错

}

这个函数的返回值看似没问题，其实会报错

我们把这个代码稍微改造一下，就容易理解了

constmyTs=Textends{length:number}(obj:T,num:number):T={

if(obj.length=num){

returnobj

}else{

constres={length:num}//把鼠标放上res，可以看到res的类型是{length:number}

returnres//但是我们约定的返回值是T类型，

//这里会报错不能将类型“{length:number;}”分配给类型“T”

}

我们将代码改造成这样就是正确的

constmyTs=Textends{length:number}(obj:T,num:number):T={

if(obj.length=num){

returnobj

}else{

obj.length=num

returnobj

constres=myTs({length:3},6)

console.log(res)//{length:6}

泛型函数调用指定类型

在定义完成泛型函数之后，我们去调用函数并传参的时候，并没有去指定参数类型，当多个参数类型不同的时候，TS就会报错，接下来请看一个例子：

定义一个泛型函数，用来连接数组，约定参数必须为数组

//定义一个连接两个数组的函数

//并约定两个参数的类型都为泛型数组

//且返回值也为一个泛型数组

constmergeArray=T(arr1:T[],arr2:T[]):T[]={

//concat为数组连接，不会改变原数组，需要使用值接收

returnarr1.concat(arr2)

//但是当我们在使用这个函数的时候就会发现

//如果第一个参数数组中的元素都为number类型

//而第二个参数数组的类型与第一个不一致时

//TS就会报错，这样使用就只能传入两个一样类型的数组参数

mergeArray([1,2,3],['a','b'])//报错，不能将类型“string”分配给类型“number”

所以当我们调用函数的时候就可以指定参数类型

这样参数就是我们