TypeScript 列舉指南

雲叔_又拍雲發表於2021-10-12
TypeScript

列舉是受 TypeScript 支援的資料型別。列舉允許您定義一組命名常量。使用它們可以更輕鬆地記錄意圖或建立一組不同的案例。列舉大多數用於物件導向的程式語言（如 Java 和 C#）中，現在也可以 TypeScript 中使用。它們是 TypeScript 的少數功能之一，它不是 JavaScript 的型別級擴充套件。接下來我將要演示 TypeScript 列舉的基礎知識以及用例，各種列舉型別和學習的後續步驟。

TypeScript 中的列舉是什麼

許多程式語言（例如 C，C# 和 Java）都具有 enum 資料型別，而 JavaScript 沒有。但是 TypeScript 可以，TypeScript 具有基於數字和基於字串的列舉。TypeScript 列舉允許開發人員定義一組命名常量。使用它們可以更輕鬆地記錄意圖或建立一組不同的案例。

列舉的語法如下：

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

在 TypeScript 中使用列舉需要注意什麼

首先列舉中的值是常量，即列舉是型別安全的，在重新分配值時會返回編譯錯誤。其次列舉應該是有限的，有助於使用者建立一個自定義的常量系統。列舉在被編譯後是一個物件：在 JavaScript 中建立記憶體有效的自定義常量，使用靈活易於表達記錄意圖方便作為判斷用例。

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 }

常見列舉的型別

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

** 數字列舉

數字列舉以字串儲存數字值 。讓我們使用 enum 關鍵字定義它們。下面我將用儲存一組不同型別汽車的示例展示 TypeScript 中的數字列舉：

enum CarType {
    Honda,
    Toyota,
    Subaru,
    Hyundai
}

列舉值 CarType 有四個值：本田，豐田，斯巴魯和現代。列舉值從 0 開始，並且每個成員的值遞增 1 ，如下所示：

Honda = 0

Toyota = 1

Subaru = 2

Hyundai = 3

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


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

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

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


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

遺憾的是這是行不通的，當前例子的數值是：

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

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

字串列舉

字串列舉類似於數字列舉，但是它們的列舉值是使用字串值而不是數字值初始化的。 字串列舉比數字列舉具有更好的可讀性 ，從而更容易除錯程式。

以下示例使用與數值列舉示例相同的資訊，但以字串列舉表示：

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

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

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

列舉反向對映

列舉可以使用其相對應的列舉成員值檢索 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 
}

列舉的每個值在內部儲存的列舉物件中出現兩次。

計算列舉

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


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

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

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

以上就是本文的全部內容，通過講解什麼是列舉，我們在使用列舉的時候應該注意什麼。到我們常用的列舉型別（數值列舉，字串列舉），列舉反向對映，計算列舉。相信你對列舉已經有了一定的瞭解，如果文章有什麼沒有講明白的或是有什麼錯誤的地方歡迎指正，感激不盡。

推薦閱讀

加密的藝術

程式碼簽名證照，讓軟體真正擁有姓名！

相關文章