为何TypeScript编译器会将枚举编译为函数形式？

TypeScript编译器会将枚举编译为函数，且编译方式看似特殊，这种做法有何优势？

说明：

• 本问题非主观臆断类，寻求客观可验证的理由，说明编译后的JavaScript代码相比简易实现的优势，不涉及设计者的思考过程。
• 本问题非重复提问，与以下两个问题不重复：
  • 某问题仅询问编译后的JavaScript代码内容，而非为何采用该编译方式。
  • 某问题聚焦Enum[Enum["None"] = 0] = "None"这类双向赋值表达式，而本问题关注编译代码的函数特性。

假设在TypeScript中定义如下枚举：

enum Color
{
    Red,
    Green,
    Blue
}

它会被编译为以下立即执行函数表达式（IIFE）：

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));

为何需要使用IIFE？此外，既然Color初始应为undefined（假值），Color || (Color = {})似乎必然会执行Color = {}，这个表达式的意义何在？

我认为等效的更简单实现如下：

var Color = {}; // 为什么不用let？
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 1] = "Green";
Color[Color["Blue"] = 2] = "Blue";

这种实现方式存在什么问题？

回答 #

1. IIFE的核心作用：支持枚举合并声明 #

TypeScript允许在不同代码位置多次声明同一个枚举，比如：

enum Color { Red }
enum Color { Green, Blue }

编译后会生成两段独立的IIFE代码：

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
})(Color || (Color = {}));

var Color;
(function (Color) {
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));

第一次执行时，Color是undefined，会触发Color = {}创建初始对象；第二次执行时，Color已存在，直接传入已有对象进行扩展，完美实现枚举成员的合并。如果用var Color = {}的简易写法，第二次声明会直接覆盖之前的对象，导致第一次声明的Red成员丢失。

2. Color || (Color = {})的意义：兼容全局已有同名变量 #

如果在TypeScript代码执行前，全局环境中已经存在一个Color变量（比如其他脚本提前定义的），这个表达式会直接复用已有变量，而非重新创建新对象，避免覆盖原有值。这保证了枚举编译后的代码能和其他脚本友好共存。

3. 为何用var而非let：兼容低版本环境 #

TypeScript默认编译目标是ES3/ES5，而let是ES6才引入的语法。为了让编译后的代码能在低版本浏览器或不支持ES6的环境中正常运行，编译器默认使用var声明变量。如果将编译目标设置为ES6及以上，枚举的编译结果就会自动换成let：

let Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));

4. 简易实现的缺陷 #

你的简易写法存在两个关键问题：

• 无法支持枚举的合并声明，多次声明会覆盖原有枚举。
• 不能兼容全局已有同名变量的场景，会直接覆盖全局变量，引发潜在冲突。

内容的提问来源于stack exchange，提问作者Michael Haddad