TypeScript - 並集型別：初学者的友好導入

你好啊，未來的編程超新星！? 你準備好跳進 TypeScript 的精彩世界並學習其最強大的功能之一了嗎？今天，我們將探索並集型別，這個概念起初可能會讓人感到嚇人，但我保證你會在這個教學的結束時發現它非常實用，甚至還有點好玩！

TypeScript - Union

作為你友善的鄰居電腦老師，我見過無數學生在掌握這個概念時眼睛發亮。所以，讓我們一起踏上這個旅程，怎麼樣？

什麼是並集型別？

在我們深入細節之前，讓我們先用一個簡單的比喻來開始。想像你有一個神奇的盒子，它可以同時容納一輛玩具車或者一個毛絨玩具，但不能同時容納兩者。這就是 TypeScript 中的並集型別——它是一種告訴我們的代碼一個變量可以是幾種類型中的一种的方式。

現在，讓我們來動手寫一點代碼吧！

語法：並集字面量

並集型別的基本語法使用管道符（|）來分隔不同的類型。這就像告訴 TypeScript，“嘿，這可以是這個或者那個！”

let myFavorite: string | number;

myFavorite = "TypeScript"; // 這是有效的
console.log(myFavorite); // 輸出：TypeScript

myFavorite = 42; // 這也是有效的
console.log(myFavorite); // 輸出：42

// myFavorite = true; // 這會導致錯誤

在這個例子中，myFavorite 可以是字符串或數字。這就像我們的神奇盒子可以容納一個單詞或者一個數字，但不能容納其他東西。如果我們試圖把一個布爾值（如 true）放進去，TypeScript 會揮動它的魔杖並向我們顯示一個錯誤。

並集型別變量

讓我們擴展我們之前的例子，並看看並集型別如何使我們的代碼更靈活：

type Pet = "cat" | "dog" | "fish";
let myPet: Pet;

myPet = "cat"; // 這是有效的
console.log(`我有一隻 ${myPet}`); // 輸出：我有一隻 cat

myPet = "dog"; // 這也是有效的
console.log(`我有一隻 ${myPet}`); // 輸出：我有一隻 dog

// myPet = "elephant"; // 這會導致錯誤

在這裡，我們創建了一個名為 Pet 的自定義型別，它只能是三個特定字符串之一。這就像一家只能賣貓、狗和魚的寵物店。如果你試圖買一頭象，對不起，做不到！

並集型別與函數參數

當我們將並集型別與函數一起使用時，它們真的會發光。它們讓我們的函數在不失去類型安全性的情況下更加多用途。讓我們看一個例子：

function printId(id: number | string) {
console.log(`你的 ID 是：${id}`);
}

printId(101); // 輸出：你的 ID 是：101
printId("202"); // 輸出：你的 ID 是：202

// printId(true); // 這會導致錯誤

在這個函數中，printId 可以接受數字或字符串作為參數。這就像一個萬能的 ID 卡閱讀器，可以處理數字和文本基礎的 ID。但如果你試圖刷卡一張布爾值的 ID 卡，它會有禮貌地拒絕！

並集型別與數組

現在，讓我們升級一個等級，看看並集型別如何與數組一起工作。為了準備好，請你為這些數組魔法做好心理準備！

let mixedArray: (number | string)[] = [1, "two", 3, "four", 5];

console.log(mixedArray); // 輸出：[1, "two", 3, "four", 5]

mixedArray.push(6); // 這是有效的
mixedArray.push("seven"); // 這也是有效的

// mixedArray.push(true); // 這會導致錯誤

console.log(mixedArray); // 輸出：[1, "two", 3, "four", 5, 6, "seven"]

在這裡，我們創建了一個可以包含數字和字符串的數組。這就像一個播放清單，可以包括曲目編號和歌曲標題。但如果你試圖在其中偷偷放入一個布爾值，TypeScript 會當場抓住你！

實際應用案例

現在我們已經介紹了基本知識，讓我們看看一些並集型別可以拯救天的真實世界場景：

API 回應：當你與 API 一起工作時，有時你接收到的數據可以是不同的類型。並集型別幫助你優雅地處理這些變化。

type ApiResponse = {
status: "success" | "error";
data: string | number | null;
};

function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log(`成功！數據：${response.data}`);
} else {
console.log("發生錯誤");
}
}

handleResponse({ status: "success", data: "用戶個人資料已加載" });
handleResponse({ status: "error", data: null });

配置選項：當創建可配置的函數時，並集型別允許你提供一組有效的選項。

type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";

function createButton(color: Color, size: Size) {
console.log(`創建一個 ${color} 按鈕，尺寸為 ${size}`);
}

createButton("red", "medium"); // 有效
// createButton("yellow", "extra-large"); // 這會導致錯誤

常見並集型別方法

這裡是一張表格，列出了一些你可以與並集型別一起使用的常見方法：

方法	描述	示例
typeof	檢查值的類型	`typeof x === "string"`
instanceof	檢查對象是否是特定類的實例	`x instanceof Date`
in	檢查對象中是否存在某個屬性	`"name" in x`
Array.isArray()	檢查值是否是數組	`Array.isArray(x)`

結論

呼！我們今天涵蓋了很多內容，不是嗎？並集型別可能起初看起來有點棘手，但它們是你 TypeScript 工具箱中非常強大的工具。它們讓你可以編寫更靈活且堅固的代碼，在問題發生之前就捕獲潛在的錯誤。

記住，編程就像學習一門新語言——它需要練習和耐心。如果你一開始沒有掌握，不要氣餒。持續嘗試，持續編程，不久之後，你就會像專家一樣使用並集型別！

在我們結束時，我回想起了有一個學生曾經告訴我，“並集型別就像是我在代碼中的瑞士軍刀！”而你知道嗎？他完全說對了。所以，勇往直前，年輕的編程者，願你的並集型別永遠為你所用！??

Credits: Image by storyset