TypeScript泛型使用詳細介紹

更新時間：2022年10月20日 08:52:13 作者：橘貓吃不胖～

泛型是靜態(tài)類型語言的基本特征，允許將類型作為參數傳遞給另一個類型、函數、或者其他結構。TypeScript 支持泛型作為將類型安全引入組件的一種方式。這些組件接受參數和返回值，其類型將是不確定的，直到它在代碼中被使用

1 什么是泛型

泛型的本質是參數化類型，也就是說所操作的數據類型被指定為一個參數。這種參數類型可以用在類、接口和方法的創(chuàng)建中，分別稱為泛型類、泛型接口、泛型方法。

泛型使用<T>來定義類型，<T>中的T可以是U也可以是其他合法的字母，建議大寫。泛型可以理解為不確定單獨類型，函數中使用泛型，可以約束函數的參數和返回值類型相同。

2 泛型方法

當定義identity函數時，這個函數會返回任何傳入它的值，不用泛型的話，這個函數可能是下面這樣：

function identity(arg: number): number {
    return arg;
}

但是這樣的話，參數和返回值規(guī)定了必須為number類型。如果我們不確定它們的類型，要怎么寫呢，我們可能會使用any類型來定義函數：

function identity(arg: any): any {
    return arg;
}

但是使用any類型會導致這個函數可以接收任何類型的arg參數，這樣就丟失了一些信息：傳入的類型與返回的類型應該是相同的。如果我們傳入一個數字，任何類型的值都有可能被返回。

對于這個問題，我們就可以使用類型變量來解決。類型變量是一種特殊的變量，只用于表示類型而不是值。它的語法格式為：

function 函數名<T>(參數: T): T {
    return 值;
}

示例代碼：

function identity<T>(arg: T): T {
    return arg;
}

給identity添加了類型變量T。 T幫助我們捕獲用戶傳入的類型（比如：number），之后我們就可以使用這個類型。之后我們再次使用了 T當做返回值類型。現在我們可以知道參數類型與返回值類型是相同的了。這允許我們跟蹤函數里使用的類型的信息。

定義了泛型方法后，可以用兩種方法使用。

// 第一種：傳入所有的參數，包含類型參數
var a = identity<string>("myString");
// 第二種：使用類型推論——即編譯器會根據傳入的參數自動地幫助我們確定T的類型
var a = identity("myString");

3 泛型類

當我們需要實現找最小數的算法時，并且需要同時支持返回數字和字符串兩種類型，就可以通過類的泛型來實現。

示例代碼：非泛型實現方式

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;
    }
}

示例代碼：泛型方式實現

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 泛型接口

首先來看一下普通函數接口：

interface ConfigFn { // 普通函數接口
    (value1: string, value2: string): string;
}

那么如果將它轉換成泛型接口呢？有下面兩種方法：

1、第一種定義方式

interface ConfigFn {
    <T>(value: T): T; // T表示參數類型
}

2、第二種方式

interface ConfigFn<T> {
    (value: T): T; // T表示參數類型
}

到此這篇關于TypeScript泛型使用詳細介紹的文章就介紹到這了,更多相關TypeScript泛型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

手機軟鍵盤彈出時影響布局的解決方法
這篇文章主要介紹了手機軟鍵盤彈出時影響布局的解決方法的相關資料,大家開發(fā)移動端的軟件時候，肯定會因為軟鍵盤的彈窗影響布局，這里說下如何解決，需要的朋友可以參考下
2016-12-12
uni-file-picker文件選擇上傳功能實現
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
Promise 鏈式調用原理精簡示例
這篇文章主要為大家介紹了Promise 鏈式調用原理精簡示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
JavaScript實現職責鏈模式概述
這篇文章主要介紹了JavaScript實現職責鏈模式概述，詳細的介紹了什么是職責鏈模式和實現方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-01-01
淺析C/C++,Java,PHP,JavaScript,Json數組、對象賦值時最后一個元素后面是否可以帶逗號
這篇文章主要介紹了淺析C/C++,Java,PHP,JavaScript,Json數組、對象賦值時最后一個元素后面是否可以帶逗號的相關資料,需要的朋友可以參考下
2016-03-03
Javascript的爺孫通信和組件自調用詳解
這篇文章主要為大家詳細介紹了Javascript的爺孫通信和組件自調用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
詳細聊聊對async/await的理解和用法
隨著Nodev7的發(fā)布,越來越多的人開始研究據說是異步編程終級解決方案的 async/await,這篇文章主要給大家介紹了關于對async/await的理解和用法,文中通過實例代碼介紹的介紹的非常詳細,需要的朋友可以參考下
2022-07-07
JavaScript獲取瀏覽器窗口尺寸的幾種方法
JavaScript是一種廣泛使用的腳本語言,用于開發(fā)網頁和應用程序,在Web開發(fā)中,經常需要獲取瀏覽器窗口的尺寸,以便根據窗口大小進行布局或執(zhí)行其他操作,本文將介紹如何使用JavaScript來獲取瀏覽器窗口尺寸,需要的朋友可以參考下
2023-11-11
layui table復選框禁止某幾條勾選的實例
今天小編就為大家分享一篇layui table復選框禁止某幾條勾選的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
論壇轉貼工具中用到的正則表達式學習正則的好例子
論壇轉貼工具中用到的正則表達式學習正則的好例子...
2007-11-11