TypeScript泛型約束條件示例詳解

第TypeScript泛型約束條件示例詳解目錄什么是泛型泛型的應用場景泛型約束(限制條件)泛型函數調用指定類型總結

什么是泛型

兩個值之間存在的對應關系，就可以用泛型來解決

泛型的應用場景

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

例如

//約定此函數調用時必須傳入一個數組，并返回數組第一項

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)//'你真酷'

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

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

//給參數指定類型，第一個參數為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)

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

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

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

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

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

所以當我們調用函數的時候就可以指定參數類型

這樣參數就是我們