欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

TypeScript泛型使用詳細(xì)介紹

 更新時(shí)間：2022年10月20日 08:52:13   作者：橘貓吃不胖～  
泛型是靜態(tài)類型語言的基本特征，允許將類型作為參數(shù)傳遞給另一個(gè)類型、函數(shù)、或者其他結(jié)構(gòu)。TypeScript 支持泛型作為將類型安全引入組件的一種方式。這些組件接受參數(shù)和返回值，其類型將是不確定的，直到它在代碼中被使用

1 什么是泛型

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

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

2 泛型方法

當(dāng)定義identity函數(shù)時(shí)，這個(gè)函數(shù)會(huì)返回任何傳入它的值，不用泛型的話，這個(gè)函數(shù)可能是下面這樣：

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

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

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

但是使用any類型會(huì)導(dǎo)致這個(gè)函數(shù)可以接收任何類型的arg參數(shù)，這樣就丟失了一些信息：傳入的類型與返回的類型應(yīng)該是相同的。如果我們傳入一個(gè)數(shù)字，任何類型的值都有可能被返回。

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

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

示例代碼：

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

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

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

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

3 泛型類

當(dāng)我們需要實(shí)現(xiàn)找最小數(shù)的算法時(shí)，并且需要同時(shí)支持返回?cái)?shù)字和字符串兩種類型，就可以通過類的泛型來實(shí)現(xiàn)。

示例代碼： 非泛型實(shí)現(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;
    }
}

示例代碼：泛型方式實(shí)現(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)文章

最新評(píng)論