2025 最新 TypeScript 類別 (Classes) 教學與實作範例

作者:

學習TypeScript中的類(Classes)功能

在 2025 年，TypeScript 類別 (Classes) 的基本用法仍然是物件導向程式設計的一個重要概念。這篇文章將深入探討 TypeScript 類的最新語法，並提供實作範例，讓開發者輕鬆掌握這一技術。

TypeScript 類提供了一種有效的方式來組織程式碼，使其更具可讀性和可維護性。這篇文章將涵蓋類別的定義、屬性與方法、構造函數、繼承與多型等基本用法，並附上實作範例以幫助理解。

目錄

定義類別

定義類別是 TypeScript 類的基本用法之一，語法如下：

class ClassName {
    // Class body
}

以下是一個簡單的範例，定義了一個名為 Person 的類別：

class Person {
    // Class body
}

定義屬性和方法

在類別中定義屬性和方法可以讓我們將功能進一步拆解，語法如下：

class ClassName {
    // Property
    propertyName: type;

    // Method
    methodName(): returnType {
        // Method body
    }
}

下面的範例顯示了如何在 Person 類別中定義 name 屬性以及 sayHello() 方法：

class Person {
    // Property
    name: string;

    // Method
    sayHello(): void {
        console.log(`Hello, my name is ${this.name}`);
    }
}

定義構造函數

構造函數在創建類別實例時進行初始化。語法如下：

class ClassName {
    constructor(parameters) {
        // Constructor body
    }
}

以下範例展示了如何在 Person 類別中定義構造函數：

class Person {
    // Property
    name: string;

    // Constructor
    constructor(name: string) {
        this.name = name;
    }

    // Method
    sayHello(): void {
        console.log(`Hello, my name is ${this.name}`);
    }
}

定義繼承和多型

繼承和多型讓我們可以重用類別的功能。語法如下：

class ClassName extends SuperClassName implements InterfaceName {
    // Class body
}

這裡有一個範例，定義了一個名為 Student 的類別，繼承自 Person 類別並實現了 StudentInterface 介面：

class Student extends Person implements StudentInterface {
    // Property
    studentId: number;

    // Constructor
    constructor(name: string, studentId: number) {
        super(name);
        this.studentId = studentId;
    }

    // Method
    sayHello(): void {
        console.log(`Hello, my name is {this.name} and my student ID is{this.studentId}`);
    }
}

錯誤排除提示

在使用 TypeScript 類時，開發者可能會遇到一些常見錯誤，例如：
– 未定義屬性：確保所有屬性在使用之前已正確定義。
– 錯誤的構造函數參數：檢查傳入構造函數的參數是否正確匹配。

延伸應用

TypeScript 類別的概念可以擴展到更複雜的應用，例如：
– 創建可重用的 UI 元件。
– 開發大型應用程式時的模組化設計。

Q&A（常見問題解答）

1. TypeScript 類別和 JavaScript 類別有何不同？

TypeScript 類別加入了靜態類型，使得開發者能在編譯階段捕捉到更多錯誤，增加了程式碼的可維護性。

2. 如何在 TypeScript 中使用介面 (Interface)？

介面用於定義類別應該實現的結構，可以幫助確保類別的一致性和可擴展性。

3. TypeScript 支援多重繼承嗎？

TypeScript 不支援多重繼承，但可以使用介面來實現類似的功能。

—

這篇文章不僅涵蓋了 TypeScript 類的基礎知識，還提供了實作範例和錯誤排除建議，幫助讀者更好地理解和運用 TypeScript 類的特性。

發佈留言