TS 枚举

学习enum · 难度：入门 · +10XP

TypeScript 枚举类型

枚举（Enum） 是 TypeScript 中一种特殊的类型，用于定义一组命名的常量。当你的代码中有一系列相关联的固定值时（比如一周七天、颜色选项、订单状态等），使用枚举可以让代码更具可读性和可维护性。枚举本质上是一个从名称到数值（或字符串）的映射。

数字枚举（Numeric Enum）

默认情况下，枚举成员会被自动赋值为从 0 开始递增的数字。你也可以手动指定第一个成员的值，后续成员会在此基础上自动递增。

// 默认从 0 开始
enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right,   // 3
}
// 自定义起始值
enum StatusCode {
  OK = 200,
  Created = 201,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404,
  ServerError = 500,
}
let dir: Direction = Direction.Up;
console.log(dir);  // 输出: 0

字符串枚举（String Enum）

字符串枚举的每个成员必须用字符串字面量初始化。与数字枚举相比，字符串枚举在调试时更有优势，因为你可以直接看到有意义的名称而不是数字。字符串枚举不支持自动递增，每个成员都需要显式赋值。

enum Color {
  Red = '#FF0000',
  Green = '#00FF00',
  Blue = '#0000FF',
  Yellow = '#FFFF00',
}
enum LogLevel {
  Debug = 'DEBUG',
  Info = 'INFO',
  Warn = 'WARN',
  Error = 'ERROR',
}
function log(level: LogLevel, message: string) {
  console.log([${level}] ${message});
}
log(LogLevel.Error, '服务器连接失败'); // [ERROR] 服务器连接失败

枚举类型对比

特性	数字枚举	字符串枚举	常量枚举
自动递增	支持	不支持	编译时内联，不生成运行时代码
反向映射	支持（可通过值获取名）	不支持	不支持
调试可读性	一般，只显示数字	好，直接显示字符串	最优，编译后无枚举对象
适用场景	状态码、标志位	API 常量、配置项	性能敏感的代码

异构枚举与 const enum

TypeScript 还支持异构枚举（混合数字和字符串），但一般不推荐使用，因为它会降低代码的一致性。相比之下，const enum 是一个更实用的特性——它在编译时会被完全内联，不会生成任何 JavaScript 对象，从而减小打包体积并提升性能。

// 常量枚举 - 编译后内联，不产生额外代码
const enum Size {
  Small = 'sm',
  Medium = 'md',
  Large = 'lg',
}
// 编译后变成: let className = "btn-md";
let className = btn-${Size.Medium};

1. 定义一个 DaysOfWeek 枚举，包含周一到周日，并打印出周三对应的值
2. 创建一个 OrderStatus 字符串枚举（Pending / Processing / Shipped / Delivered），编写函数根据状态输出中文提示
3. 使用 const enum 定义一组按钮尺寸，在编译后检查生成的 JavaScript 文件
4. 定义一个 HTTP 状态码数字枚举，并编写一个函数通过状态码反向查找状态名
5. 将枚举用于一个 React 组件的 Props 类型中，限制某个属性的可选值范围