TypeScript 能手养成之旅 Day 9 物件型别-扩充型别-列举(Enum)

前言

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 开始，逐渐递增直到我们赋值小数的元素之後，整数继续递增。