TypeScript學習筆記（五） 泛型

2021-08-20 10:40:42 字數 2559 閱讀 8722

本篇將介紹在typescript如何使用泛型。

在typescript裡，宣告泛型方法有以下兩種方式：

1


function generics_func1(arg: t): t 4//


或者5 let generics_func2: (arg: t) => t = function


(arg)
呼叫方式也有兩種：

1 generics_func1('hello world');2//


或者3 generics_func2('hello world');
第二種呼叫方式可以省略型別引數，因為編譯器會根據傳入引數來自動識別對應的型別。

在之前介紹的基本型別

裡，有乙個any型別，表示不確定的型別。在具體使用時，可以代替任意型別，比如如下方法定義和實現：

1


function


any_func(arg: any): any 


45 any_func(1);


6 any_func('hello world!');


7 any_func(['1', '2']);
看似與泛型方法類似，但是還是有區別的。比如如下例子：

1


//方法一：帶有any引數的方法


2function


any_func(arg: any): any 67


//方法二：array泛型方法


8function array_func(arg: array): array
在方法一的方法體裡，列印了arg引數的length屬性。因為any可以代替任意型別，所以該方法在傳入引數不是陣列或者帶有length屬性物件時，會丟擲異常。而方法二定義了引數型別是array的泛型型別，肯定會有length屬性，所以不會丟擲異常。

從上面這個例子可以看出，泛型型別相比較any型別來說，在某些情況下會帶有型別本身的一些資訊，而any型別則沒有。

以下是乙個泛型類的定義和呼叫

1 class generics_demo6}


78 let gene_demo1 = new generics_demo();


9 gene_demo1.value = 1;


10 console.log(gene_demo1.show());                                     //


呼叫方法


1112 gene_demo1.show = function ()       //


賦值新方法，返回值型別必須是number


13 console.log(gene_demo1.show());
通過指定明確型別的泛型類的例項，對屬性賦值時，必須滿足實際型別的約束。

以下幾個例子都是利用泛型型別定義變數或者方法引數的型別的示例

1. 泛型介面

1


inte***ce generics_inte***ce 45


function func_demo(arg: t): t 


89 let func1: generics_inte***ce = func_demo;
上面的例子裡，介面只有乙個泛型方法成員。則用此介面型別定義的變數就是乙個與成員型別一致的泛型方法。

將上面例子的泛型介面稍微改一下

1 inte***ce generics_inte***ce45


function func_demo(arg: t): t 


89 let func1: generics_inte***ce=func_demo;


10 func1(123);     //


正確型別的實際引數


11 func1('123');   //


錯誤型別的實際引數
通過在介面上宣告泛型，宣告變數時明確指定泛型的具體型別，則賦值的方法將自動帶上具體的型別約束。

2. 泛型型別繼承

1


inte***ce lengthinte***ce 45


function func_demo(arg: t): t 


910 func_demo();     //


含有length屬性的物件


11 func_demo([1, 2]);                  //


陣列型別
上面的例子裡，泛型型別繼承自乙個擁有length屬性成員的介面，泛型型別將自動加上length屬性的約束。呼叫時只有符合條件的物件才能正確賦值。

1


function copy(source: u, target: t): t 56


return


target;7}


89 copy(, );         //


正確的實際引數


10 copy(, );               //


錯誤的實際引數
在上面的例子裡，乙個泛型型別繼承自另外乙個泛型型別。在方法呼叫時，就必須確保繼承型別對應的引數物件屬性完全包含被繼承型別對應的引數物件。

Typescript學習筆記

物件導向特性 類類的宣告 用class關鍵字 加類名 class person 類宣告完之後就可以被例項化了,類相當於乙個模子.name string eat var p1 new person p1.name batman p1.eat var p2 new person p2.name supe...

typescript學習筆記

1，ts是js的超集，ts是強型別語言。ts比js入門更難。ts的物件導向寫法比js更優雅。ts更適合團隊協作。2，宣告變數篇。3，宣告函式篇。4，物件導向篇。4.1，子類繼承父類 extends 繼承多個介面 implements。4.2，this表示當前物件，super表示父類物件。子類不寫co...

TypeScript學習（五）泛型

泛型，可以支援不固定的型別，具體型別呼叫方法時決定 傳入什麼型別，返回什麼型別 對引數校驗 function get t value t tconsole.log get 123 123通過規定類泛型，增加類的可接收型別，避免宣告多餘的功能類似的類，提公升 復用 class minclass t 獲...