TypeScript泛型約束條件示例詳解

第TypeScript泛型約束條件示例詳解目錄什么是泛型泛型的應(yīng)用場(chǎng)景泛型約束(限制條件)泛型函數(shù)調(diào)用指定類型總結(jié)

什么是泛型

兩個(gè)值之間存在的對(duì)應(yīng)關(guān)系，就可以用泛型來解決

泛型的應(yīng)用場(chǎng)景

當(dāng)一個(gè)函數(shù)的返回值的類型需要與此函數(shù)的參數(shù)類型想關(guān)聯(lián)的時(shí)候，就需要使用泛型

例如

//約定此函數(shù)調(diào)用時(shí)必須傳入一個(gè)數(shù)組，并返回?cái)?shù)組第一項(xiàng)

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

returnarr[0]

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

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

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

//也可以進(jìn)行指定類型

arrFnnumber([1,2])//此時(shí)數(shù)組中元素就必須是number類型

再例如，我們將數(shù)組的map方法進(jìn)行加工

//定義一個(gè)map函數(shù)

//第一個(gè)參數(shù)約定傳入一個(gè)數(shù)組

//第二個(gè)參數(shù)約定傳入一個(gè)函數(shù)

//此函數(shù)的返回值就是操作之后的數(shù)組

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]

泛型約束(限制條件)

默認(rèn)情況下，泛型函數(shù)的類型變量T可以代表多個(gè)類型，這導(dǎo)致在泛型函數(shù)內(nèi)部無法訪問任何屬性

當(dāng)我們需要用到一些屬性的時(shí)候，就無法使用，會(huì)報(bào)錯(cuò)，比如字符串、數(shù)組的長(zhǎng)度

接下來我們看個(gè)例子

//定義一個(gè)函數(shù)，傳入兩個(gè)值，來比較哪個(gè)更長(zhǎng),相等就返回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)//'你真酷'

當(dāng)然，當(dāng)我們?cè)谑褂梅盒图s束的時(shí)候，也會(huì)出現(xiàn)常見的錯(cuò)誤

//我們定義一個(gè)泛型T，并讓其繼承一個(gè)有l(wèi)ength屬性的對(duì)象

//給參數(shù)指定類型，第一個(gè)參數(shù)為T類型，第二參數(shù)為number類型

//返回值也為T類型

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

if(obj.length=num){

returnobj

}else{

return{length:num}//此處會(huì)報(bào)錯(cuò)

}

這個(gè)函數(shù)的返回值看似沒問題，其實(shí)會(huì)報(bào)錯(cuò)

我們把這個(gè)代碼稍微改造一下，就容易理解了

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

if(obj.length=num){

returnobj

}else{

constres={length:num}//把鼠標(biāo)放上res，可以看到res的類型是{length:number}

returnres//但是我們約定的返回值是T類型，

//這里會(huì)報(bào)錯(cuò)不能將類型“{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}

泛型函數(shù)調(diào)用指定類型

在定義完成泛型函數(shù)之后，我們?nèi)フ{(diào)用函數(shù)并傳參的時(shí)候，并沒有去指定參數(shù)類型，當(dāng)多個(gè)參數(shù)類型不同的時(shí)候，TS就會(huì)報(bào)錯(cuò)，接下來請(qǐng)看一個(gè)例子：

定義一個(gè)泛型函數(shù)，用來連接數(shù)組，約定參數(shù)必須為數(shù)組

//定義一個(gè)連接兩個(gè)數(shù)組的函數(shù)

//并約定兩個(gè)參數(shù)的類型都為泛型數(shù)組

//且返回值也為一個(gè)泛型數(shù)組

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

//concat為數(shù)組連接，不會(huì)改變?cè)瓟?shù)組，需要使用值接收

returnarr1.concat(arr2)

//但是當(dāng)我們?cè)谑褂眠@個(gè)函數(shù)的時(shí)候就會(huì)發(fā)現(xiàn)

//如果第一個(gè)參數(shù)數(shù)組中的元素都為number類型

//而第二個(gè)參數(shù)數(shù)組的類型與第一個(gè)不一致時(shí)

//TS就會(huì)報(bào)錯(cuò)，這樣使用就只能傳入兩個(gè)一樣類型的數(shù)組參數(shù)

mergeArray([1,2,3],['a','b'])//報(bào)錯(cuò)，不能將類型“string”分配給類型“number”

所以當(dāng)我們調(diào)用函數(shù)的時(shí)候就可以指定參數(shù)類型

這樣參數(shù)就是我們