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