TypeScript - 繼承

TypeScript 中的繼承允許我們重用單個類的屬性和方法到其他類。因此，它透過允許重用不同類的程式碼來提高程式碼可讀性。

TypeScript 是一種面向物件的程式語言，它支援 OOP 的所有特性。面向物件程式設計有四個主要支柱，繼承是其中之一。

TypeScript 主要支援兩種型別的繼承：單類繼承和多級繼承。我們將在本章中探討每一種。

單類繼承

在單類繼承中，一個類繼承另一個類的屬性。繼承其他類屬性的類稱為基類或子類。其屬性被繼承的類稱為父類或超類。

您可以使用 'extend' 關鍵字在 TypeScript 中實現繼承。

語法

您可以按照以下語法使用單類繼承。

class Child extends Parent {
    // Define properties and methods for child class
}

在上面的語法中，我們在子類和父類名稱之間使用了 'extends' 關鍵字。

示例

在下面的程式碼中，我們定義了 'Vehicle' 類，其中包含 'getType()' 方法，返回車輛型別。

class Vehicle {
    getType() {
        return "Vehicle";
    }
}

// Define a class Car that extends Vehicle
class Car extends Vehicle {
    carName: string = "Innova";
    getCarName() {
        return this.carName;
    }
}

// Create an object of Car class
let car = new Car();
console.log(car.getType()); // Output: Vehicle
console.log(car.getCarName()); // Output: Innova

編譯後，它將生成以下 JavaScript 程式碼。

class Vehicle {
    getType() {
        return "Vehicle";
    }
}
// Define a class Car that extends Vehicle
class Car extends Vehicle {
    constructor() {
        super(...arguments);
        this.carName = "Innova";
    }
    getCarName() {
        return this.carName;
    }
}
// Create an object of Car class
let car = new Car();
console.log(car.getType()); // Output: Vehicle
console.log(car.getCarName()); // Output: Innova

輸出

Vehicle
Innova

super 關鍵字

super 關鍵字用於呼叫父類的建構函式或訪問並呼叫父類的方法。

語法

您可以按照以下語法使用 super 關鍵字在子類中呼叫父類的建構函式和方法。

class Child extends Parent {
    constructor() {
        super();  // To call the constructor of the parent class
    }
    super.method_name(); // To call method of the parent class
}

在上面的語法中，我們在子類的建構函式內使用了 'super()' 來呼叫父類的建構函式。

在 'super.method_name()' 中，method_name 是父類方法的名稱。

示例

在下面的程式碼中，我們定義了 Person 類，它包含 'name' 屬性，並在建構函式 () 方法中初始化它。display() 方法列印 name 屬性的值。

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    display(): void {
        console.log(this.name);
    }
}

// Employee class is inheriting the Person class
class Employee extends Person {
    empCode: number;
    constructor(name: string, code: number) {
        super(name);
        this.empCode = code;
    }
    show(): void {
        super.display();
    }
}
// Creating the object of Employee class
let emp = new Employee("Sam", 123);
emp.show(); // Sam

編譯後，它將生成以下 JavaScript 程式碼。

class Person {
    constructor(name) {
        this.name = name;
    }
    display() {
        console.log(this.name);
    }
}
// Employee class is inheriting the Person class
class Employee extends Person {
    constructor(name, code) {
        super(name);
        this.empCode = code;
    }
    show() {
        super.display();
    }
}
// Creating the object of Employee class
let emp = new Employee("Sam", 123);
emp.show(); // Sam

輸出

上面的程式碼示例將產生以下結果：

Sam

方法重寫

方法重寫概念允許您在子類中重寫父類特定方法的程式碼。這樣，您可以在父類和子類中擁有同名但功能不同的方法。

示例

在下面的程式碼中，Animal 類有一個 move() 方法，適用於任何動物。之後，我們用 Animal 類擴充套件了 Dog 類。Dog 類有它自己的 move() 方法，這就是我們進行方法重寫的方式。

class Animal {
    move() {
        console.log("Animal is moving");
    }
}

// Dog class is inheriting Animal class
class Dog extends Animal {
    // Method overriding
    move() {
        console.log("Dog is moving");
    }
}

let dog = new Dog();
dog.move(); // Output: Dog is moving

編譯後，它將生成相同的 JavaScript 程式碼。

輸出

上面的程式碼示例將產生以下結果：

Dog is moving

多級繼承

多級繼承允許您繼承父類的屬性，而父類也繼承另一個類。

示例

在下面的程式碼中，Parrot 類繼承了 Bird 類的屬性和方法，而 Bird 類繼承了 Animal 類的屬性和方法。但是，在實際開發中，您可能會有更多層次的多級繼承。

class Animal {
    // Move method
    move() {
        console.log('This animal moves');
    }
}

// Bird class extends Animal class
class Bird extends Animal {
    // Bird can fly
    fly() {
        console.log('This bird flies');
    }
}

// Parrot class inherits the Bird class
class Parrot extends Bird {
    // Parrot can speak
    speak() {
        console.log('The parrot speaks');
    }
}

// Creating an instance of the Parrot class
let P1 = new Parrot();
P1.speak();

編譯後，它將生成相同的 JavaScript 程式碼。

輸出

上面的程式碼示例將產生以下結果：

The parrot speaks

多繼承、層次繼承和混合繼承也受一些面向物件程式語言支援，但不被 TypeScript 支援。您可以使用介面或基於原型的繼承來實現多繼承。

列印頁面