javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > TypeScript Enum类型

TypeScript Enum类型入门

作者：如果你好

Enum是TypeScript提供的自定义类型,用来定义一组有名字的常量集合, 本文就来介绍一下Enum两种常用类型（数字枚举和字符串枚举）以及高级小技巧,具有一定参考价值,感兴趣的可以了解一下

一、什么是 Enum？

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

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

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

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

枚举的核心好处：

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

二、Enum 的两种常用类型

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

1. 数字枚举

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

基础用法

// 显式赋值：每个成员指定数字
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

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

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

enum Weekday {
  Monday = 1
}

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

2. 字符串枚举

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

基础用法

// 每个成员都要写字符串值
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，就是常量枚举。它的特点是：编译后不会生成额外代码，直接把值「嵌入」到使用的地方，体积更小、速度更快。

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

// 使用
const myColor = Color.Green;

编译后对比（看懂就行）

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

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

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

场景 1：管理接口状态码

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

// 定义状态码枚举
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 里的下拉框选项，用枚举定义，避免硬编码。

// 性别枚举
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>

到此这篇关于TypeScript Enum类型入门 的文章就介绍到这了,更多相关TypeScript Enum类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文