TypeScript性能优化启示录：联合类型如何超越枚举？

郑子铭

发布于 2025-06-07 19:43:43

1280

文章被收录于专栏：DotNet NB && CloudNativeDotNet NB && CloudNative

枚举的陷阱与觉醒

我曾经像大多数开发者一样，在TypeScript中默认使用枚举：

enum BoxType {
  PRIMARY = "primary",
  INFO = "info",
  ERROR = "error"
}

const alertBoxType: BoxType = BoxType.PRIMARY;
console.log(alertBoxType); // "primary"

直到某次代码评审收到灵魂拷问：

"为什么不用联合类型？性能更好！"

这让我开始反思：难道这些年我错用了枚举？

编译后的真相

当查看编译后的JavaScript代码时，我震惊了：

var BoxType;
(function(BoxType) {
  BoxType["PRIMARY"] = "primary";
  BoxType["INFO"] = "info";
  BoxType["ERROR"] = "error";
})(BoxType || (BoxType = {}));

const alertBoxType = BoxType.PRIMARY;
console.log(alertBoxType); // "primary"

原来枚举会生成完整的运行时对象！这意味着： • 📦 增加打包体积：额外生成对象代码 • ⏳ 降低执行效率：需要对象属性查找

联合类型的革命

让我们用联合类型实现相同功能：

type BoxType = "primary" | "info" | "error";

const alertBoxType: BoxType = "primary";
console.log(alertBoxType); // "primary"

编译后的干净输出：

"use strict";
const alertBoxType = "primary";
console.log(alertBoxType); // "primary"

性能对比实验

在JsBench进行的执行效率测试显示：

联合类型耗时：0.1ms
枚举耗时：0.4ms

枚举的生存空间

虽然联合类型更优，但枚举仍有用武之地：

反向查找能力

enum HttpStatus {
  OK = ,
  NOT_FOUND = ,
  INTERNAL_SERVER = ,
}

console.log(HttpStatus[]); // "OK" // 联合类型无法实现

数值映射场景

enum UserRole {
Admin = ,
Editor = ,
Viewer = ,
}

const getUserRole = (roleId: number): string => {
returnUserRole[roleId] || "Unknown";
};

console.log(getUserRole()); // "Admin"