TypeScript泛型約束條件示例詳解
什么是泛型
兩個(gè)值之間存在的對(duì)應(yīng)關(guān)系,就可以用泛型來(lái)解決
泛型的應(yīng)用場(chǎng)景
當(dāng)一個(gè)函數(shù)的返回值的類(lèi)型需要與此函數(shù)的參數(shù)類(lèi)型想關(guān)聯(lián)的時(shí)候,就需要使用泛型
例如
//約定此函數(shù)調(diào)用時(shí)必須傳入一個(gè)數(shù)組,并返回?cái)?shù)組第一項(xiàng)
function arrFn <T> (arr: T[]) :T|undefined {
return arr[0]
}
const n = arrFn([1,2]) //number類(lèi)型
const s = arrFn(['a','b']) //string類(lèi)型
const u = arrFn([]) //undefined類(lèi)型
//也可以進(jìn)行指定類(lèi)型
arrFn<number>([1,2]) //此時(shí)數(shù)組中元素就必須是number類(lèi)型再例如,我們將數(shù)組的map方法進(jìn)行加工
// 定義一個(gè)map函數(shù)
//第一個(gè)參數(shù)約定傳入一個(gè)數(shù)組
//第二個(gè)參數(shù)約定傳入一個(gè)函數(shù)
//此函數(shù)的返回值就是操作之后的數(shù)組
function map <In,Out>(arr:In[], fun:(val:In)=>Out):Out[] {
return arr.map(fun)
}
const res = map([1,2,3,4,5],(i)=>i+1)
console.log(res) ///[ 2, 3, 4, 5, 6 ]泛型約束(限制條件)
默認(rèn)情況下,泛型函數(shù)的類(lèi)型變量 T 可以代表多個(gè)類(lèi)型,這導(dǎo)致在泛型函數(shù)內(nèi)部無(wú)法訪(fǎng)問(wèn)任何屬性
當(dāng)我們需要用到一些屬性的時(shí)候,就無(wú)法使用,會(huì)報(bào)錯(cuò),比如字符串、數(shù)組的長(zhǎng)度
接下來(lái)我們看個(gè)例子
// 定義一個(gè)函數(shù),傳入兩個(gè)值,來(lái)比較哪個(gè)更長(zhǎng) ,相等就返回0
function compare <T extends {length: number}> (a:T, b:T){
if(a.length < b.length){
return b
}else if(a.length === b.length){
return (a.length - b.length)
}else{
return a
}
}
const res1 = compare('哈哈哈','哈哈哈')
console.log(res1) // 0
const res2 = compare('我真酷','你酷')
console.log(res2) // '我真酷'
const res3 = compare('我酷','你真酷')
console.log(res1) // '你真酷'當(dāng)然,當(dāng)我們?cè)谑褂梅盒图s束的時(shí)候,也會(huì)出現(xiàn)常見(jiàn)的錯(cuò)誤
//我們定義一個(gè)泛型T ,并讓其繼承一個(gè)有l(wèi)ength屬性的對(duì)象
//給參數(shù)指定類(lèi)型,第一個(gè)參數(shù)為T(mén)類(lèi)型,第二參數(shù)為number類(lèi)型
//返回值也為T(mén)類(lèi)型
const myTs =<T extends {length:number}> (obj:T,num:number):T => {
if(obj.length >= num){
return obj
}else{
return {length:num} //此處會(huì)報(bào)錯(cuò)
}
}這個(gè)函數(shù)的返回值看似沒(méi)問(wèn)題,其實(shí)會(huì)報(bào)錯(cuò)
我們把這個(gè)代碼稍微改造一下,就容易理解了
const myTs =<T extends {length:number}> (obj:T,num:number):T => {
if(obj.length >= num){
return obj
}else{
const res = {length:num} //把鼠標(biāo)放上res,可以看到res的類(lèi)型是 {length:number}
return res //但是我們約定的返回值是T類(lèi)型,
//這里會(huì)報(bào)錯(cuò) 不能將類(lèi)型“{ length: number; }”分配給類(lèi)型“T”
}
}我們將代碼改造成這樣就是正確的
const myTs =<T extends {length:number}> (obj:T,num:number):T => {
if(obj.length >= num){
return obj
}else{
obj.length = num
return obj
}
}
const res = myTs({length:3},6)
console.log(res) //{ length: 6 }泛型函數(shù)調(diào)用指定類(lèi)型
在定義完成泛型函數(shù)之后,我們?nèi)フ{(diào)用函數(shù)并傳參的時(shí)候,并沒(méi)有去指定參數(shù)類(lèi)型,當(dāng)多個(gè)參數(shù)類(lèi)型不同的時(shí)候,TS就會(huì)報(bào)錯(cuò),接下來(lái)請(qǐng)看一個(gè)例子:
定義一個(gè)泛型函數(shù),用來(lái)連接數(shù)組,約定參數(shù)必須為數(shù)組
// 定義一個(gè)連接兩個(gè)數(shù)組的函數(shù)
// 并約定兩個(gè)參數(shù)的類(lèi)型都為泛型數(shù)組
// 且返回值也為一個(gè)泛型數(shù)組
const mergeArray = <T> (arr1 : T[],arr2 : T[]) :T[] => {
// concat 為數(shù)組連接,不會(huì)改變?cè)瓟?shù)組,需要使用值接收
return arr1.concat(arr2)
}
// 但是當(dāng)我們?cè)谑褂眠@個(gè)函數(shù)的時(shí)候就會(huì)發(fā)現(xiàn)
// 如果第一個(gè)參數(shù)數(shù)組中的元素都為number類(lèi)型
// 而第二個(gè)參數(shù)數(shù)組的類(lèi)型與第一個(gè)不一致時(shí)
// TS就會(huì)報(bào)錯(cuò),這樣使用就只能傳入兩個(gè)一樣類(lèi)型的數(shù)組參數(shù)
mergeArray([1,2,3],['a','b']) //報(bào)錯(cuò),不能將類(lèi)型“string”分配給類(lèi)型“number”所以當(dāng)我們調(diào)用函數(shù)的時(shí)候就可以指定參數(shù)類(lèi)型
這樣參數(shù)就是我們指定的參數(shù)類(lèi)型了
const res= mergeArray<number | string>([1,2,3],['a','b','c'])
console.log(res) //[ 1, 2, 3, 'a', 'b', 'c' ]總結(jié)
到此這篇關(guān)于TypeScript泛型約束條件的文章就介紹到這了,更多相關(guān)TypeScript泛型約束條件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- TypeScript泛型工作原理詳解
- TypeScript?泛型接口具體使用實(shí)戰(zhàn)
- TypeScript之Generics泛型類(lèi)型學(xué)習(xí)
- TypeScript中泛型的使用詳細(xì)講解
- TypeScript接口與泛型全面精講
- TypeScript泛型使用詳細(xì)介紹
- TypeScript泛型的使用詳細(xì)介紹
- TypeScript?泛型推斷實(shí)現(xiàn)示例詳解
- TypeScript?泛型重載函數(shù)的使用方式
- 在?TypeScript?中使用泛型的方法
- typeScript?泛型使用和泛型接口結(jié)合
- TypeScript 泛型四大應(yīng)用場(chǎng)景與高級(jí)用法
相關(guān)文章
CKEditor擴(kuò)展插件:自動(dòng)排版功能autoformat插件實(shí)現(xiàn)方法詳解
這篇文章主要介紹了CKEditor擴(kuò)展插件:自動(dòng)排版功能autoformat插件實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了CKEditor擴(kuò)展插件實(shí)現(xiàn)自動(dòng)排版功能的autoformat插件具體定義、配置與使用技巧,需要的朋友可以參考下2020-02-02
ECharts?formatter屬性設(shè)置的3種方法(字符串模板,函數(shù)模板,回調(diào)函數(shù))
formatter有兩種寫(xiě)法,一種字符串模板,另一種是回調(diào)函數(shù),下面這篇文章主要給大家介紹了關(guān)于ECharts?formatter屬性設(shè)置的3種方法,分別是字符串模板,函數(shù)模板,回調(diào)函數(shù),需要的朋友可以參考下2023-02-02
原生JS實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能【適合新手】
這篇文章主要介紹了原生JS實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能,結(jié)合實(shí)例形式分析了基于javascript定時(shí)器控制頁(yè)面元素動(dòng)態(tài)變換實(shí)現(xiàn)輪播圖的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
元素未顯示設(shè)置width/height時(shí)IE中使用currentStyle獲取為auto
元素未顯示設(shè)置width/height時(shí)IE中無(wú)法使用currentStyle獲取,默認(rèn)獲取值為auto,需要的朋友可以參考下2014-05-05

