資訊專欄INFORMATION COLUMN
摘要：往期第一課體驗第二課基礎(chǔ)類型和入門高級類型第三課泛型第四課解讀高級類型插一課本來打算接著上節(jié)課把高級類型都講完但是寫著寫著我發(fā)現(xiàn)高級類型中有很多地方都需要泛型的知識那么先插一節(jié)泛型什么是類型變量和泛型變量的概念我們都知道可以表示任意數(shù)據(jù)類型
往期
第一課, 體驗typescript
第二課, 基礎(chǔ)類型和入門高級類型
第三課, 泛型
第四課, 解讀高級類型
插一課本來打算接著上節(jié)課, 把高級類型都講完, 但是寫著寫著我發(fā)現(xiàn)高級類型中, 有很多地方都需要泛型的知識, 那么先插一節(jié)泛型.
什么是"類型變量"和"泛型"變量的概念我們都知道, 可以表示任意數(shù)據(jù), 類型變量也一樣, 可以表示任意類型:
// 在函數(shù)名后面用"<>"聲明一個類型變量 function convert(input:T):T{ return input; }
convert中參數(shù)我們標(biāo)記為類型T, 返回值也標(biāo)記為T, 從而表示了: 函數(shù)的輸入和輸出的類型一致. 這樣使用了"類型變量"的函數(shù)叫做泛型函數(shù), 那有"泛型類"嗎?
注意: T是我隨便定義的, 就和變量一樣, 名字你可以隨便起, 只是建議都是大寫字母,比如U / RESULT.
class Person {
who: U;
constructor(who: U) {
this.who = who;
}
say(code:U): string {
return this.who + " :i am " + code;
}
}
在類名后面通過"<>"聲明一個類型變量U, 類的方法和屬性都可以用這個U, 接下來我們使用下泛型類:
let a = new Person("詹姆斯邦德"); a.say(007) // 錯誤, 會提示參數(shù)應(yīng)該是個string a.say("007") // 正確
我們傳入了類型變量(string),告訴ts這個類的U是string類型, 通過Person的定義, 我們知道say方法的參數(shù)也是string類型, 所以a.say(007)會報錯, 因為007是number. 多以我們可以通過傳入類型變量來約束泛型.
其實我們也可以不指定類型變量為string, 因為ts可以根據(jù)實例化時傳入的參數(shù)的類型推斷出U為string類型:
let a = new Person("詹姆斯邦德");
// 等價 let a = new Person("詹姆斯邦德");
a.say(007) // 錯誤, 會提示參數(shù)應(yīng)該是個string
a.say("007") // 正確
其實方法和函數(shù)的定義方式一樣:
class ABC{
// 輸入T[], 返回T
getFirst(data:T[]):T{
return data[0];
}
}
說實話ts的文檔我找了好幾遍, 也沒看到他給泛型正式做定義, 只是表達(dá)他是一種描述多種類型(類型范圍)的格式, 我覺得有點抽象, 我用自己的理解具象下: 用動態(tài)的類型(類型變量)描述函數(shù)和類的方式.
泛型類型我們可以用類型變量去描述一個類型(類型范圍), ts的數(shù)組類型Array本身就是一個泛型類型, 他需要傳遞具體的類型才能變的精準(zhǔn):
let arr : Array; arr = ["123"]; // 錯誤, 提示數(shù)組中只可以有number類型 arr = [123];
下面我們自己定義一個泛型類型, 就對開頭的convert函數(shù)定義:
function convert泛型接口(input:T):T{ return input; } // 定義泛型類型 interface Convert { (input:T):T } // 驗證下 let convert2:Convert = convert // 正確不報錯
通過傳入不同的類型參數(shù), 讓屬性更靈活:
interface Goods擴(kuò)展類型變量(泛型約束){ id:number; title: string; size: T; } let apple:Goods = {id:1,title: "蘋果", size: "large"}; let shoes:Goods = {id:1,title: "蘋果", size: 43};
function echo(input: T): T { console.log(input.name); // 報錯, T上不確定是否由name屬性 return input; }
前面說過T可以代表任意類型, 但對應(yīng)的都是基礎(chǔ)類型, 所以當(dāng)我們操作input.name的時候就需要標(biāo)記input上有name屬性, 這樣就相當(dāng)于我們縮小了類型變量的范圍, 對泛型進(jìn)行了約束:
// 現(xiàn)在T是個有name屬性的類型 function echo一個泛型的應(yīng)用, 工廠函數(shù)(input: T extends {name:string}): T { console.log(input.name); // 正確 return input; }
