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

作者:

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

TypeScript 類(classes)的繼承

TypeScript 是一種 JavaScript 的超集，它提供了類別的概念，讓開發者可以使用類別來定義物件，並且可以使用繼承來繼承類別的屬性和方法。

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，並且有一個建構函式 constructor，它會在建立物件時被呼叫，並且可以用來初始化物件的屬性。

TypeScript 類別的繼承

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

以下是一個簡單的 TypeScript 類別的繼承：

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 類別的繼承可以讓開發者更容易地定義物件，並且可以減少重複的程式碼，讓開發者可以更容易地維護程式碼，並且可以更容易地擴充程式碼。

TypeScript 類別的繼承的範例

以下是一個使用 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 的類別，它有兩個屬性 name 和 age，並且有一個方法 sayHello，它會顯示出 Hello, my name is John 的訊息。

然後定義了一個名為 Student 的子類別，它繼承了 Person 類別，並且定義了一個新的屬性 school，它也有一個新的方法 sayHello，它會顯示出 Hello, my name is John, I'm 20 years old and I'm studying at MIT 的訊息。

最後，我們建立了一個 Student 物件，並且呼叫它的 sayHello 方法，它會顯示出 Hello, my name is John, I'm 20 years old and I'm studying at MIT 的訊息。

總結

TypeScript 類別的繼承可以讓開發者更容易地定義物件，並且可以減少重複的程式碼，讓開發者可以更容易地維護程式碼，並且可以更容易地擴充程式碼。

推薦閱讀文章

推薦閱讀文章

            <a href="https://www.tutorialsteacher.com/typescript/typescript-class" target="_blank" rel="noopener">TypeScript 類(classes)的繼承</a><br>
            <a href="https://www.typescriptlang.org/docs/handbook/classes.html" target="_blank" rel="noopener">TypeScript 類別</a><br>
            <a href="https://www.typescriptlang.org/docs/handbook/classes.html#access-modifiers" target="_blank" rel="noopener">TypeScript 類別的存取修飾子</a><br>
            <a href="https://www.typescriptlang.org/docs/handbook/classes.html#static-properties" target="_blank" rel="noopener">TypeScript 類別的靜態屬性</a><br>
            <a href="https://www.typescriptlang.org/docs/handbook/classes.html#abstract-classes" target="_blank" rel="noopener">TypeScript 抽象類別</a

延伸閱讀本站文章

更多TypeScript相關文章

推薦學習youtube影片

發佈留言