這一篇要來介紹Typescript的實用功能 - 列舉(Enum)

什麼是列舉(Enum)

列舉可以轉換一組備有限範圍的資料，比如說日期、郵遞區號、星期等等。
列舉可以讓我們定義有名字意義的常數，讓我們很可以使用名字去對應那些常數，使那些常數的意義可以很輕易對應，也可以更容易維護

列舉使用方法

定義一個星期轉換的列舉

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

列舉和陣列一樣，數字從0開始

console.log(Days.Sun) // 0
console.log(Days.Fri) // 5

列舉自動賦值

列舉也不一定要從0開始，可以賦予其中一個值，之後的屬性會自動累加1

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

定義星期一Mon等於1，之後其他的星期就會自動累加

console.log(Days.Mon) // 1
console.log(Days.Sat) // 6

列舉手動賦值

如果不想讓值從0開始，往後的值也沒有累加的關係，可以自行手動賦值
例如以下是台北市的郵遞區號:

100    中正區
103    大同區
104    中山區
105    松山區
106    大安區
108    萬華區
110    信義區
111    士林區
112    北投區
114    內湖區
115    南港區
116    文山區

假設有一個表單必須填寫郵遞區號，在填寫表單的時候會有兩個問題:

  1. 使用者要看到的是地區名稱，不是郵遞區號
  2. 伺服器要的資料是郵遞區號，而不是地區名稱
    意思就是說:使用者看到的和伺服器要的是不一樣的東西，但是彼此之間有對應的關係，這時候就可以使用列舉來輕鬆轉換資料了。

列舉使用 enum 關鍵字來定義

enum TaipeiZip {
    '中正區' = 100,
    '大同區' = 103,
    '中山區' = 104,
    '松山區' = 105,
    '大安區' = 106,
    '萬華區' = 108,
    '信義區' = 110,
    '士林區' = 111,
    '北投區' = 112,
    '內湖區' = 114,
    '南港區' = 115,
    '文山區' = 116
};

定義完列舉的內容之後，就可以來使用列舉，測試一下
輸入地區後會輸出郵遞區號

console.log(TaipeiZip.中山區) // 104
console.log(TaipeiZip.文山區) // 116

當然也可以使用郵遞區號轉換成地區

console.log(TaipeiZip[TaipeiZip.中正區]) // 中正區
console.log(TaipeiZip[TaipeiZip.內湖區]) // 內湖區

小結

今天學到的事情有：

  • 什麼是列舉
  • 如何使用列舉
  • 列舉自動賦值
  • 列舉手動賦值

Typescript在此告一段落。明天將進入新的章節 - Nestjs