前言

Enum 是 TypeScript 新增的語法，也被稱做 列舉 或 枚舉。
在實務上，我們常用來做狀態判斷，因為管理相同系列的常數非常適宜。

基本用法

enum Days {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat
};

上面的範例會不會覺得很熟悉呢？ 是不是和 Object 很像呢？ 其實用法也是很類似，只是 Enum 和花括號之間不需要等於，而裡面的變數可以說是常數，因為 Enum 裡面的值是不允許修改的，就因為這樣的特性，Enum 可以說很安全，可以盡可能排除變數不明改變，導致程式整個壞掉的風險。

接下來進行編譯後會是：

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

其實第一次看到並不是那麼好懂，不過先從整體結構來看，看到一個 function 被原括號包住，然後又跟隨著另一個圓括號且裡面帶進參數，是不是有看出什麼端倪呢？沒錯，這就是立即函式(IIFE)。

不過看是看出來了，但是如何更進一步得知真實情況會是如何呢？我們來試著印出來看看，如下：

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days)
console.log(Days[0])
console.log(Days['Sun'])

console.log(Days)
 => {
  '0': 'Sun',
  '1': 'Mon',
  '2': 'Tue',
  '3': 'Wed',
  '4': 'Thu',
  '5': 'Fri',
  '6': 'Sat',
  Sun: 0,
  Mon: 1,
  Tue: 2,
  Wed: 3,
  Thu: 4,
  Fri: 5,
  Sat: 6
}

console.log(Days[0]) => Sun
console.log(Days['Sun']) => 0

從上方我們可以得知屬性之間相互對應，我們可以使用 Days[0] 拿到 Sun ，也可以使用 Days['Sun'] 拿到 0。

不過在一切都感覺開始合理的時候，突然發現 0 到 6 是什麼時候定義的呢？其實原本預設就會以遞增方式由 0 開始定義。

接者我們來試試賦值:

狀況一： 將第一個元素賦值大於 0 的數字

enum Days {Sun=10, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days)
console.log(Days[10])
console.log(Days['Sun'])

console.log(Days) => {
  '10': 'Sun',
  '11': 'Mon',
  '12': 'Tue',
  '13': 'Wed',
  '14': 'Thu',
  '15': 'Fri',
  '16': 'Sat',
  Sun: 10,
  Mon: 11,
  Tue: 12,
  Wed: 13,
  Thu: 14,
  Fri: 15,
  Sat: 16
}
console.log(Days[10]) => Sun
console.log(Days['Sun']) => 10

狀況二： 將某個元素賦值負數

enum Days {Sun, Mon=-1, Tue, Wed, Thu, Fri, Sat};

console.log(Days)
console.log(Days[0])
console.log(Days['Sun'])

console.log(Days) => {
  '0': 'Tue',
  '1': 'Wed',
  '2': 'Thu',
  '3': 'Fri',
  '4': 'Sat',
  Sun: 0,
  Mon: -1,
  '-1': 'Mon',
  Tue: 0,
  Wed: 1,
  Thu: 2,
  Fri: 3,
  Sat: 4
}
console.log(Days[0]) => Tue
console.log(Days['Sun']) => 0
console.log(Days['Tue']) => 0

這邊我們可以看到好像有點亂套了，不過還是可以看出 TypeScript 還是有遵循規則，只是 0 出現了兩次，而卻沒報錯，所以我們會盡量避免這樣的事情發生，使用時盡量小心。

狀況三： 將某個元素賦值小數

enum Days {Sun, Mon=1.7, Tue, Wed, Thu, Fri, Sat};

console.log(Days)
console.log(Days[0])
console.log(Days['Sun'])

{
  '0': 'Sun',
  '1': 'Mon',
  Sun: 0,
  Mon: 1,
  Tue: 1.7,
  '1.7': 'Tue',
  Wed: 2.7,
  '2.7': 'Wed',
  Thu: 3.7,
  '3.7': 'Thu',
  Fri: 4.7,
  '4.7': 'Fri',
  Sat: 5.7,
  '5.7': 'Sat'
}
Wed
0
console.log(Days[2.7]) => Tue
console.log(Days['Sun']) => 0

我們在第二個元素賦值小數，可以發現第一個元素一樣從 0 開始，逐漸遞增直到我們賦值小數的元素之後，整數繼續遞增。

結語

今天介紹了 Enum 基本用法，其餘用法將於明天繼續來跟大家一起了解。