iT邦幫忙

2026 iThome 鐵人賽

DAY 14
0

大家好!不知不覺就到了第十四天了,沒想到自己能堅持這麼久。好啦!話不多說,今天我們要來介紹TypeScript(TS)的列舉(Enum)。


甚麼是Enum?

Enum簡單來說,就是把具有相關聯的字串或數字固定集中在一起管理,打個比方:
假如我們要處理星期,可能會有星期一、星期二……星期日這些固定選項。Enum可以把這些具有相關性的選項集中管理,並且替它們取一個明確的名稱。

Enum語法

使用enum可以建立一組具有名稱的固定選項。 如果沒有自行指定數值,數字型Enum的第一個成員預設會從 0 開始,後面的成員則會依序遞增。

//Enum範例:
enum Meat {
	Beef,
	Pork, 
	Chicken,
	Lamb
}

let ribeyeSteak = Meat.Beef;
console.log(ribeyeSteak); //輸出:0

Enum可以自訂編號嗎?

既然剛剛都說enum的預設值從0開始了,那一定會有人想列舉可不可以讓開發者自訂編號呢?當然可以

//情境1:(只定義一名成員)
enum Meat {
	Beef = 1, //當我們指定第一名成員為1時,下面的成員會接續這個值遞增
	Pork, //2
	Chicken, //3
	Lamb //4
}

//情境2:(全部成員)
//這裡以伺服器常見的錯誤代碼回報來舉例
enum HttpStatus { 
	OK = 200, 
	BadRequest = 400, 
	Unauthorized = 401, 
	NotFound = 404, 
	InternalServerError = 500 
} //每個成員都有自行指定的數值,因此不會使用自動遞增。
// 當然,如果第四位成員沒有定值的話,還是會照情境1遞增的方向走(會是402)

//情境3:(使用字串)
enum Meat {
    Beef = "BEEF",
    Pork = "PORK",
    Chicken = "CHICKEN",
    Lamb = "LAMB"
}

Enum與函式

Enum 也可以當作函式參數的型別,限制可以傳入函式的選項,避免傳入不符合預期的資料。

//enum結合函式範例:
enum Meat { 
	Beef = "BEEF", 
	Pork = "PORK", 
	Chicken = "CHICKEN", 
	Lamb = "LAMB" 
}

function order(menu: Meat): void {
	console.log(`${menu}`);
}

order(Meat.Beef); //合法
order("Beef"); //因為函式order被限制在Meat裡面的選項,此時輸入字串不合法,TS會報錯喔

使用Enum的場合

如果程式中有一組固定且具有相關性的選項,例如星期、月份、方向等,就可以考慮使用 Enum 將它們集中管理,方便管理也不會有拼錯字的問題(就算拼錯了TS也會提醒的)。

Enum優缺點

來總結一下Enum介紹到這邊的優點及缺點:

優點 缺點
可讀性高,易辨別選項含意 有些情況使用聯合型別或as const物件就能達到類似效果,不一定需要Enum。
集中固定選項,方便管理 Enum是TypeScript提供、JavaScript沒有的額外語法,編譯成JavaScript後會產生對應的程式碼。
具型別檢查,使用不存在的Enum 成員時,TS會提醒開發者。

小結

關於Enum的介紹就到這邊啦!列舉在開發時能靈活地運用,也是很方便管理選項的一個功能,希望大家能夠學到一些關於Enum的知識,我們明天見啦!


上一篇
[Day-13]型別收窄(Type Narrowing)
下一篇
[Day-15]TypeScript:Class
系列文
從零開始學習TypeScript:菜鳥的入門介紹與概覽22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言