iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0

這一篇要來介紹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


上一篇
[DAY-20] Typescript 介紹-型別(Type)與介面(Interface)
下一篇
[DAY-22] 建立 Nestjs 環境與專案
系列文
Angular 與 Nestjs 共舞 - 從前端跨出到全端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言