TypeScript - 介面：初学者的友好指南

你好呀，未來的編程巨星！今天，我們將要深入 TypeScript 介面的精彩世界。別擔心如果你從未編過程序——我會成為你這次興奮旅程中的可靠導遊。所以，拿一杯你喜歡的飲料，我們開始吧！

TypeScript - Interfaces

介面是什麼？

在我們深入細節之前，讓我們先了解介面是什麼。把介面想成一個合同或藍圖。它們定義了對象的結構，告訴我們對象應該有哪些屬性和方法。這就像一個列出所有食材以製作美味蛋糕的配方！

聲明介面

讓我們從聲明介面的基礎開始。這裡有一個簡單的例子：

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

在這個例子中，我們創建了一個名為 Person 的介面。它說任何 Person 类型的對象必須有兩個屬性：name（一個字符串）和 age（一個數字）。

現在我們來使用這個介面：

let john: Person = {
name: "John Doe",
age: 30
};

console.log(john.name); // 輸出：John Doe

在這裡，我們創建了一個遵循 Person 介面的對象 john。TypeScript 將確保 john 有 name 和 age 屬性，並且有正確的類型。

可選屬性

有時候，你可能希望某些屬性是可選的。我們可以使用 ? 符號來做到這點：

interface Car {
make: string;
model: string;
year?: number;
}

let myCar: Car = {
make: "Toyota",
model: "Corolla"
};

// 這也是有效的
let yourCar: Car = {
make: "Honda",
model: "Civic",
year: 2022
};

在這個例子中，year 是可選的。你可以包含它或省略它——兩者都是有效的！

聯合類型和介面

有時候，一個屬性可能接受多種類型。這時聯合類型就派上用場了。讓我們看一個例子：

interface Pet {
name: string;
age: number | string;
}

let myDog: Pet = {
name: "Buddy",
age: 5
};

let myCat: Pet = {
name: "Whiskers",
age: "3 years"
};

在這種情況下，age 可以是數字或字符串。這給我們在表示寵物的年齡上有更多的靈活性。

介面和數組

介面也可以描述數組。這樣做：

interface StringArray {
[index: number]: string;
}

let myArray: StringArray = ["Apple", "Banana", "Cherry"];
console.log(myArray[1]); // 輸出：Banana

這個介面說明當你訪問任何索引（索引是數字）時，你會得到一個字符串。

我們也可以使用介面來描述更複雜的數組結構：

interface Inventory {
[index: number]: {
name: string;
quantity: number;
};
}

let shopInventory: Inventory = [
{ name: "T-shirt", quantity: 20 },
{ name: "Jeans", quantity: 15 }
];

console.log(shopInventory[0].name); // 輸出：T-shirt

這個 Inventory 介面描述了一個數組，其中每個元素都是一個有 name 和 quantity 屬性的對象。

介面和繼承

就像在現實生活中一樣，介面可以從其他介面繼承。當你想創建一個現有介面的更特定版本時，這很有用。讓我們看一個例子：

interface Animal {
name: string;
}

interface Dog extends Animal {
breed: string;
}

let myPuppy: Dog = {
name: "Max",
breed: "Labrador"
};

console.log(`${myPuppy.name} 是一隻 ${myPuppy.breed}`);
// 輸出：Max 是一隻 Labrador

在這裡，Dog 介面從 Animal 介面繼承並添加了自己的 breed 屬性。

你可以甚至繼承多個介面：

interface Swimmer {
swim(): void;
}

interface Flyer {
fly(): void;
}

interface Duck extends Animal, Swimmer, Flyer {
quack(): void;
}

let myDuck: Duck = {
name: "Donald",
swim: () => console.log("游泳..."),
fly: () => console.log("飛行..."),
quack: () => console.log("嘎嘎！")
};

myDuck.quack(); // 輸出：嘎嘎！

在這個例子中，我們的 Duck 介面從 Animal、Swimmer 和 Flyer 繼承，並添加了自己的 quack 方法。

總結

恭喜你！你已經邁出了進入 TypeScript 介面世界的第一步。記住，介面就像是友好的守護者，幫助確保你的對象具有正確的結構。它們對於創建有條理、易於理解且可維護的代碼非常有用。

這裡是我們已經介紹過的方法的快速回顧：

方法	描述
聲明介面	定義對象的結構
可選屬性	使用 `?` 說明某些屬性是可選的
聯合類型	說明屬性可以接受多種類型
數組介面	描述數組的結構
介面繼承	基於現有的介面創建更特定的介面

持續練習，不久你將會像專家一樣創建介面！記住，在編程的世界裡，每個專家都曾經是初學者。所以不要害怕嘗試和犯錯誤——這是我們學習和成長的方式。快樂編程！

Credits: Image by storyset