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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
總結分享10個JavaScript代碼優(yōu)化小tips
這篇文章主要介紹了總結分享10個JavaScript代碼優(yōu)化小tips，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
javascript下高性能字符串連接StringBuffer類
使用StringBuffer類比使用加號節(jié)省50%左右的時間，大家對于大數(shù)據(jù)的連接最好使用這個方法。2010-08-08
JavaScript判斷是否為數(shù)組的3種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)組的3種方法及效率比較,本文直接給出運行效果和實現(xiàn)代碼,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細，需要的朋友參考下吧2017-01-01
easyui form validate總是返回false的原因及解決方法
下面小編就為大家?guī)硪黄猠asyui form validate總是返回false的原因及解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細介紹了Bootstrap面板的學習使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
使用multiple可以實現(xiàn)select多選，本例將為大家介紹下select多選 multiple的使用，新手朋友們可以學習下2014-06-06
本文主要介紹了javaScript的基礎知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
本文為大家詳細介紹下通過JS實現(xiàn)可改變列寬的table，具體的思路及代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
用戶輸入密碼時都是顯示的星號了，那么我們希望查看明文要怎么查看呢，下面我們只要使用一段簡單的js就可以實現(xiàn)查看密碼框的明文了，有需要的小伙伴可以來參考下。2015-05-05