中文網(wǎng)：https://www.tslang.cn/

官網(wǎng)：http://www.typescriptlang.org/

目錄：

• Typescript 學習筆記一：介紹、安裝、編譯
• Typescript 學習筆記二：數(shù)據(jù)類型
• Typescript 學習筆記三：函數(shù)
• Typescript 學習筆記四：回憶Es5 中的類
• Typescript 學習筆記五：類
• Typescript 學習筆記六：接口
• Typescript 學習筆記七：泛型

泛型的定義

泛型：軟件工程中，我們不僅要創(chuàng)建一致的定義良好的 API，同時也要考慮可重用性。 組件不僅能夠支持當前的數(shù)據(jù)類型，同時也能支持未來的數(shù)據(jù)類型，這在創(chuàng)建大型系統(tǒng)時為你提供了十分靈活的功能。

在像C#和Java這樣的語言中，可以使用泛型來創(chuàng)建可重用的組件，一個組件可以支持多種類型的數(shù)據(jù)。這樣用戶就可以以自己的數(shù)據(jù)類型來使用組件。

通俗理解：泛型就是解決類、接口、方法的復用性、以及對不特定數(shù)據(jù)類型的支持(類型校驗)。

function getData (val:string):string {return val; }

只能返回string類型的數(shù)據(jù)，要求能同時返回 string 類型和 number 類型

function getData1 (val:string):string {return val; } function getData2 (val:number):number {return val; }

代碼冗余，any 類型可以解決這個問題。

function getData (val:any):any {return val; } getData(124); getData('124');

但是 any 相當于放棄了類型檢查。沒法實現(xiàn)傳入什么，返回什么。比如:傳入 number 類型必須返回 number 類型，傳入 string 類型必須返回 string 類型。

function getData (val:any):any {return val + '---'; } getData(124); // 傳入 number，返回 string

泛型：可以支持不特定的數(shù)據(jù)類型。要求：傳入的參數(shù)和返回的參數(shù)一致。

T表示泛型，具體什么類型是在調(diào)用這個方法的時候決定的

泛型函數(shù)

function getData<T> (val:T):T {return val; } getData<number>(124); getData<string>('abc'); // getData<number>('abc'); // 錯誤

放回值可以是任意類型

function getData<T> (val:T):any {return val + '***'; } getData<number>(124); // 參數(shù)必須是數(shù)字 getData<string>('abc');

泛型類

比如有個最小堆算法，需要同時支持返回數(shù)字和字符串 a-z 兩種類型。通過類的泛型來實現(xiàn)

class minClass {list:number[] = [];add (val:number):void {this.list.push(val);}min ():number {let minNum:number = this.list[0];for(let i = 0; i < this.list.length; i++) {if(minNum > this.list[i]){minNum = this.list[i];}}return minNum;} } let m = new minClass(); m.add(3); m.add(2); m.add(23); console.log(m.min()); // 2

正常的類只能實現(xiàn)一種類型。用泛型解決，支持 number 和 string。

class minClass<T> {list:T[] = [];add (val:T):void {this.list.push(val);}min ():T {let minNum = this.list[0];for(let i = 0; i < this.list.length; i++) {if(minNum > this.list[i]){minNum = this.list[i];}}return minNum;} } let m1 = new minClass<number>(); // 實例化類，并且指定了類的 T 代表的類型是 number m1.add(3); m1.add(2); m1.add(23); console.log(m1.min()); // 2let m2 = new minClass<string>(); // 實例化類，并且指定了類的 T 代表的類型是 string m2.add('a'); m2.add('d'); m2.add('f'); console.log(m2.min()); // a

泛型接口

函數(shù)類型接口

interface configFn {(val1:string, val2:string):string; } let setData:configFn = function (value1:string, value2:string):string { // 參數(shù)名可以和接口中的不一致，但是參數(shù)類型必須一致return value1 + value2; } setData('1', '2');

泛型接口實現(xiàn)方式1：

interface configFn {<T>(val:T):T; } let getData:configFn = function<T> (value:T):T {return value; } getData<string>('abc'); getData<number>(123);

泛型接口實現(xiàn)方式2：

interface configFn<T> {(val:T):T; } let getData:configFn<string> = function<T> (value:T):T {return value; } getData('abc'); getData(123); // 錯誤

這是最后一篇，之后更深入的學習和應用了，再繼續(xù)。^_^

轉載于:https://www.cnblogs.com/EnSnail/p/10203515.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Typescript 学习笔记七：泛型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。