从其他文件导入ENUM时TypeScript的异常行为

问题重现 #

在不同文件定义两个枚举：

// Variant.ts
export enum Variant {
  LINK = "link",
  LINK_OUTLINE = "linkOutline",
  ICON_ONLY = "iconOnly",
}

// ButtonEditType.ts - 基于上述枚举定义
export enum ButtonEditType {
  ICON_ONLY = Variant.ICON_ONLY,
  ICON_TEXT = Variant.LINK,
  ICON_TEXT_OUTLINE = Variant.LINK_OUTLINE,
}

// 导入后打印枚举
console.log(ButtonEditType);

预期输出：

{
  "ICON_ONLY": "iconOnly",
  "ICON_TEXT": "link",
  "ICON_TEXT_OUTLINE": "linkOutline"
}

实际输出（包含反向映射）：

{
    "ICON_ONLY": "iconOnly",
    "iconOnly": "ICON_ONLY",
    "ICON_TEXT": "link",
    "link": "ICON_TEXT",
    "ICON_TEXT_OUTLINE": "linkOutline",
    "linkOutline": "ICON_TEXT_OUTLINE"
}

原因解析 #

TypeScript对字符串枚举的反向映射生成逻辑，取决于枚举成员的值是否为编译期可确定的常量字面量：

• 当枚举成员的值是直接写的字符串字面量时，编译器会将其标记为「常量成员」，字符串枚举的常量成员不会生成反向映射。
• 当枚举成员的值是跨模块引用的外部枚举成员、或运行时计算的表达式时，编译器无法在编译阶段确定其具体字面量值，会将其标记为「计算成员」。对于这类成员，即使是字符串枚举，编译器也会生成反向映射，以支持运行时的反向查找能力。

跨文件引用时，ButtonEditType的成员值来自另一个模块的Variant枚举，编译器处理ButtonEditType.ts时无法直接解析到Variant成员的字面量，只能将这些值视为计算值，因此触发了反向映射的生成。

而将两个枚举放在同一文件时，编译器能直接获取Variant成员的字面量，会把ButtonEditType的成员识别为常量成员，不会生成反向映射；改成纯字符串字面量时，成员本身就是常量成员，同样不会生成反向映射。

内容的提问来源于stack exchange，提问作者Tushar Walzade