TypeScript泛型約束條件示例詳解

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

什么是泛型

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

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

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

例如

//約定此函數(shù)調(diào)用時必須傳入一個數(shù)組，并返回數(shù)組第一項

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

returnarr[0]

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

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

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

//也可以進行指定類型

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

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

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

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

//第二個參數(shù)約定傳入一個函數(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]

泛型約束(限制條件)

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

當我們需要用到一些屬性的時候，就無法使用，會報錯，比如字符串、數(shù)組的長度

接下來我們看個例子

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

當然，當我們在使用泛型約束的時候，也會出現(xiàn)常見的錯誤

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

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

//返回值也為T類型

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

if(obj.length=num){

returnobj

}else{

return{length:num}//此處會報錯

}

這個函數(shù)的返回值看似沒問題，其實會報錯

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

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}

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

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

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

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

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

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

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

//concat為數(shù)組連接，不會改變原數(shù)組，需要使用值接收

returnarr1.concat(arr2)

//但是當我們在使用這個函數(shù)的時候就會發(fā)現(xiàn)

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

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

//TS就會報錯，這樣使用就只能傳入兩個一樣類型的數(shù)組參數(shù)

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

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

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