您好,登錄后才能下訂單哦!
要?jiǎng)?chuàng)建一個(gè)可重用的組件,其中的數(shù)據(jù)類型就必須要兼容很多的類型,那么如何兼容呢,TypeScript提供了一個(gè)很好的方法:泛型
要兼容多種數(shù)據(jù)格式,可能會(huì)有人想到any,即
function identify(arg: any): any{ return arg; }
使用any存在一個(gè)問題,有可能傳入的值和返回的值不是同一種值,例如,傳入數(shù)字,但是不確定返回的是什么值
要解決這個(gè)問題,我們需要引入類型變量-一種特殊的變量,只用于表示類型不表示值
function identity<T>(arg: T): T { return arg; }
給identify添加了類型變量T,用來捕獲傳入值的類型,然后將返回值的類型也設(shè)置為T,就實(shí)現(xiàn)了傳入值和返回值為同一類型值的需求
我們把identify這個(gè)函數(shù)叫做泛型,因?yàn)樗m用于所有類型,并且不會(huì)有any類型存在的問題
使用泛型的方法有兩種:
1、傳入所有的參數(shù),包括類型參數(shù)
let output = identify<string>('qwe');
2、利用類型推論--即編譯器會(huì)根據(jù)傳入的參數(shù)自動(dòng)地幫助我們確定T的類型
let output = identify('qwe');
在泛型中,我們要合理正確的使用泛型變量T,要牢記T表示任何類型
錯(cuò)誤使用:
function identify<T>(arg: T): T { console.log(arg.length);// Error: T doesn't have .length return arg; }
在泛型中我們使用了length這個(gè)屬性,但是T代表任何類型,所以有可能是number,而number是沒有l(wèi)ength屬性的,所以會(huì)報(bào)錯(cuò)
如果想要使用length這個(gè)屬性,我們可以創(chuàng)建數(shù)組
function identify<T>(arg: T[]): T[] { console.log(arg.length);// Error: T doesn't have .length return arg; }
泛型函數(shù)的類型與非泛型函數(shù)的類型沒什么不同,只是有一個(gè)類型參數(shù)在最前面,像函數(shù)聲明一樣:
function identify<T>(arg: T): T { return arg; } let myIdentify: <U>(arg: U) => U = identify;
從上面的代碼中可以看出也可以使用不同的泛型參數(shù)名,只要在數(shù)量上和使用方式上能對(duì)應(yīng)上就可以
當(dāng)然也可以把泛型參數(shù)當(dāng)做一個(gè)接口的參數(shù),這樣就可以知道這個(gè)接口具體用的是那種類型
interface GenericIdnetify<T>{ (arg: T): T; }function identity<T>(arg: T): T{ return arg; } let myGenericidentify: GenericIdnetify<string> = identity;
泛型類看上去與泛型接口差不多。 泛型類使用( <>
)括起泛型類型,跟在類名后面。
class GenericNumber<T> { zeroValue: T; add: (x: T, y: T) => T; } let myGenericNumber = new GenericNumber<number>(); myGenericNumber.zeroValue = 0; myGenericNumber.add = function(x, y) { return x + y; };
在前面的泛型變量中遇到了一個(gè)問題,就是在泛型中調(diào)用參數(shù)的length時(shí),如果參數(shù)沒有Length屬性會(huì)報(bào)錯(cuò),而使用泛型約束,就是只有滿足一定的條件才可以使用這個(gè)泛型
為此,我們定義一個(gè)接口來描述約束條件。 創(chuàng)建一個(gè)包含 .length
屬性的接口,使用這個(gè)接口和extends
關(guān)鍵字還實(shí)現(xiàn)約束:
interface lengthwise{ length: number; }function identity<T extends lengthwise>(arg: T): T{ console.log(arg.length); return arg; } identity(123); //erroridentity('qwe'); //true
當(dāng)傳入123時(shí),沒有l(wèi)ength屬性,就報(bào)錯(cuò),而傳入字符串qwe時(shí)則完全正確
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。