TypeScript枚舉Enum的具體使用
TypeScript 枚舉通過命名常量、類型安全和結構化組織，顯著提升代碼質(zhì)量。使用時需根據(jù)場景選擇合適的類型（數(shù)字、字符串或常量枚舉），并權衡性能與動態(tài)訪問需求。掌握其特性和使用的場景，能在復雜項目中有效提升代碼的可維護性和健壯性。接下來我會通過案例，深入解讀Enum。
一、枚舉的核心作用
替代魔法值 用有意義的名稱取代硬編碼數(shù)字或字符串，減少代碼歧義。
enum StatusCode { Success = 200, NotFound = 404 }
if (response.status === StatusCode.Success) { ... } // 比直接判斷200更清晰類型安全 限制變量只能使用枚舉成員，編譯器會在賦值或比較時檢查類型。
enum Direction { Up, Down }
let dir: Direction = Direction.Up; // 正確
dir = 3; // 錯誤：不能將數(shù)字直接賦值給枚舉類型組織相關常量 將邏輯關聯(lián)的常量歸類，便于維護和擴展。
enum LogLevel { Info, Warn, Error }二、枚舉的類型與語法
1. 數(shù)字枚舉（默認）
成員默認從 0 開始自增，也可手動賦值。
支持反向映射：通過值獲取名稱（僅數(shù)字枚舉）。
enum Direction {
Up = 1, // 顯式賦值
Down, // 自動遞增為2
Left = 4,
Right, // 自動遞增為5
}
console.log(Direction.Down); // 輸出: 2
console.log(Direction[2]); // 輸出: "Down"（反向映射）2. 字符串枚舉
成員必須顯式初始化字符串值。
無反方向映射，適用于需明確語義的場景。
enum LogLevel {
Info = "INFO",
Warn = "WARN",
Error = "ERROR"
}
console.log(LogLevel.Info); // 輸出: "INFO"3. 常量枚舉（const enum）
編譯時被完全內(nèi)聯(lián)，無運行時對象。
提升性能，但無法反射或動態(tài)訪問。
const enum Size { Small, Medium }
let size = Size.Small; // 編譯后：let size = 0;4. 異構枚舉（不推薦）
混合數(shù)字和字符串成員，易引發(fā)混亂。
enum BooleanLikeEnum {
No = 0,
Yes = "YES",
}5. 同名枚舉合并
多個同名的 Enum 結構會自動合并。
enum Foo {
A,
}
enum Foo {
B = 1,
}
enum Foo {
C = 2,
}
// 等同于
enum Foo {
A,
B = 1，
C = 2
}三、枚舉的高級特性
1. 計算成員與常量成員
常量成員：值在編譯時確定（字面量、其他常量成員引用）。
計算成員：值在運行時計算（需顯式初始化后續(xù)成員）。
enum FileAccess {
None, // 常量成員 0
Read = 1 << 1, // 計算成員 2
Write = 1 << 2, // 計算成員 4
ReadWrite = Read | Write, // 計算成員 6
// 后續(xù)成員必須顯式初始化
Execute = 8
}2. 枚舉作為類型
限制變量或參數(shù)只能為枚舉成員值，這是枚舉的一個缺點。
enum UserRole { Admin, Guest }
function setRole(role: UserRole) { ... }
setRole(UserRole.Admin); // 正確
setRole(2); // 錯誤：類型不符四、枚舉的優(yōu)缺點對比
| 優(yōu)點 | 缺點 |
|---|---|
| 提升代碼可讀性 | 編譯后生成額外代碼（非 const enum） |
| 編譯時類型檢查 | 字符串枚舉不支持反向映射 |
| 支持反向映射（數(shù)字枚舉） | 異構枚舉易導致邏輯混亂 |
| 便于統(tǒng)一管理常量 | 動態(tài)訪問可能繞過類型檢查（數(shù)字枚舉） |
五、使用場景
優(yōu)先使用字符串枚舉 提高代碼自描述性，避免數(shù)字枚舉的隱式歧義。
性能敏感場景用
const enum減少生成代碼量，但需確保無需動態(tài)訪問枚舉。替代方案考量
- 聯(lián)合類型：適用于簡單且無需反向映射的場景。
type LogLevel = 'INFO' | 'WARN' | 'ERROR';
- 對象常量：需手動凍結對象防止修改，無類型約束。
const LogLevel = { Info: 'INFO' } as const;
- 聯(lián)合類型：適用于簡單且無需反向映射的場景。
引用一個例子：Enum 結構比較適合的場景是，成員的值不重要，名字更重要，從而增加代碼的可讀性和可維護性。
enum Operator {
ADD,
DIV,
MUL,
SUB
}
function compute(
op:Operator,
a:number,
b:number
) {
switch (op) {
case Operator.ADD:
return a + b;
case Operator.DIV:
return a / b;
case Operator.MUL:
return a * b;
case Operator.SUB:
return a - b;
default:
throw new Error('wrong operator');
}
}
compute(Operator.ADD, 1, 3) // 4 上面示例中，Enum 結構Operator的四個成員表示四則運算“加減乘除”。代碼根本不需要用到這四個成員的值，只用成員名就夠了。
六、示例對比
枚舉 vs 聯(lián)合類型
枚舉方案：
enum Theme { Dark = 'dark', Light = 'light' }
function setTheme(theme: Theme) { ... }
setTheme(Theme.Dark);聯(lián)合類型方案：
type Theme = 'dark' | 'light';
function setTheme(theme: Theme) { ... }
setTheme('dark');對比：
- 枚舉集中管理常量，修改時只需調(diào)整枚舉定義。
- 聯(lián)合類型無需生成額外代碼，適合簡單場景。
到此這篇關于TypeScript枚舉Enum的具體使用的文章就介紹到這了,更多相關TypeScript枚舉Enum內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
淺析Echarts圖表渲染導致內(nèi)存泄漏的原因及解決方案
在今年某個可視化大屏項目中,出現(xiàn)了一個問題,項目在運行一段時間后,頁面出現(xiàn)了崩潰,而且是大概運行幾天之后,因為大屏項目是部署到客戶現(xiàn)場大屏,長時間運行不關閉,小編認為 Echarts 圖表渲染導致了內(nèi)存泄漏,本文將深入分析這一問題,并提供解決方案2023-10-10
JavaScript 對引擎、運行時、調(diào)用堆棧的概述理解
這篇文章旨在深入挖掘JavaScript，以及向大家解釋JavaScript是如何工作的。非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法
下面小編就為大家?guī)硪黄獪\談html轉(zhuǎn)義及防止javascript注入攻擊的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要為大家介紹了JavaScript的Set數(shù)據(jù)結構，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
javascript html5輕松實現(xiàn)拖動功能
這篇文章主要為大家詳細介紹了javascript html5輕松實現(xiàn)拖動功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了javascript實現(xiàn)平滑無縫滾動的具體代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了js身份證判斷方法支持15位和18位,需要的朋友可以參考下2014-03-03
JavaScript實現(xiàn)動態(tài)表格的示例代碼
動態(tài)表格是指在網(wǎng)頁上顯示的數(shù)據(jù)表格,可以根據(jù)用戶輸入或頁面元素的變化動態(tài)更新內(nèi)容,本文主要介紹了JavaScript實現(xiàn)動態(tài)表格的示例代碼,感興趣的可以了解一下2024-04-04
本篇文章主要教給大家如何在javascript中動態(tài)加載按順序加載運行js的方法以及實現(xiàn)代碼，需要的朋友參考學習下吧。2017-12-12
這篇文章主要給大家總結介紹了關于JS中循環(huán)遍歷數(shù)組的四種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01