TypeScript - Enums：初學者的指南

你好，未來的程式設計師們！今天，我們將要深入 TypeScript Enums 的奇妙世界。如果你從未寫過程式碼，別擔心——我將成為你這次旅程中的友好導遊，就像我過去幾年來為無數學生所做的那樣。那麼，我們開始吧！

TypeScript - Enums

Enums 是什麼？

在我們深入了解 Enums 的不同類型之前，讓我們先來了解它們是什麼。想像你正在整理你的衣櫥。你可能會為你的衣服設置不同的分類：襯衫、褲子、鞋子等等。TypeScript 中的 Enums 就像這些分類——它們幫助我們將相關的值組織在一起，並為它們賦予有意義的名稱。

數字 Enums

數字 Enums 是 TypeScript 中最常見的 Enums 類型。它們就像為你喜歡的超級英雄分配數字。

enum Superheroes {
Superman,
Batman,
WonderWoman,
Flash
}

console.log(Superheroes.Superman);  // 輸出: 0
console.log(Superheroes.Batman);    // 輸出: 1
console.log(Superheroes.WonderWoman);  // 輸出: 2
console.log(Superheroes.Flash);     // 輸出: 3

在這個例子中，TypeScript 自動從 0 開始分配數字。Superman 獲得 0，Batman 獲得 1，依此类推。這就像它們在排隊拍合照，我們根據它們的位置給它們分配號碼！

但如果我們想從不同的數字開始呢？沒問題！我們也可以做到：

enum Villains {
Joker = 1,
LexLuthor,
Cheetah,
ReverseFlash
}

console.log(Villains.Joker);        // 輸出: 1
console.log(Villains.LexLuthor);    // 輸出: 2
console.log(Villains.Cheetah);      // 輸出: 3
console.log(Villains.ReverseFlash); // 輸出: 4

在這裡，我們告訴 TypeScript 從 1 開始計數，然後它自動為其餘的成員繼續計數。

字符串 Enums

現在，如果你不喜歡數字，而偏好文字，那麼字符串 Enums 會派上用場。它們就像為你的寵物取綽號！

enum PetNames {
Dog = "BUDDY",
Cat = "WHISKERS",
Fish = "BUBBLES",
Bird = "TWEETY"
}

console.log(PetNames.Dog);   // 輸出: "BUDDY"
console.log(PetNames.Cat);   // 輸出: "WHISKERS"
console.log(PetNames.Fish);  // 輸出: "BUBBLES"
console.log(PetNames.Bird);  // 輸出: "TWEETY"

使用字符串 Enums 時，我們必須為每個成員賦予一個值。這就像確保你的每個寵物都知道它們的特別綽號！

非均質 Enums

有時候，生活不僅僅是數字或字符串——它是多種東西的混合！非均質 Enums 就像一盒各種巧克力——你會得到一點點所有的東西。

enum MixedBag {
Number = 1,
String = "STRING",
AnotherNumber = 2
}

console.log(MixedBag.Number);        // 輸出: 1
console.log(MixedBag.String);        // 輸出: "STRING"
console.log(MixedBag.AnotherNumber); // 輸出: 2

雖然這是可能的，但通常建議在 Enum 中只使用全部數字或全部字符串，以保持一致性。

在運行時使用 Enums

關於 Enums 的一個很酷的事情是它們在運行時存在。這意味著你可以像使用任何其他對象一樣在代碼中使用它們！

enum Fruits {
Apple,
Banana,
Orange
}

function getFruitName(fruit: Fruits): string {
return Fruits[fruit];
}

console.log(getFruitName(Fruits.Apple));  // 輸出: "Apple"
console.log(getFruitName(Fruits.Banana)); // 輸出: "Banana"

在這裡，我們將 Enum 用作普通的 JavaScript 對象。這就像擁有一個神奇的字典，可以將數字翻譯成水果名稱！

在編譯時使用 Enums

Enums 在編譯時也表現出色。它們幫助 TypeScript 在代碼甚至還未運行之前就捕獲錯誤！

enum DaysOfWeek {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
}

let day: DaysOfWeek = DaysOfWeek.Monday;
day = DaysOfWeek.Friday;  // 沒問題

// day = "Monday";  // 錯誤：類型 '"Monday"' 不能賦值給類型 'DaysOfWeek'。

如果你嘗試賦予一個不是 Enum 一部分的值，TypeScript 將會給你一個錯誤。這就像在俱樂部有一個嚴格的保鏢，只讓星期中的日子進入！

環境 Enums

環境 Enums 有點特殊。它們在你告訴 TypeScript 它們在代碼的某個地方存在或在你使用的庫中存在時使用。

declare enum ExternalEnum {
A = 1,
B,
C = 2
}

declare 關鍵字就像說，“嘿 TypeScript，相信我，這個 Enum 在代碼的其他地方存在。”當你正在使用不是用 TypeScript 寫的代碼時，這很有用。

對象與 Enums

你可能會想，“為什麼不直接使用對象？”好吧，Enums 有一些優勢：

// 使用對象
const ColorObject = {
Red: 'RED',
Green: 'GREEN',
Blue: 'BLUE'
} as const;

// 使用 Enum
enum ColorEnum {
Red = 'RED',
Green = 'GREEN',
Blue = 'BLUE'
}

// 使用對象時，你需要使用類型斷言
let objColor: keyof typeof ColorObject = 'Red';

// 使用 Enums 時，更直觀
let enumColor: ColorEnum = ColorEnum.Red;

Enums 提供了更好的類型安全，並在許多情況下更簡潔。

使用 Enum 作為函數參數

Enums 非常適合用作函數參數。它們使代碼更具可讀性並防止錯誤：

enum Sizes {
Small,
Medium,
Large
}

function orderCoffee(size: Sizes): string {
switch(size) {
case Sizes.Small:
return "這裡是你的小咖啡！";
case Sizes.Medium:
return "一杯中杯咖啡馬上來！";
case Sizes.Large:
return "大杯咖啡，額外咖啡因！";
default:
return "我們沒有那個尺寸！";
}
}

console.log(orderCoffee(Sizes.Medium));  // 輸出: "一杯中杯咖啡馬上來！"
// console.log(orderCoffee("Venti"));    // 錯誤：參數類型 '"Venti"' 不能賦值給類型 'Sizes'。

通過使用 Enum 為尺寸參數，我們確保只有有效的尺寸可以被傳遞給函數。這就像有一個固定的選項菜單——對尺寸的混亂不再存在！

Enum 方法

以下是一些有用的 Enum 方法：

方法	描述	示例
`Object.keys()`	獲取 Enum 的所有鍵	`Object.keys(Sizes)`
`Object.values()`	獲取 Enum 的所有值	`Object.values(Sizes)`
`Object.entries()`	獲取 Enum 的鍵值對	`Object.entries(Sizes)`
`Enum[key]`	獲取鍵的值	`Sizes[Sizes.Small]`
`Enum[value]`	獲取值的鍵（對於數字 Enum）	`Sizes[0]`

這些方法幫助你以不同的方式使用 Enums，例如獲取所有可用的尺寸或從其值中找到尺寸的名稱。

至此，你已經踏入了 TypeScript Enums 的世界。記住，編程就像學習一門新語言——它需要練習，但很快你將會流利地使用 Enum 語言！持續編碼，保持好奇心，並且在途中不忘享受樂趣。誰知道，也許你會為你喜歡的冰淇淋口味創建一個 Enum 呢！

Credits: Image by storyset