官網地址

枚舉是 TypeScript 為數不多的不是 JavaScript 類型級擴展的特性之一。

枚舉允許開發人員定義一組命名常量。 使用枚舉可以更輕松地記錄意圖，或創建一組不同的案例。 TypeScript 提供數字和基于字符串的枚舉。

Numeric enums

我們將首先從數字枚舉開始，如果您在其他語言里使用過枚舉類型，可能會更熟悉。 可以使用 enum 關鍵字定義枚舉。

enum Direction {Up = 1,Down,Left,Right, }

上面的代碼里，我們有一個數字枚舉，其中 Up 初始化為 1。從那時起，以下所有成員都會自動遞增。 換句話說，Direction.Up 的值為 1，Down 的值為 2，Left 的值為 3，Right 的值為 4。

如果省去 Up = 1，則默認從 0 開始給枚舉值賦值。

運行時的枚舉值

枚舉是在運行時存在的真實對象。 例如，下面的枚舉，可以作為形式參數的定義，傳入到函數里：

enum E {X,Y,Z, }function f(obj: { X: number }) {return obj.X; }// Works, since 'E' has a property named 'X' which is a number. f(E);

上面的例子里，E.X 和 { X: number } 這兩個類型是兼容的 - Compatible

Reverse mappings

使用反向映射，能夠根據枚舉的值拿到其名稱。

除了為成員創建具有屬性名稱的對象之外，數字枚舉成員還獲得從枚舉值到枚舉名稱的反向映射。 例如，在這個例子中：

enum Enum {A, }let a = Enum.A; let nameOfA = Enum[a]; // "A"

對應生成的 JavaScript 代碼：

"use strict"; var Enum; (function (Enum) {Enum[Enum["A"] = 0] = "A"; })(Enum || (Enum = {})); let a = Enum.A; let nameOfA = Enum[a]; // "A"

在這個生成的代碼中，一個枚舉被編譯成一個存儲前向（名稱 -> 值）和反向（值 -> 名稱）映射的對象。 對其他枚舉成員的引用始終作為屬性訪問發出，并且從不內聯。

請記住，字符串枚舉成員根本不會生成反向映射。

constenums

在大多數情況下，枚舉是一個完全有效的解決方案。 然而，有時要求更嚴格。 為了避免在訪問枚舉值時支付額外生成的代碼和額外的間接費用，可以使用 const 枚舉。 Const 枚舉是在我們的枚舉上使用 const 修飾符定義的：

const enum Enum {A = 1,B = A * 2, }

常量枚舉只能使用常量枚舉表達式，并且與常規枚舉不同，它們在編譯期間被完全刪除。 Const 枚舉成員在使用站點內聯。 這是可能的，因為 const 枚舉不能有計算成員。

const enum Direction {Up,Down,Left,Right, }let directions = [Direction.Up,Direction.Down,Direction.Left,Direction.Right, ];

上述代碼轉換成 JavaScript 之后：

"use strict"; let directions = [0 /* Up */,1 /* Down */,2 /* Left */,3 /* Right */, ];

另一個實際例子：

enum FakeUserAgent {Chrome = 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36',InternetExplorer10 = 'Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)',InternetExplorer11 = 'WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko',Firefox = 'Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0', };const nonInternetExplorerUserAgents: ReadonlyArray<string> =Object.entries(FakeUserAgent).filter(([browser]) =>!browser.toLowerCase().includes('internetexplorer')).map(([_browser, userAgent]) => userAgent);console.log(nonInternetExplorerUserAgents);

執行效果：

枚舉字段里包含字符串 internetexplorer 的值被過濾了：

總結

以上是生活随笔為你收集整理的TypeScript 里的枚举类型 enum的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。