TypeScript - 交集類型：初学者的友好指南

你好啊，未來的編程超級巨星！今天，我們將踏上一段令人興奮的旅程，進入 TypeScript 的世界，並探索一個引人入勝的概念——交集類型。別擔心你對編程還是新手——我將成為你的友好導遊，我們將一步步來。所以，拿起你喜歡的飲料，舒適地坐好，讓我們一起深入探討吧！

TypeScript - Intersection Types

交集類型是什麼？

在我們深入細節之前，讓我們從一個簡單的比喻開始。想像你在一個冰淇淋店，無法決定要巧克力口味還是香草口味。如果我告訴你，你可以在一勺中同時享用到這兩種口味呢？這就是 TypeScript 中的交集類型——它們允許你將多種類型結合為一！

在 TypeScript 中，交集類型通過合並多個現有的類型來創建一個新的類型。這就像說，“我想要一個既有類型 A 的所有屬性，又有類型 B 的所有屬性的類型。” 這裡的關鍵詞是“和”——結果類型將具有兩種類型的所有特性。

語法

現在，讓我們看看如何在 TypeScript 中寫交集類型。語法出奇地簡單——我們使用與號（&）來組合類型。這裡是基本結構：

type NewType = TypeA & TypeB;

就這麼簡單！我們告訴 TypeScript，“嘿，創建一個新的類型，讓它包含 TypeA 和 TypeB 的所有內容。”

示例

讓我們深入一些示例，看看這在實際中是如何工作的。我總是發現，現實世界的場景能幫助概念更加牢固，所以讓我們想像我們正在開發一個遊戲！

示例 1：創建一個超人

// 定義一個基本的角色類型
type Character = {
name: string;
health: number;
};

// 定義一個超能力類型
type Superpower = {
power: string;
strength: number;
};

// 使用交集創建一個超人類型
type Superhero = Character & Superpower;

// 我們來創建一個超人！
const ironMan: Superhero = {
name: "Tony Stark",
health: 100,
power: "高科技服裝",
strength: 85
};

console.log(ironMan);

在這個例子中，我們通過組合 Character 和 Superpower 創建了一個 Superhero 類型。我們的 ironMan 對象現在具有兩種類型的屬性。酷炫吧？

示例 2：混合不同的類型

交集類型不僅限於對象。讓我們看看我們如何混合不同類型的類型：

type Stringifiable = string | number | boolean;
type Loggable = {
log(): void;
};

type StringifiableLoggable = Stringifiable & Loggable;

function processValue(value: StringifiableLoggable) {
console.log(value.toString());
value.log();
}

// 我們來創建一個滿足這種交集的對象
const myValue: StringifiableLoggable = {
valueOf() { return 42; },
log() { console.log("已記錄！"); }
};

processValue(myValue);

在這裡，我們將一個聯合類型（Stringifiable）與一個接口類型的類型（Loggable）組合。結果的 StringifiableLoggable 類型必須既能轉換為字符串，又具有 log 方法。

交集類型的結合性和交換性

現在，讓我們來討論交集類型的兩個重要屬性：結合性和交換性。別讓這些大詞嚇到你——它們其實是相當簡單的概念！

結合性

結合性意味著在使用多個 & 運算符時，類型的組合順序不會影響結果。換句話說：

type A = { a: string };
type B = { b: number };
type C = { c: boolean };

type ABC1 = A & (B & C);
type ABC2 = (A & B) & C;

// ABC1 和 ABC2 是等價的！

無論你是將 A 與 (B & C) 組合，還是將 (A & B) 與 C 組合，最終結果都是相同的。這就像說 (1 + 2) + 3 與 1 + (2 + 3) 在數學中是相同的。

交換性

交換性意味著交集類型中類型的順序不影響結果。例如：

type AB = A & B;
type BA = B & A;

// AB 和 BA 是等價的！

無論你是寫 A & B 還是 B & A——你會得到同樣的組合類型。想像一下混合藍色和黃色油漆——無論你是將藍色加到黃色還是黃色加到藍色，結果都是綠色。

交集類型的實際用途

現在，我們理解了基本概念，讓我們看看一些交集類型可以派上用場的現實世界場景：

1. 結合接口

interface Printable {
print(): void;
}

interface Loggable {
log(): void;
}

type PrintableLoggable = Printable & Loggable;

class MyClass implements PrintableLoggable {
print() { console.log("打印中..."); }
log() { console.log("記錄中..."); }
}

在這裡，我們創建了一個結合兩個接口的新類型。任何 PrintableLoggable 項目必須實現 print() 和 log() 方法。

2. 為現有類型添加屬性

type User = {
id: number;
name: string;
};

type UserWithEmail = User & { email: string };

const user: UserWithEmail = {
id: 1,
name: "John Doe",
email: "[email protected]"
};

在這個例子中，我們使用交集類型為 User 類型添加了額外的 email 屬性。

常見陷阱和建議

與任何強大的功能一樣，使用交集類型時也有一些需要注意的事項：

屬性衝突：如果你組合的類型具有相同名字但類型不同的屬性，TypeScript 將嘗試調和它們，這可能會導致意想不到的結果。
永不類型：如果你組合不兼容的類型，可能會得到 never 類型，這代表一個永不會發生的類型。
類型推斷：TypeScript 非常擅長推斷類型，但有時在使用複雜交集時，你可能需要明確地為變量指定類型。

結論

恭喜你！你剛剛踏出了進入 TypeScript 交集類型世界的第一步。我們介紹了基本概念，查看了一些示例，甚至探索了一些進階概念。記住，就像編程中的任何技能一樣，掌握交集類型需要練習。不要害怕在自製專案中嘗試和嘗試不同的組合。

在我們結束時，這裡有一個小表格總結我們討論過的關鍵方法：

方法	描述
`&`	用於創建交集類型的與號運算符
`type NewType = TypeA & TypeB`	創建交集類型的基本語法
`implements`	用於類實現交集類型的關鍵字

繼續編程，持續學習，最重要的是，享受樂趣！TypeScript 的類型系統是一個強大的工具，交集類型只是使它如此多功能的許多特點之一。祝編程愉快，未來的 TypeScript 大師！

Credits: Image by storyset