TypeScript 官方宣布弃用 Enum？Enum 何罪之有？从零基础到精通，收藏这篇就够了！

最新推荐文章于 2025-06-08 17:36:45 发布

leah126

最新推荐文章于 2025-06-08 17:36:45 发布

阅读量1.1k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： python 渗透测试大模型文章标签： typescript javascript 前端

本文链接：https://blog.youkuaiyun.com/leah126/article/details/146405722

渗透测试同时被 3 个专栏收录

1079 篇文章

订阅专栏

大模型

408 篇文章

订阅专栏

python

93 篇文章

订阅专栏

.markdown-body pre,.markdown-body pre>code.hljs{background:#333;color:#fff}.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-bullet,.hljs-string{color:#a2fca2}.hljs-attribute,.hljs-built_in,.hljs-builtin-name,.hljs-quote,.hljs-section,.hljs-title,.hljs-type{color:#ffa}.hljs-bullet,.hljs-number,.hljs-symbol{color:#d36363}.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-deletion{color:#888}.hljs-link,.hljs-regexp{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background-color:#fc9b9b;color:#333}.hljs-addition{background-color:#a2fca2;color:#333}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}

1. 官方真的不推荐 Enum 了吗？

1.1 事情的起因

起因是看到科技爱好者周刊（第 340 期）里面推荐了一篇文章，说是官方不再推荐使用 enum 语法，原文链接在 An ode to TypeScript enums，大致是说 TS 新出了一个 --erasableSyntaxOnly 配置，只允许使用可擦除语法，但是 enum 不可擦除，因此推断官方已不再推荐使用 enum 了。官方并没有直接表达不推荐使用，那官方为什么要出这个配置项呢？

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.2 什么是可擦除语法

就在上周，TypeScript 发布了 5.8 版本，其中有一个改动是添加了 --erasableSyntaxOnly 配置选项，开启后仅允许使用可擦除语法，否则会报错。enum 就是一个不可擦除语法，开启 erasableSyntaxOnly 配置后，使用 enum 会报错。

例如，如果在 tsconfig 文件中配置 "erasableSyntaxOnly": true（只允许可擦除语法），此时使用不可擦除语法，将会得到报错：外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

可擦除语法就是可以直接去掉的、仅在编译时存在、不会生成额外运行时代码的语法，例如 type，interface。不可擦除语法就是不能直接去掉的、需要编译为JS且会生成额外运行时代码的语法，例如 enum，namesapce(with runtime code)。具体举例如下：

可擦除语法，不生成额外运行时代码，比如 type、let n: number、interface、as number 等：外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

不可擦除语法，生成额外运行时代码，比如 enum、namespace（具有运行时行为的）、类属性参数构造语法糖（Class Parameter properties）等：

// 枚举类型
enum METHOD {
  ADD = 'add'
}

// 类属性参数构造
class A {
  constructor(public x: number) {}
}
let a: number = 1
console.log(a)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

需要注意，具有运行时行为的 namespace 才属于不可擦除语法。

// 不可擦除，具有运行时逻辑
namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

// 可擦除，仅用于类型声明，不包含任何运行时逻辑
namespace Shapes {
  export interface Rectangle {
    width: number;
    height: number;
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.3 TS 官方为什么要出 erasableSyntaxOnly？

官方既然没有直接表达不推荐 enum，那为什么要出 erasableSyntaxOnly 配置来排除 enum 呢？

我找到了 TS 官方文档（The --erasableSyntaxOnly Option）说明：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

大致意思是说之前 Node 新版本中支持了执行 TS 代码的能力，可以直接运行包含可擦除语法的 TypeScript 文件。Node 将用空格替换 TypeScript 语法，并且不执行类型检查。总结下来就是：

在 Node 22 版本：

需要配置 --experimental-transform-types 执行支持 TS 文件
要禁用 Node 这种特性，使用参数 --no-experimental-strip-types

在 Node 23.6.0 版本：

默认支持直接运行可擦除语法的 TS 文件，删除参数 --no-experimental-strip-types
对于不可擦除语法，使用参数 --experimental-transform-types

综上所述，TS 官方为了配合 Node.js 这次改动（即默认允许直接执行不可擦除语法的 TS 代码），才添加了一个配置项 erasableSyntaxOnly，只允许可擦除语法。

2. Enum 的三大罪行

自 Enum 从诞生以来，它一直是前端界最具争议的特性之一，许多前端开发者乃至不少大佬都对其颇有微词，纷纷发起了 DO NOT USE TypeScript Enum 的吐槽。那么enum 真的有那么难用吗？我认为是的，这玩意坑还挺多的，甲级战犯 Enum，出列！

2.1 枚举默认值

enum 默认的枚举值从 0 开始，这还不是最关键的，你传入了默认枚举值时，居然是合法的，这无形之中带来了类型安全问题。

enum METHOD {
    ADD
}

function doAction(method: METHOD) {
  // some code
}

doAction(METHOD.ADD) // ✅ 可以
doAction(0) // ✅ 可以

2.2 不支持枚举值字面量

还有一种场景，我要求既可以传入枚举类型，又要求传入枚举值字面量，如下所示，但是他又不合法了？（有人说你定义传枚举类型就要传相应的枚举，这没问题，但是上面提到的问题又是怎么回事呢？这何尝不是 Enum 的双标？）

enum METHOD {
    ADD = 'add'
}

function doAction(method: METHOD) {
  // some code
}

doAction(METHOD.ADD) // ✅ 可以
doAction('add') // ❌ 不行

2.3 增加运行时开销

TypeScript 的 enum 在编译后会生成额外的 JavaScript 双向映射数据，这会增加运行时的开销。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. Enum 的替代方案

众所周知，TS 一大特性是类型变换，我们可以通过类型操作组合不同类型来达到目标类型，又称为类型体操。下面的四种解决方案，可以根据实际需求来选择。

3.1 `const enum`

const enum 是解决产生额外生成的代码和额外的间接成本有效且快捷的方法，但不推荐使用。

const enum 由于编译时内联带来了性能优化，但在 .d.ts 文件、isolatedModules 兼容性、版本不匹配及运行时缺少 .js 文件等场景下存在隐藏陷阱，可能导致难以发现的 bug。详见官方说明：const-enum-pitfalls

const enum METHOD {
  ADD = 'add',
  DELETE = 'delete',
  UPDATE = 'update',
  QUERY = 'query',
}

function doAction(method: METHOD) {
    // some code
}

doAction(METHOD.ADD) // ✅ 可行
doAction('delete') // ❌ 不行

const enum 解析后的代码中引用 enum 的地方将直接被替换为对应的枚举值：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2 模板字面量类型

将枚举类型包装为模板字面量类型（Template Literal Types），从而即支持枚举类型，又支持枚举值字面量，但是没有解决运行时开销问题。

enum METHOD {
  ADD = 'add',
  DELETE = 'delete',
  UPDATE = 'update',
  QUERY = 'query',
}

type METHOD_STRING = `${METHOD}`

function doAction(method: METHOD_STRING) {
    // some code
}

doAction(METHOD.ADD) // ✅ 可行
doAction('delete') // ✅ 可行
doAction('remove') // ❌ 不行

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.3 联合类型（Union Types）

使用联合类型，引用时可匹配的值限定为指定的枚举值了，但同时也没有一个地方可以统一维护枚举值，如果一旦枚举值有调整，其他地方都需要改。

type METHOD =
  | 'add'
  /**
   * @deprecated 不再支持删除
   */
  | 'delete'
  | 'update'
  | 'query'

function doAction(method: METHOD) {
    // some code
}

doAction('delete') // ✅ 可行，没有 TSDoc 提示
doAction('remove') // ❌ 不行

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.4 类型字面量 + as const（推荐）

类型字面量就是一个对象，将一个对象断言（Type Assertion）为一个 const，此时这个对象的类型就是对象字面量类型，然后通过类型变换，达到即可以传入枚举值，又可以传入枚举类型的目的。

const METHOD = {
  ADD:'add',
  /**
  * @deprecated 不再支持删除
  */
  DELETE:'delete',
  UPDATE: 'update',
  QUERY: 'query'
} as const

type METHOD_TYPE = typeof METHOD[keyof typeof METHOD]

function doAction(method: METHOD_TYPE) {
  // some code
}

doAction(METHOD.DELETE) // ✅ 可行，有 TSDoc 提示
doAction('delete') // ✅ 可行
doAction('remove') // ❌ 不行

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.5 Class 类静态属性自定义实现

还有一种方法，参考了 @Hamm 提供的方法，即利用 TS 面向对象的特性，自定义实现一个枚举类，实际上这很类似于后端定义枚举的一般方式。这种方式具有很好的扩展性，自定义程度更高。

定义枚举基类

/**
 * 枚举基类
 */
export default class EnumBase {
  /**
   * 枚举值
   */
  private value!: string

  /**
   * 枚举描述
   */
  private label!: string

  /**
   * 记录枚举
   */
  private static valueMap: Map<string, EnumBase> = new Map();

  /**
   * 构造函数
   * @param value 枚举值
   * @param label 枚举描述
   */
  public constructor(value: string, label: string) {
    this.value = value
    this.label = label
    const cls = this.constructor as typeof EnumBase
    if (!cls.valueMap.has(value)) {
      cls.valueMap.set(value, this)
    }
  }

  /**
   * 获取枚举值
   * @param value 
   * @returns 
   */
  public getValue(): string | null {
    return this.value
  }

  /**
   * 获取枚举描述
   * @param value 
   * @returns 
   */
  public getLabel(): string | null {
    return this.label
  }

  /**
   * 根据枚举值转换为枚举
   * @param this 
   * @param value 
   * @returns 
   */
  static convert<E extends EnumBase>(this: new(...args: any[]) => E, value: string): E | null {
    return (this as any).valueMap.get(value) || null
  }
}

继承实现具体的枚举（可根据需要扩展）

/**
 * 审核状态
 */
export class ENApproveState extends EnumBase {
  /**
   * 未审核
   */
  static readonly NOTAPPROVED = new ENApproveState('1', '未审核')
  /**
   * 已审核
   */
  static readonly APPROVED = new ENApproveState('2', '已审核')
  /**
   * 审核失败
   */
  static readonly FAILAPPROVE = new ENApproveState('3', '审核失败')
  /***
   * 审核中
   */
  static readonly APPROVING = new ENApproveState('4', '审核中')
}

使用

test('ENCancelState.NOCANCEL equal 1', () => {
  expect(ENApproveState.NOTAPPROVED.getValue()).toBe('1')
  expect(ENApproveState.APPROVING.getValue()).toBe('4')
  expect(ENApproveState.FAILAPPROVE.getLabel()).toBe('审核失败')
  expect(ENApproveState.convert('2')).toBe(ENApproveState.APPROVED)
  expect(ENApproveState.convert('99')).toBe(null)
})

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. 总结

TS 可擦除语法 是指 type、interface、n:number 等可以直接去掉的、仅在编译时存在、不会生成额外运行时代码的语法
TS 不可擦除语法 是指 enum、constructor(public x: number) {} 等不可直接去除且会生成额外运行时代码的语法
Node.js 23.6.0 版本开始 默认支持直接执行可擦除语法 的 TS 文件
enum 的替代方案有多种，取决于实际需求。用字面量类型 + as const 是比较常用的一种方案。