字符串枚举(String Enums)

ts v2.4 支持字符串枚举,即枚举的的成员可以是字符串类型，以前只能是数值类型。

enum MediaTypes {
    JSON = 'application/json',
    XML = 'application/xml'
}

# 使用
fetch("https://example.com/api/endpoint", {
    headers: {
        Accept: MediaTypes.JSON
    }
}).then(response => {
    // ...
});

转换ES3/5代码

var MediaTypes;
(function (MediaTypes) {
    MediaTypes["JSON"] = "application/json";
    MediaTypes["XML"] = "application/xml";
})(MediaTypes || (MediaTypes = {}));
fetch("https://example.com/api/endpoint", {
    headers: {
        Accept: MediaTypes.JSON  // 注意此处没有被直接替代成 "application/json"
    }
}).then(function (response) {
    // ...
});

注意：

字符串值枚举成员不能反向映射(reverse mapping)

即：

MediaTypes["JSON"];              // "application/json"
MediaTypes["application/json"];  // undefined

MediaTypes["XML"];               // "application/xml"
MediaTypes["application/xml"];   // undefined

普通枚举(数值类型枚举)

enum DefaultPorts {
    HTTP = 80,
    HTTPS = 443
}

编译：

var DefaultPorts;
(function (DefaultPorts) {
    DefaultPorts[DefaultPorts["HTTP"] = 80] = "HTTP";
    DefaultPorts[DefaultPorts["HTTPS"] = 443] = "HTTPS";
})(DefaultPorts || (DefaultPorts = {}));

存在反向映射

DefaultPorts["HTTP"];   // 80
DefaultPorts[80];       // "HTTP"

DefaultPorts["HTTPS"];  // 443
DefaultPorts[443];      // "HTTPS"

使用 const enum 产生内联成员

# 使用const enum
const enum MediaTypes {
    JSON = 'application/json',
    XML = 'application/xml'
}

# 示例
fetch("https://example.com/api/endpoint", {
    headers: {
        Accept: MediaTypes.JSON
    }
}).then(response => {
    // ...
});

编译：

fetch("https://example.com/api/endpoint", {
    headers: {
        Accept: "application/json" /* JSON */   # 枚举值内联，直接显示出来
    }
}).then(function (response) {
    // ...
});

这样的好处是可以节省一点代码

preserveConstEnums tsconfig选项

有时候我们希望使用 const enums 保留这种映射,可以在 tsconfig.json 中设置

# tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "preserveConstEnums": true
    }
}

# index.ts
const enum MediaTypes {
    JSON = 'application/json',
    XML = 'application/xml'
}

# 示例
fetch("https://example.com/api/endpoint", {
    headers: {
        Accept: MediaTypes.JSON
    }
}).then(response => {
    // ...
});

编译

# 下面是保留的映射代码
var MediaTypes;
(function (MediaTypes) {
    MediaTypes["JSON"] = "application/json";
    MediaTypes["XML"] = "application/xml";
})(MediaTypes || (MediaTypes = {}));

fetch("https://example.com/api/endpoint", {
    headers: {
        Accept: "application/json" /* JSON */ # 依然是内联
    }
}).then(function (response) {
    // ...
});

原文章