Наследование классов в TypeScript

В этом руководстве вы узнаете о концепции наследования классов вTypeScript и о том, как использовать ее для повторного использования функциональности другого класса.

Введение в наследование TypeScript

Класс может повторно использовать свойства и методы другого класса. В TypeScript это называется наследованием.

Класс, который наследует свойства и методы, называется дочерним классом. А класс, чьи свойства и методы наследуются, называется родительским классом. Эти имена исходят из того, что дети наследуют гены от родителей.

Наследование позволяет повторно использовать функциональность существующего класса, не переписывая его.

JavaScript использует прототипное наследование, а не классическое наследование, такое как Java или C#. ES6 вводит синтаксис класса, который является просто синтаксическим сахаром прототипного наследования. TypeScript поддерживает наследование, как ES6.

Предположим, у вас есть следующий класс Person :

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

Чтобы наследовать класс, вы используете ключевое слово extends. Например, класс Employee наследует класс Person :

class Employee extends Person {
    //..
}

В этом примере 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);
    }
}

Следующее создает экземпляр класса Employee :

let employee = new Employee('John','Doe','Front-end Developer');

Поскольку класс Employee наследует свойства и методы класса Person, вы можете вызывать getFullName() и describe() для объекта employee следующим образом:

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

console.log(employee.getFullName());
console.log(employee.describe());

Выход:

John Doe
This is John Doe.

Переопределение метода

Когда вы вызываете метод employee.describe() для объекта employee, выполняется метод Person describe() класса UGVyc29u, который показывает сообщение: 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}.`;
    }
}

В describe() мы вызвали метод describe() родительского класса, используя синтаксис super.methodInParentClass().

Если вы вызываете метод describe() для объекта employee, вызывается метод describe() в классе Employee :

let employee = new Employee('John', 'Doe', 'Web Developer');
console.log(employee.describe());

Выход:

This is John Doe.I'm a Web Developer.

Заключение

• Используйте ключевое слово extends, чтобы класс мог наследовать от другого класса в TypeScript.
• Используйте super() в конструкторе дочернего класса, чтобы вызвать конструктор родительского класса. Кроме того, используйте синтаксис super.methodInParentClass() для вызова methodInParentClass() в методе дочернего класса.