TypeScript Enum 类型入门：从基础到实战

一、什么是 Enum？

Enum 是 TypeScript 提供的自定义类型 ，用来定义一组有名字的常量集合。

简单说，就是给一堆固定的值起个好记的名字，替代代码里的「魔法值」。

typescript 复制代码

// 不用枚举：直接写值，别人看不懂 200 啥意思
const successCode = 200;

// 用枚举：语义清晰，一看就懂
enum HttpStatus {
  Success = 200,
  Error = 500
}

枚举的核心好处：

可读性高：不用猜数字/字符串代表的含义
类型安全：写错值会直接报错
易维护：常量集中管理，改一处就行

二、Enum 的两种常用类型

TypeScript 里最常用的是 数字枚举 和 字符串枚举，异构枚举（数字+字符串混合）基本不用，这里不展开。

1. 数字枚举

枚举成员的值是数字，支持自动递增 和反向映射。

基础用法

typescript 复制代码

// 显式赋值：每个成员指定数字
enum Weekday {
  Monday = 1,
  Tuesday = 2,
  Wednesday = 3
}

// 使用：直接通过 枚举名.成员名 取值
const today = Weekday.Monday;
console.log(today); // 输出 1

自动递增（超方便）

如果不给成员赋值，TypeScript 会从 0 开始自动加 1。

typescript 复制代码

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

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

反向映射（数字枚举专属）

数字枚举可以通过值查名字，这是字符串枚举没有的特性。

typescript 复制代码

enum Weekday {
  Monday = 1
}

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

2. 字符串枚举

枚举成员的值是字符串，必须手动赋值，不支持自动递增和反向映射。

基础用法

typescript 复制代码

// 每个成员都要写字符串值
enum UserRole {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Viewer = "VIEWER"
}

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

// 字符串枚举没有反向映射，下面代码会报错
console.log(UserRole["ADMIN"]); // undefined

核心优势：可读性更强

调试时直接能看到字符串值，比数字更直观。比如打印日志，ADMIN 比 1 好理解多了。

三、高级小技巧：常量枚举（const enum）

在枚举前加 const，就是常量枚举。它的特点是：编译后不会生成额外代码，直接把值「嵌入」到使用的地方，体积更小、速度更快。

typescript 复制代码

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

// 使用
const myColor = Color.Green;

编译后对比（看懂就行）

普通枚举：会生成一个对象，占内存
常量枚举：直接变成 const myColor = "GREEN"，没有多余代码

注意：常量枚举不支持反向映射，适合只需要取值的场景。

四、实战场景：枚举到底怎么用？

枚举在项目里到处能用，举两个最常见的例子。

场景 1：管理接口状态码

后端返回的状态码，用枚举统一管理，再也不用记数字了。

typescript 复制代码

// 定义状态码枚举
enum ApiStatus {
  Success = 200,
  NoAuth = 401,
  ServerError = 500
}

// 接口请求后判断状态
function handleResult(code: ApiStatus) {
  switch(code) {
    case ApiStatus.Success:
      console.log("请求成功");
      break;
    case ApiStatus.NoAuth:
      console.log("请先登录");
      break;
    case ApiStatus.ServerError:
      console.log("服务器出错了");
      break;
  }
}

// 调用函数
handleResult(ApiStatus.NoAuth); // 输出 "请先登录"

场景 2：做下拉框选项（前端常用）

Vue/React 里的下拉框选项，用枚举定义，避免硬编码。

typescript 复制代码

// 性别枚举
enum Gender {
  Male = "MALE",
  Female = "FEMALE"
}

// 转成前端框架需要的选项格式
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>