TypeScript - 類別：初學者指南

您好，未來的編程超級巨星！? 您準備好深入 TypeScript 類別的精彩世界了嗎？如果您之前從未寫過一行代碼，也不用擔心——我們將從頭開始，逐步學習。在這個教學結束時，您將能像專家一樣創建類別！那麼，讓我們一起開始這次冒險吧。

TypeScript - Classes

類別是什麼？

在我們深入細節之前，讓我們先了解一下類別是什麼。可以把類別看作是創建對象的藍圖。就像建築師使用設計圖來蓋房子一樣，我們使用類別在代碼中創建對象。這些對象可以具有屬性（比如房子的顏色）和方法（比如打開門）。

創建類別

讓我們從創建我們的第一個類別開始。我們將創建一個簡單的 Car 類別。

class Car {
make: string;
model: string;
year: number;

constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

honk() {
console.log("Beep beep!");
}
}

讓我們分解一下：

我們使用 class 關鍵字，然後跟上我們類別的名稱 Car。
在類別內部，我們定義了屬性：make、model 和 year。
constructor 是一個特殊方法，在我們創建新的 Car 對象時被調用。它為我們的屬性設置初始值。
我們還有一個 honk 方法，當被調用时，將在控制台打印 "Beep beep!"。

創建實例對象

現在我們有了 Car 類別，讓我們創建一些實際的汽車對象！

let myCar = new Car("Toyota", "Corolla", 2020);
let yourCar = new Car("Honda", "Civic", 2019);

在這裡，我們創建了兩個 Car 對象：myCar 和 yourCar。new 關鍵字告訴 TypeScript 創建我們 Car 類別的新實例。

訪問屬性和函數

現在我們有了汽車對象，我們如何使用它們呢？讓我們看看：

console.log(myCar.make);  // 輸出：Toyota
console.log(yourCar.year);  // 輸出：2019

myCar.honk();  // 輸出：Beep beep!

我們使用點語法來訪問對象的屬性和方法。這就像是在說："嘿，myCar！你的品牌是什麼？" 或者 "嘿，myCar！給我們鳴笛！"

類別繼承

繼承是一個強大的特性，它允許我們基於現有的類別創建新的類別。讓我們創建一個繼承自我們 Car 類別的 SportsCar 類別：

class SportsCar extends Car {
topSpeed: number;

constructor(make: string, model: string, year: number, topSpeed: number) {
super(make, model, year);
this.topSpeed = topSpeed;
}

race() {
console.log(`賽車速度為 ${this.topSpeed} 英里/小時！`);
}
}

let mySpeedster = new SportsCar("Ferrari", "F8", 2021, 210);
mySpeedster.honk();  // 輸出：Beep beep!
mySpeedster.race();  // 輸出：賽車速度為 210 英里/小時！

這裡發生了什麼：

我們使用 extends 關鍵字從 Car 繼承。
我們添加了一個新的屬性 topSpeed。
在構造函數中，我們調用 super() 來初始化父類的屬性。
我們添加了一個新的 race 方法，專門供 SportsCar 使用。

我們的 SportsCar 擁有 Car 的所有屬性和方法，以及它自己的新增功能！

方法覆寫

有時，我們希望在我們的子類中更改父類方法的運作方式。這被稱為方法覆寫。讓我們在我們的 SportsCar 中覆寫 honk 方法：

class SportsCar extends Car {
// ... 前面的代碼 ...

honk() {
console.log("Vroom vroom!");
}
}

mySpeedster.honk();  // 輸出：Vroom vroom!

現在當我們在 SportsCar 上調用 honk() 時，它會發出更有運動感的聲音！

static 關鍵字

static 關鍵字允許我們創建屬於類本身而不是類的實例的屬性和方法。讓我們在我們的 Car 類別中添加一個靜態方法：

class Car {
// ... 前面的代碼 ...

static numberOfWheels() {
return 4;
}
}

console.log(Car.numberOfWheels());  // 輸出：4

我們可以直接在 Car 類別上調用這個方法，而不需要創建模擬。

instanceof 運算符

instanceof 運算符允許我們檢查一個對象是否是某個特定類的實例：

console.log(myCar instanceof Car);  // 輸出：true
console.log(mySpeedster instanceof SportsCar);  // 輸出：true
console.log(mySpeedster instanceof Car);  // 輸出：true
console.log(myCar instanceof SportsCar);  // 輸出：false

這在您需要檢查您正在處理的對象類型時非常有用。

數據隱藏

在 TypeScript 中，我們可以使用訪問修飾符來控制類成員的可見性。有三種訪問修飾符：public、private 和 protected：

class BankAccount {
private balance: number;

constructor(initialBalance: number) {
this.balance = initialBalance;
}

public deposit(amount: number) {
this.balance += amount;
}

public withdraw(amount: number) {
if (amount <= this.balance) {
this.balance -= amount;
} else {
console.log("餘額不足！");
}
}

protected getBalance() {
return this.balance;
}
}

private：僅在類內部可訪問。
public：在任何地方都可以訪問（如果未指定，則默認）。
protected：在類內部和其子類中可訪問。

類別和接口

TypeScript 中的接口允許我們為我們的類定義一個合同。讓我們為我們的 Car 類創建一個接口：

interface Vehicle {
make: string;
model: string;
year: number;
honk(): void;
}

class Car implements Vehicle {
// ... 實現 ...
}

通過實現一個接口，我們確保我們的類遵循特定的結構。

方法總結

這裡是我們在這個教學中涵蓋的方法總結：

方法	描述
`constructor()`	初始化類的新實例
`honk()`	讓汽車鳴笛
`race()`	模擬賽車（對於 `SportsCar`）
`static numberOfWheels()`	返回汽車的輪子數量（對於 `Car` 類）
`deposit()`	向銀行賬戶添加金錢
`withdraw()`	從銀行賬戶中提取金錢
`getBalance()`	返回銀行賬戶的當前餘額

這就是您對 TypeScript 類別的第一次接觸。記住，熟能生巧，所以不要害怕嘗試這些概念。創建您自己的類別，混合搭配不同的特性，最重要的是，享受編程的樂趣！也許下一次教這個課的人就是您呢！?

Credits: Image by storyset