TypeScript - 類型延伸

您好，未來的編程超級明星！今天，我們將要深入TypeScript類型的精彩世界，學習如何延伸接口（interfaces）。在本課結束時，你將能像專家一樣創建強大且靈活的接口。所以，拿起你喜歡的飲料，放鬆身心，讓我們開始這段旅程吧！

TypeScript - Extending Interfaces

語法

在我們深入細節之前，先從基礎開始。在TypeScript中，延伸一個接口就像使用extends關鍵字一樣簡單。這裡是一般的語法：

interface 子接口 extends 父接口 {
// 额外的屬性或方法
}

你可以把它想像成皇室家族中的繼承。子接口"繼承"了父接口所有的屬性和方法，並且可以添加自己獨特的功能。

延伸單一接口

讓我們從一個簡單的例子開始。想像我們正在創建一個關於魔法生物的遊戲。我們從一個基本的Creature接口開始：

interface Creature {
name: string;
age: number;
}

現在，讓我們說我們想要創建一種特殊的生物 - 龙！我們可以延伸Creature接口來創建一個Dragon接口：

interface Dragon extends Creature {
breatheFire: () => void;
wingspan: number;
}

在這個例子中，Dragon繼承了Creature的name和age屬性，並添加了自己的breatheFire方法和wingspan屬性。

讓我們看看我們如何使用這個接口：

const smaug: Dragon = {
name: "Smaug",
age: 1000,
wingspan: 200,
breatheFire: () => console.log("咆哮！?")
};

console.log(smaug.name);  // 輸出：Smaug
smaug.breatheFire();  // 輸出：咆哮！?

正如你所看到的，smaug擁有Creature的所有屬性，加上龍特有的功能。

延伸多個接口

現在，如果我們的龍不僅是一種生物，還是一個財寶守護者呢？在TypeScript中，我們可以延伸多個接口！讓我們創建一個TreasureKeeper接口並同時延伸它們：

interface TreasureKeeper {
treasureCount: number;
addTreasure: (item: string) => void;
}

interface DragonLord extends Creature, TreasureKeeper {
breatheFire: () => void;
wingspan: number;
}

現在，我們的DragonLord是一種既能噴火又能積累財寶的生物。酷吧？

const falkor: DragonLord = {
name: "Falkor",
age: 500,
wingspan: 150,
treasureCount: 1000,
breatheFire: () => console.log("嗖！?"),
addTreasure: (item) => console.log(`將${item}加入寶藏！`)
};

falkor.addTreasure("金色王冠");  // 輸出：將金色王冠加入寶藏！

增強現有接口

有時候，你可能想要為現有的接口添加更多屬性。TypeScript允許你通過再次聲明接口並添加新的屬性來做到這點：

interface Creature {
species: string;
}

const unicorn: Creature = {
name: "Sparkles",
age: 100,
species: "獨角獸"
};

現在Creature有了name、age和species屬性。這種技術被稱為"聲明合併"。

創建複合接口

你也可以通過使用交集類型（intersection types）來組合現有的接口創建新的接口：

interface Flyer {
fly: () => void;
}

interface Swimmer {
swim: () => void;
}

type FlyingFish = Flyer & Swimmer;

const nemo: FlyingFish = {
fly: () => console.log("我在飛！?✈️"),
swim: () => console.log("繼續游泳！?‍♂️")
};

nemo.fly();  // 輸出：我在飛！?✈️
nemo.swim();  // 輸出：繼續游泳！?‍♂️

覆蓋屬性和方法

當延伸接口時，你可以覆蓋來自父接口的屬性和方法。這在你想對子接口中的屬性或方法進行更明確指定時非常有用：

interface Animal {
makeSound: () => void;
}

interface Cat extends Animal {
makeSound: () => string;  // 更明確的返回類型
}

const kitty: Cat = {
makeSound: () => "喵！"
};

console.log(kitty.makeSound());  // 輸出：喵！

在這個例子中，我們覆寫了makeSound方法，使其返回一個字符串而不是void。

以下是我們所介紹的方法總結：

方法	描述
延伸單一接口	使用`extends`關鍵字從一個接口繼承
延伸多個接口	使用`extends`並使用逗號分隔的接口
增強現有接口	再次聲明接口並添加新的屬性
創建複合接口	使用交集類型（`&`）來組合接口
覆蓋屬性和方法	在子接口中重新定義屬性或方法

好了，各位！你剛剛通過掌握接口延伸來提升了自己的TypeScript技能。記住，接口就像樂高積木一樣 - 你可以以無數種方式組合它們，在代碼中建立複雜且類型安全的結構。

隨著你編程旅程的持續，你會發現這些技巧將幫助你創建有彈性、可重用且易於維護的代碼。所以勇往直前，自信地使用接口吧！快樂編程！??‍??‍?

Credits: Image by storyset