深入了解 TypeScript 類別繼承：2025 最新語法與最佳實踐

作者:

了解TypeScript中的類(Classes)繼承功能

目錄

深入了解 TypeScript 類別繼承：2025 最新語法與最佳實踐

TypeScript 是一種 JavaScript 的超集，它提供了類別的概念，讓開發者可以使用類別來定義物件，並且可以使用繼承來繼承類別的屬性和方法。在這篇文章中，我們將深入探討 TypeScript 的類別及其繼承功能，並提供實作範例與最佳實踐。

TypeScript 類別的定義

在 TypeScript 中，類別可以使用 class 關鍵字來定義。類別可以包含屬性和方法，並且可以使用 constructor 來定義建構函式。建構函式會在建立物件時被呼叫，並可用來初始化物件的屬性。

以下是一個簡單的 TypeScript 類別定義範例：

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

在這個例子中，我們定義了一個名為 Person 的類別，擁有兩個屬性 name 和 age，以及一個建構函式來初始化這些屬性。

TypeScript 類別的繼承

TypeScript 中的類別可以使用 extends 關鍵字來繼承另一個類別。子類別可以繼承父類別的屬性和方法，並且定義自己的屬性和方法。

以下是使用繼承的範例：

class Student extends Person {
    school: string;

    constructor(name: string, age: number, school: string) {
        super(name, age); // 呼叫父類別的建構函式
        this.school = school;
    }
}

在這個範例中，我們定義了一個名為 Student 的子類別，繼承自 Person。它新增了一個屬性 school，並在建構函式中使用 super() 來呼叫父類別的建構函式。

TypeScript 類別繼承的優點

使用 TypeScript 類別繼承的主要優點包括：

1. **減少重複程式碼**：透過繼承，子類別可以重用父類別的屬性和方法，讓程式碼更簡潔。
2. **增強維護性**：當需要修改某個功能時，只需在父類別中進行修改，子類別將自動繼承這些變更。
3. **擴充性**：開發者可以輕鬆擴展功能，創建新的子類別，並根據需要添加額外的屬性和方法。

實作範例

以下是完整的 TypeScript 類別與繼承的範例程式碼：

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is {this.name}`);
    }
}

class Student extends Person {
    school: string;

    constructor(name: string, age: number, school: string) {
        super(name, age);
        this.school = school;
    }

    sayHello() {
        console.log(`Hello, my name is{this.name}, I'm {this.age} years old and I'm studying at{this.school}`);
    }
}

let student = new Student('John', 20, 'MIT');
student.sayHello(); // Hello, my name is John, I'm 20 years old and I'm studying at MIT

在這段程式碼中，我們定義了 Person 類別及其子類別 Student，並展示了如何使用繼承來擴展功能。

錯誤排除

在使用 TypeScript 類別繼承時，可能會遇到一些常見的錯誤，如：

1. **未正確使用 super()**：在子類別的建構函式中，必須在使用 this 之前呼叫 super()。
2. **屬性未正確初始化**：確保所有必要的屬性在建構函式中都已初始化。

Q&A（常見問題解答）

Q1: TypeScript 的類別繼承與 JavaScript 的有何不同？

A1: TypeScript 提供了靜態類型檢查，使得開發者能夠在編譯期間發現錯誤，而 JavaScript 則是在運行時進行類別的處理。此外，TypeScript 的類別支持屬性的可見性修飾符，如 public、private 和 protected。

Q2: 如何在 TypeScript 中使用多重繼承？

A2: TypeScript 不支持多重繼承，但可以通過使用介面（interface）來實現類似的功能。類別可以實作多個介面以獲得多種行為。

Q3: TypeScript 的繼承適合用於什麼類型的應用？

A3: TypeScript 的繼承非常適合用於大型應用程式，特別是當有許多相似的物件時，可以有效地減少重複程式碼並提高維護性。

希望這篇文章能讓您更深入了解 TypeScript 的類別繼承，並幫助您在開發過程中應用這些概念！

—

發佈留言