前言

枚舉是受 TypeScript 支持的數(shù)據(jù)類型。枚舉允許您定義一組命名常量。使用它們可以更輕松地記錄意圖或創(chuàng)建一組不同的案例。枚舉大多數(shù)用于面向?qū)ο蟮木幊陶Z言（如 Java 和 C#）中，現(xiàn)在也可以 TypeScript 中使用。它們是 TypeScript 的少數(shù)功能之一，它不是 JavaScript 的類型級擴(kuò)展。接下來我將要演示 TypeScript 枚舉的基礎(chǔ)知識以及用例，各種枚舉類型和學(xué)習(xí)的后續(xù)步驟。

TypeScript 中的枚舉是什么

許多編程語言（例如 C，C# 和 Java）都具有 enum 數(shù)據(jù)類型，而 JavaScript 沒有。但是 TypeScript 可以，TypeScript 具有基于數(shù)字和基于字符串的枚舉。TypeScript 枚舉允許開發(fā)人員定義一組命名常量。使用它們可以更輕松地記錄意圖或創(chuàng)建一組不同的案例。

枚舉的語法如下：

enum States {
    Apple,
    Orange，
    Banana，
    Watermelon
}
// 使用
var fruit = States.Watermelon;

在 TypeScript 中使用枚舉需要注意什么

首先枚舉中的值是常量，即枚舉是類型安全的，在重新分配值時會返回編譯錯誤。其次枚舉應(yīng)該是有限的，有助于用戶創(chuàng)建一個自定義的常量系統(tǒng)。枚舉在被編譯后是一個對象：在 JavaScript 中創(chuàng)建內(nèi)存有效的自定義常量，使用靈活易于表達(dá)記錄意圖方便作為判斷用例。

enum requestStatus {
    success = 200
    error = 400
}

let requestStatus;
(function (requestStatus) {
    requestStatus[requestStatus["success"] = 200] = "success"
    requestStatus[requestStatus["error"] = 400] = "error"
})(requestStatus || (requestStatus = {}));

// requestStatus:
// { '200': 'success', '400': 'error', error: 400, success: 200 }

常見枚舉的類型

數(shù)值枚舉 和 字符串枚舉 是我們在 TypeScript 中最常用的枚舉類型，下面我將用例子向你們介紹它們的特點以及如何使用它們。

** 數(shù)字枚舉

數(shù)字枚舉以字符串存儲數(shù)字值 。讓我們使用 enum 關(guān)鍵字定義它們。下面我將用存儲一組不同類型汽車的示例展示 TypeScript 中的數(shù)字枚舉：

enum CarType {
    Honda,
    Toyota,
    Subaru,
    Hyundai
}

枚舉值 CarType 有四個值：本田，豐田，斯巴魯和現(xiàn)代。枚舉值從 0 開始，并且每個成員的值遞增 1 ，如下所示：

Honda = 0

Toyota = 1

Subaru = 2

Hyundai = 3

如果需要你可以自己初始化第一個數(shù)值，如下所示：

enum CarType {
    Honda = 1,
    Toyota,
    Subaru,
    Hyundai
}

在上面的示例中，Honda 使用數(shù)值 1 初始化了第一個成員。剩余的數(shù)字將加一。

你可能會想，如果我更改最后一個值，之前的值會根據(jù)最后定義的數(shù)值遞減嗎？讓我們來試試：

enum CarType {
    Honda,
    Toyota,
    Subaru,
    Hyundai = 100
}

遺憾的是這是行不通的，當(dāng)前例子的數(shù)值是：

enum CarType {
    Honda,  // 1
    Toyota, // 2
    Subaru, // 3
    Hyundai // 100
}

注意：不必為枚舉成員分配順序值。你可以為其分配任何所需的值

字符串枚舉

字符串枚舉類似于數(shù)字枚舉，但是它們的枚舉值是使用字符串值而不是數(shù)字值初始化的。 字符串枚舉比數(shù)字枚舉具有更好的可讀性 ，從而更容易調(diào)試程序。

以下示例使用與數(shù)值枚舉示例相同的信息，但以字符串枚舉表示：

enum CarType {
    Honda = "HONDA",
    Toyota = "TOYOTA",
    Subaru = "SUBARU",
    Hyundai = "HYUNDAI"
}

// 訪問字符串枚舉
CarType.Toyota; //return TOYOTA

注意：字符串枚舉值需要單獨初始化。

枚舉反向映射

枚舉可以使用其相對應(yīng)的枚舉成員值檢索 num 值。使用反向映射，可以訪問成員值和成員值的名稱，請看下面的例子：

enum CarType {
    Honda = 1,
    Toyota,
    Subaru,
    Hyundai
}
CarType.Subaru; //return 3
CarType.["Subaru"]; //return 3
CarType[3]; //return Subaru

CarType[3] 由于反向映射，返回其成員名稱“ Subaru”。讓我們看另一個例子：

enum CarType {
    Honda = 1,
    Toyota,
    Subaru,
    Hyundai
}
console.log(CarType)

在瀏覽器的控制臺中將看到以下輸出：

{
    '1'：'Honda'，
    '2'：'Toyota'，
    '3'：'Subaru'，
    '4'：'Hyundai'，
    Honda：1，
    Toyota：2，
    Subaru：3，
    Hyundai：4
}

枚舉的每個值在內(nèi)部存儲的枚舉對象中出現(xiàn)兩次。

計算枚舉

枚舉成員的值可以是常量值或計算值。請看下面的示例：

enum CarType {
    Honda = 1,
    Toyota = getCarTypeCode('toyota'),
    Subaru = Toyota * 3,
    Hyundai = 10
}

function getCarTypeCode(carName: string): number {
    if (carName === 'toyota') {
        return 5;
    }
}

CarType.Toyota; // returns 5
CarType.Subaru; // returns 15

如果枚舉既包含計算成員又包含常量成員，則未初始化的枚舉成員將首先出現(xiàn)，也可能在其他帶有數(shù)字常量的初始化成員之后。下一個示例將顯示錯誤：

enum CarType {
    Toyota = getCarTypeCode('toyota'),
    Honda, // Error: Enum member must have initializer
    Subaru,
    Hyundai = Toyota * 3,
}

你可以這樣聲明上述枚舉：

enum CarType {
    Honda,
    Hyundai,
    Toyota = getCarTypeCode('toyota'),
    Subaru = Toyota * 3

以上就是本文的全部內(nèi)容，通過講解什么是枚舉，我們在使用枚舉的時候應(yīng)該注意什么。到我們常用的枚舉類型（數(shù)值枚舉，字符串枚舉），枚舉反向映射，計算枚舉。相信你對枚舉已經(jīng)有了一定的了解

總結(jié)

到此這篇關(guān)于TypeScript枚舉的基礎(chǔ)知識及實例的文章就介紹到這了,更多相關(guān)TypeScript枚舉基礎(chǔ)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論