TypeScript泛型使用詳細(xì)介紹
1 什么是泛型
泛型的本質(zhì)是參數(shù)化類型,也就是說所操作的數(shù)據(jù)類型被指定為一個參數(shù)。這種參數(shù)類型可以用在類、接口和方法的創(chuàng)建中,分別稱為泛型類、泛型接口、泛型方法。

泛型使用<T>來定義類型,<T>中的T可以是U也可以是其他合法的字母,建議大寫。泛型可以理解為不確定單獨(dú)類型,函數(shù)中使用泛型,可以約束函數(shù)的參數(shù)和返回值類型相同。
2 泛型方法
當(dāng)定義identity函數(shù)時,這個函數(shù)會返回任何傳入它的值,不用泛型的話,這個函數(shù)可能是下面這樣:
function identity(arg: number): number {
return arg;
}
但是這樣的話,參數(shù)和返回值規(guī)定了必須為number類型。如果我們不確定它們的類型,要怎么寫呢,我們可能會使用any類型來定義函數(shù):
function identity(arg: any): any {
return arg;
}
但是使用any類型會導(dǎo)致這個函數(shù)可以接收任何類型的arg參數(shù),這樣就丟失了一些信息:傳入的類型與返回的類型應(yīng)該是相同的。如果我們傳入一個數(shù)字,任何類型的值都有可能被返回。
對于這個問題,我們就可以使用類型變量來解決。類型變量是一種特殊的變量,只用于表示類型而不是值。它的語法格式為:
function 函數(shù)名<T>(參數(shù): T): T {
return 值;
}
示例代碼:
function identity<T>(arg: T): T {
return arg;
}
給identity添加了類型變量T。 T幫助我們捕獲用戶傳入的類型(比如:number),之后我們就可以使用這個類型。 之后我們再次使用了 T當(dāng)做返回值類型?,F(xiàn)在我們可以知道參數(shù)類型與返回值類型是相同的了。 這允許我們跟蹤函數(shù)里使用的類型的信息。
定義了泛型方法后,可以用兩種方法使用。
// 第一種:傳入所有的參數(shù),包含類型參數(shù)
var a = identity<string>("myString");
// 第二種:使用類型推論——即編譯器會根據(jù)傳入的參數(shù)自動地幫助我們確定T的類型
var a = identity("myString");3 泛型類
當(dāng)我們需要實現(xiàn)找最小數(shù)的算法時,并且需要同時支持返回數(shù)字和字符串兩種類型,就可以通過類的泛型來實現(xiàn)。
示例代碼: 非泛型實現(xiàn)方式
class MinClass {
list: number[] = [];
add(num: number) {
this.list.push(num);
}
min(): number {
var minNum = this.list[0];
for (var i = 0; i < this.list.length; i++) {
if (minNum > this.list[i]) {
minNum = this.list[i];
}
}
return minNum;
}
}示例代碼:泛型方式實現(xiàn)
class MinClass<T> {
list: T[] = [];
add(num: T) {
this.list.push(num);
}
min(): T {
var minNum = this.list[0];
for (var i = 0; i < this.list.length; i++) {
if (minNum > this.list[i]) {
minNum = this.list[i];
}
}
return minNum;
}
}4 泛型接口
首先來看一下普通函數(shù)接口:
interface ConfigFn { // 普通函數(shù)接口
(value1: string, value2: string): string;
}
那么如果將它轉(zhuǎn)換成泛型接口呢?有下面兩種方法:
1、第一種定義方式
interface ConfigFn {
<T>(value: T): T; // T表示參數(shù)類型
}
2、第二種方式
interface ConfigFn<T> {
(value: T): T; // T表示參數(shù)類型
}
到此這篇關(guān)于TypeScript泛型使用詳細(xì)介紹的文章就介紹到這了,更多相關(guān)TypeScript泛型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
uni-file-picker文件選擇上傳功能實現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
Promise 鏈?zhǔn)秸{(diào)用原理精簡示例
這篇文章主要為大家介紹了Promise 鏈?zhǔn)秸{(diào)用原理精簡示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
淺析C/C++,Java,PHP,JavaScript,Json數(shù)組、對象賦值時最后一個元素后面是否可以帶逗號
這篇文章主要介紹了淺析C/C++,Java,PHP,JavaScript,Json數(shù)組、對象賦值時最后一個元素后面是否可以帶逗號的相關(guān)資料,需要的朋友可以參考下2016-03-03
論壇轉(zhuǎn)貼工具中用到的正則表達(dá)式學(xué)習(xí)正則的好例子
論壇轉(zhuǎn)貼工具中用到的正則表達(dá)式學(xué)習(xí)正則的好例子...2007-11-11

