Typescript 枚舉

枚舉標誌性動做是使用關鍵字 enum 來定義類型。好比

// enum.ts
enum Friends {張三, 李四, 王五};
複製代碼

// enum2.ts
enum Friends2 {張三, 李四, 王五};
console.log(Friends2[0] === '張三')
console.log(Friends2['張三'] === 0)
複製代碼

編譯後

// enum2.js
var Friends2;
(function (Friends2) {
    Friends2[Friends2["\u5F20\u4E09"] = 0] = "\u5F20\u4E09";
    Friends2[Friends2["\u674E\u56DB"] = 1] = "\u674E\u56DB";
    Friends2[Friends2["\u738B\u4E94"] = 2] = "\u738B\u4E94";
})(Friends2 || (Friends2 = {}));
;
console.log(Friends2[0] === '張三'); // true
console.log(Friends2['張三'] === 0); // true
複製代碼

可見，枚舉能夠可用下標索引獲取值，另外枚舉的 key 和 value 可反向映射。

手動賦值

// enum3.ts
enum Friends3 { 張三 = 30, 李四 = 18, 王五 };
console.log(Friends3['張三'] === 30);
console.log(Friends3['李四'] === 18);
console.log(Friends3['王五'] === 19);

enum Friends3_1 { 張三 = '30', 李四 = '18', 王五 = '9' };
enum Friends3_2 { 張三 = '30', 李四 = '18', 王五 = 9 };
enum Friends3_3 { 張三 = '30', 李四, 王五 };

// 0.0.8/enum3.ts:8:30 - error TS1061: Enum member must have initializer.
    // 8 enum Friends3_3 { 張三 = '30', 李四, 王五 };
                               ~~
// 0.0.8/enum3.ts:8:34 - error TS1061: Enum member must have initializer.
    // 8 enum Friends3_3 { 張三 = '30', 李四, 王五 };
複製代碼

編譯後

// enum3.js
var Friends3;
(function (Friends3) {
    Friends3[Friends3["\u5F20\u4E09"] = 30] = "\u5F20\u4E09";
    Friends3[Friends3["\u674E\u56DB"] = 18] = "\u674E\u56DB";
    Friends3[Friends3["\u738B\u4E94"] = 19] = "\u738B\u4E94";
})(Friends3 || (Friends3 = {}));
;
console.log(Friends3['張三'] === 30);
console.log(Friends3['李四'] === 18);
console.log(Friends3['王五'] === 19);
var Friends3_1;
(function (Friends3_1) {
    Friends3_1["\u5F20\u4E09"] = "30";
    Friends3_1["\u674E\u56DB"] = "18";
    Friends3_1["\u738B\u4E94"] = "9";
})(Friends3_1 || (Friends3_1 = {}));
;
var Friends3_2;
(function (Friends3_2) {
    Friends3_2["\u5F20\u4E09"] = "30";
    Friends3_2["\u674E\u56DB"] = "18";
    Friends3_2[Friends3_2["\u738B\u4E94"] = 9] = "\u738B\u4E94";
})(Friends3_2 || (Friends3_2 = {}));
;
var Friends3_3;
(function (Friends3_3) {
    Friends3_3["\u5F20\u4E09"] = "30";
    Friends3_3[Friends3_3["\u674E\u56DB"] = void 0] = "\u674E\u56DB";
    Friends3_3[Friends3_3["\u738B\u4E94"] = void 0] = "\u738B\u4E94";
})(Friends3_3 || (Friends3_3 = {}));
;
複製代碼

說一下

• 賦值是數字，能夠部分賦值；
• 賦值中有一個是字符串，得全部成員都賦值；

問：若是值手動賦值一個字符串怎麼辦？

// enum4.ts
enum Friends4 { 張三 = '30', 李四, 王五 };
enum Friends4_1 { 張三 = <any>'30', 李四, 王五 };
enum Friends4_2 { 張三, 李四 = <any>'30', 王五 };
enum Friends4_3 { 張三, 李四 = <any>'30', 王五 = '30' };
enum Friends4_4 { 張三, 李四, 王五 = <any>'30' };
enum Friends4_5 { 張三, 李四 = <any>'30', 王五 = <any>'30' };
enum Friends4_6 { 張三, 李四 = <any>'30', 王五 = 30 };


// 0.0.8/enum4.ts:1:28 - error TS1061: Enum member must have initializer.
    // 1 enum Friends4 { 張三 = '30', 李四, 王五 };
// 0.0.8/enum4.ts:1:32 - error TS1061: Enum member must have initializer.
    // 1 enum Friends4 { 張三 = '30', 李四, 王五 };
                                 ~~

// 0.0.8/enum4.ts:2:35 - error TS1061: Enum member must have initializer.
    // 2 enum Friends4_1 { 張三 = <any>'30', 李四, 王五 };
// 0.0.8/enum4.ts:2:39 - error TS1061: Enum member must have initializer.
    // 2 enum Friends4_1 { 張三 = <any>'30', 李四, 王五 };
                                        ~~
// 0.0.8/enum4.ts:3:39 - error TS1061: Enum member must have initializer.
    // 3 enum Friends4_2 { 張三, 李四 = <any>'30', 王五 };
                                        ~~
// 0.0.8/enum4.ts:4:28 - error TS2553: Computed values are not permitted in an enum with string valued members.
    // 4 enum Friends4_3 { 張三, 李四 = <any>'30', 王五 = '30' };
複製代碼

上面，例子說明下

• 第 1 行報錯，是由於只給第一個成員賦值字符串，其餘成員沒有賦值;
• 第 2-3 行報錯，是由於類型斷言<any> 後面還有成員賦值;
• 第 4 行報錯，是由於類型斷言<any> 後面賦值不是數字;
• 剩餘幾行沒報錯，是由於類型斷言<any> 後面的成員都賦值了（並且）;

總結

• 賦值是字符串，得所有都賦值；
• 賦值部分爲字符串，得用類型斷言，類型斷言後面不能有賦值爲字符串的成員；

深深地知道還有不少複雜的場景沒有列出來，本篇除了簡單對枚舉有個介紹外，還但願可以讓在學 Typescript 的夥伴意識到觸類旁通和自我思考的重要性（若是達到了，那說明本篇文章的價值真正體現出來了）。固然對於其餘場景，在之後的時間裏，一旦碰到仍是會更新到本篇文章裏，不斷完善和自我完善（一個合格程序員的自我休養）。

本次代碼 Github

你能夠...

上一篇：Typescript 元祖

下一篇：Typescript 類

目錄：Typescript 小書之入門篇