TypeScript 继承

摘要：在本教程中，您将学习 TypeScript 继承的概念以及如何使用它来重用另一个类的功能。

TypeScript 继承简介

一个 类 可以重用另一个类的属性和方法。这在 TypeScript 中称为继承。

继承属性和方法的类称为子类。被继承其属性和方法的类称为父类。这些名称来源于孩子从父母那里继承基因的本质。

继承允许您重用现有类的功能，而无需重写它。

JavaScript 使用 原型继承，而不是像 Java 或 C# 这样的经典继承。ES6 引入了 类 语法，它只是原型继承的语法糖。TypeScript 支持像 ES6 一样的继承。

假设您有以下 Person 类

class Person {
  constructor(private firstName: string, private lastName: string) {}
  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
  describe(): string {
    return `This is ${this.firstName} ${this.lastName}.`;
  }
}Code language: TypeScript (typescript)

要继承一个类，您可以使用 extends 关键字。例如，以下 Employee 类继承了 Person 类

class Employee extends Person {
  //...
}Code language: TypeScript (typescript)

在这个例子中，Employee 是子类，Person 是父类。

构造函数

因为 Person 类有一个初始化 firstName 和 lastName 属性的构造函数，所以您需要通过调用其父类的构造函数来在 Employee 类的构造函数中初始化这些属性。

要在子类的构造函数中调用父类的构造函数，您可以使用 super() 语法。例如

class Employee extends Person {
    constructor(
        firstName: string,
        lastName: string,
        private jobTitle: string) {
        
        // call the constructor of the Person class:
        super(firstName, lastName);
    }
}Code language: TypeScript (typescript)

以下创建了 Employee 类的实例

let employee = new Employee('John','Doe','Front-end Developer');Code language: TypeScript (typescript)

因为 Employee 类继承了 Person 类的属性和方法，所以您可以在 employee 对象上调用 getFullName() 和 describe() 方法，如下所示

let employee = new Employee('John', 'Doe', 'Web Developer');

console.log(employee.getFullName());
console.log(employee.describe());
Code language: TypeScript (typescript)

输出

John Doe
This is John Doe.Code language: TypeScript (typescript)

方法重写

当您在 employee 对象上调用 employee.describe() 方法时，将执行 Person 类的 describe() 方法，显示消息：This is John Doe。

如果您希望 Employee 类拥有自己的 describe() 方法版本，您可以在 Employee 类中这样定义它

class Employee extends Person {
    constructor(
        firstName: string,
        lastName: string,
        private jobTitle: string) {

        super(firstName, lastName);
    }

    describe(): string {
        return super.describe() + `I'm a ${this.jobTitle}.`;
    }
}Code language: TypeScript (typescript)

在 describe() 方法中，我们使用 super.methodInParentClass() 语法调用了父类的 describe() 方法。

如果您在 employee 对象上调用 describe() 方法，则会调用 Employee 类中的 describe() 方法

let employee = new Employee('John', 'Doe', 'Web Developer');
console.log(employee.describe());Code language: TypeScript (typescript)

输出

This is John Doe.I'm a Web Developer.Code language: TypeScript (typescript)

总结

• 使用 extends 关键字允许一个类继承自另一个类。
• 使用 super() 在子类的构造函数中调用父类的构造函数。此外，使用 super.methodInParentClass() 语法在子类的方法中调用 methodInParentClass()。