快捷導(dǎo)航

TypeScript Enum類型入門

更新時間：2026年01月20日 10:03:48 作者：如果你好

Enum是TypeScript提供的自定義類型,用來定義一組有名字的常量集合, 本文就來介紹一下Enum兩種常用類型（數(shù)字枚舉和字符串枚舉）以及高級小技巧,具有一定參考價值,感興趣的可以了解一下

一、什么是 Enum？

Enum 是 TypeScript 提供的自定義類型，用來定義一組有名字的常量集合。

簡單說，就是給一堆固定的值起個好記的名字，替代代碼里的「魔法值」。

// 不用枚舉：直接寫值，別人看不懂 200 啥意思
const successCode = 200;

// 用枚舉：語義清晰，一看就懂
enum HttpStatus {
  Success = 200,
  Error = 500
}

枚舉的核心好處：

可讀性高：不用猜數(shù)字/字符串代表的含義
類型安全：寫錯值會直接報錯
易維護(hù)：常量集中管理，改一處就行

二、Enum 的兩種常用類型

TypeScript 里最常用的是 數(shù)字枚舉 和 字符串枚舉，異構(gòu)枚舉（數(shù)字+字符串混合）基本不用，這里不展開。

1. 數(shù)字枚舉

枚舉成員的值是數(shù)字，支持自動遞增和反向映射。

基礎(chǔ)用法

// 顯式賦值：每個成員指定數(shù)字
enum Weekday {
  Monday = 1,
  Tuesday = 2,
  Wednesday = 3
}

// 使用：直接通過 枚舉名.成員名 取值
const today = Weekday.Monday;
console.log(today); // 輸出 1

自動遞增（超方便）

如果不給成員賦值，TypeScript 會從 0 開始自動加 1。

// 隱式遞增：Left=0, Right=1, Top=2, Bottom=3
enum Direction {
  Left,
  Right,
  Top,
  Bottom
}

console.log(Direction.Right); // 輸出 1

反向映射（數(shù)字枚舉專屬）

數(shù)字枚舉可以通過值查名字，這是字符串枚舉沒有的特性。

enum Weekday {
  Monday = 1
}

// 正向：名字 → 值
console.log(Weekday.Monday); // 1
// 反向：值 → 名字
console.log(Weekday[1]); // "Monday"

2. 字符串枚舉

枚舉成員的值是字符串，必須手動賦值，不支持自動遞增和反向映射。

基礎(chǔ)用法

// 每個成員都要寫字符串值
enum UserRole {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Viewer = "VIEWER"
}

// 使用
const role = UserRole.Admin;
console.log(role); // 輸出 "ADMIN"

// 字符串枚舉沒有反向映射，下面代碼會報錯
console.log(UserRole["ADMIN"]); // undefined

核心優(yōu)勢：可讀性更強(qiáng)

調(diào)試時直接能看到字符串值，比數(shù)字更直觀。比如打印日志，ADMIN 比 1 好理解多了。

三、高級小技巧：常量枚舉（const enum）

在枚舉前加 const，就是常量枚舉。它的特點是：編譯后不會生成額外代碼，直接把值「嵌入」到使用的地方，體積更小、速度更快。

// 常量枚舉
const enum Color {
  Red = "RED",
  Green = "GREEN"
}

// 使用
const myColor = Color.Green;

編譯后對比（看懂就行）

普通枚舉：會生成一個對象，占內(nèi)存
常量枚舉：直接變成 const myColor = "GREEN"，沒有多余代碼

注意：常量枚舉不支持反向映射，適合只需要取值的場景。

四、實戰(zhàn)場景：枚舉到底怎么用？

枚舉在項目里到處能用，舉兩個最常見的例子。

場景 1：管理接口狀態(tài)碼

后端返回的狀態(tài)碼，用枚舉統(tǒng)一管理，再也不用記數(shù)字了。

// 定義狀態(tài)碼枚舉
enum ApiStatus {
  Success = 200,
  NoAuth = 401,
  ServerError = 500
}

// 接口請求后判斷狀態(tài)
function handleResult(code: ApiStatus) {
  switch(code) {
    case ApiStatus.Success:
      console.log("請求成功");
      break;
    case ApiStatus.NoAuth:
      console.log("請先登錄");
      break;
    case ApiStatus.ServerError:
      console.log("服務(wù)器出錯了");
      break;
  }
}

// 調(diào)用函數(shù)
handleResult(ApiStatus.NoAuth); // 輸出 "請先登錄"

場景 2：做下拉框選項（前端常用）

Vue/React 里的下拉框選項，用枚舉定義，避免硬編碼。

// 性別枚舉
enum Gender {
  Male = "MALE",
  Female = "FEMALE"
}

// 轉(zhuǎn)成前端框架需要的選項格式
const genderOptions = [
  { label: "男", value: Gender.Male },
  { label: "女", value: Gender.Female }
];

// Vue 里用
// <el-select v-model="gender">
//   <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value" />
// </el-select>

到此這篇關(guān)于TypeScript Enum類型入門的文章就介紹到這了,更多相關(guān)TypeScript Enum類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: