《二》大話 Typescript 枚舉

前言: 本文章爲 TypeScript 系列文章. 旨在利用碎片時間快速入門 Typescript. 或從新溫故 Typescript 查漏補缺.在官方 api 的基礎上, 加上一些平常使用的感想. 若是感興趣的話~ 歡迎關注, 後續持續推出文章.

文章列表:

• 《一》大話 TypeScript 基本類型
• 《二》大話 Typescript 枚舉
• 《三》大話 Typescript 接口
• ……

目錄結構

• 數字枚舉
• 字符串枚舉
• 異構枚舉
• 常量枚舉
• 枚舉成員
• 枚舉合併
• 外部枚舉
• 總結

數字枚舉

若無默認值, 默認從0開始, 依次遞增

enum learn { 
    math,
    language,
    sports
}
console.log(learn.math) // 0 
console.log(learn.language) // 1
console.log(learn.sports) // 2
複製代碼

指定初始值, 依次遞增

enum learn { 
    math = 2,
    language,
    sports
}
console.log(learn.math) // 2 
console.log(learn.language) // 3
console.log(learn.sports) // 4
複製代碼

咱們在控制檯輸出一下值, 發現對象以下:

既能夠用枚舉的 value 來索引, 又能夠用枚舉的 key 值來索引.

接下來咱們看一下 typescript 枚舉的實現原理

var learn;
(function (learn) {
    learn[learn["math"] = 2] = "math";
    learn[learn["language"] = 3] = "language";
    learn[learn["sports"] = 4] = "sports";
})(learn || (learn = {}));
複製代碼

learn["math"] = 2 // 將key值和 value 對應 learn[learn["math"] = 2] = "math" //此時將 value 做爲 索引, key 做爲 value

小tip: 任何一個語法均可以放在官網下看它的實現原理 官網

字符串枚舉

enum learn { 
    Success = '成功!',
    Fail= '失敗'
}
複製代碼

一樣, 看一下實現的原理

var learn;
(function (learn) {
    learn[learn["math"] = 0] = "math";
    learn["Success"] = "\u6210\u529F!";
})(learn || (learn = {}));
複製代碼

對比數字枚舉, 少了 反向映射, 就是普通的賦值. 只有 key 和 值. 不能夠經過 value 索引 key 值.

字符串的枚舉, 只要有一個是字符串, 全部的成員都得賦值

enum learn {
   Success = '成功!',
   Fail //報錯
}
複製代碼

異構枚舉

混用字符串枚舉和數字枚舉 , 不建議使用

enum learn {
    math,
    Success = '成功!',
}
複製代碼

常量枚舉

此處高度注意, 不少剛接觸 typescript 的總會犯這個錯, 老是習慣性給 enum 添加一個 const . 以下:

const enum E {
   X, Y, Z
}

function f(obj: { X: number }) {
   return obj.X;
}

f(E); //報錯
複製代碼

咱們看看編譯後的代碼

function f(obj) {
    return obj.X;
}
f(E); //報錯
複製代碼

緣由: 用 const 聲明的 enum , 在編譯階段會被刪除.

const enum learn { 
    math,
    language,
    sports
}
複製代碼

在編譯以後, 空空如也:

當咱們不須要一個對象, 但須要值的話, 就可使用這個方法 , 能夠減小運行時的代碼 ,以下:

枚舉成員

1. 成員是隻讀的, 不能夠修改

enum learn { 
    math = 2,
    language,
    sports
}
learn.math = 2  // 報錯
複製代碼

2. 枚舉成員能夠是 常量, 也能夠是變量

enum learn {
    a,
    b = 2,
    c = 1 + 3, //表達式
    e = '123'.length
}
複製代碼

3. 枚舉是在運行時真正存在的對象, 能夠傳遞給對象使用

enum E {
    X, Y, Z
}
function f(obj: { X: number }) {
    return obj.X;
}
f(E); //1
複製代碼

枚舉合併

能夠分開聲明枚舉, 結果會自動合併. 實際場景仍是推薦寫在一塊兒, 不推薦.

總結

本節深刻理解了枚舉類型. 瞭解了經常使用的枚舉以及坑出沒. 下一節咱們將講解Typescript 接口, 歡迎關注 ,長期連載

最後

• 歡迎加我微信(A18814127),拉你進技術羣，長期交流學習
• 歡迎關注「前端加加」,認真學前端，作個有專業的技術人