Наследование в TypeScript: extends, super и override

Класс TypeScript наследует от другого через extends. Подкласс получает все поля и методы родителя, вызывает родительский конструктор через super(...) и может переопределять методы, а TypeScript проверяет, что каждое переопределение остаётся совместимым с типами родителя.

class Animal {
    constructor(public name: string) {}

    speak(): string {
        return `${this.name} makes a sound`;
    }
}

class Dog extends Animal {
    constructor(name: string, public breed: string) {
        super(name); // call the parent constructor first
    }

    override speak(): string {
        return `${super.speak()}: woof`; // call the parent method
    }
}

const rex = new Dog("Rex", "beagle");
console.log(rex.speak());          // Rex makes a sound: woof
console.log(rex);                  // Dog { name: 'Rex', breed: 'beagle' }
console.log(rex instanceof Animal); // true

Это наследование классов JavaScript (цепочка прототипов, которая за ним стоит, описана в разделе наследование в JavaScript). TypeScript добавляет проверки типов: Dog можно присвоить везде, где ожидается Animal, а компилятор проверяет переопределение и вызов super.

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

Метод подкласса с тем же именем заменяет метод родителя. Его тип должен присваиваться типу родителя: такие же или совместимые параметры, такой же или более узкий тип возврата. Иначе любой код, держащий Animal, мог бы вызвать метод с аргументами, которые подкласс не умеет обрабатывать.

class Formatter {
    format(value: number): string {
        return value.toString();
    }
}

class CurrencyFormatter extends Formatter {
    // Compatible: accepts more (number | bigint) and returns the same type.
    override format(value: number | bigint): string {
        return `$${value.toLocaleString("en-US")}`;
    }
}

const formatters: Formatter[] = [new Formatter(), new CurrencyFormatter()];
for (const f of formatters) console.log(f.format(1234567));
// 1234567
// $1,234,567

Изменение параметра на value: string было бы ошибкой TS2416: Property 'format' in type 'CurrencyFormatter' is not assignable to the same property in base type 'Formatter'. Цикл показывает почему: он вызывает format с числом на каждом элементе, не зная, какой перед ним подкласс.

Есть одна дыра. Параметры методов сравниваются бивариантно, поэтому переопределение, которое принимает более узкий тип, например format(value: 1 | 2), компилируется, хотя цикл по-прежнему может передать ему 1234567. Типы возврата проверяются строго: возврат number вместо string это TS2416.

Ключевое слово override и noImplicitOverride

override говорит «этот член заменяет член базового класса», и компилятор требует, чтобы это было правдой. Если в базовом классе такого члена нет (опечатка или метод, который кто-то переименовал в родителе), это ошибка:

// This does not compile: the parent has no method called 'speek'.
class Animal {
    speak(): string {
        return "...";
    }
}

class Cat extends Animal {
    override speek(): string {
        return "meow";
    }
}

console.log(new Cat().speak());

index.ts(9,14): error TS4117: This member cannot have an 'override' modifier because it is not declared in the base class 'Animal'. Did you mean 'speak'?

Без override эта опечатка компилируется, и speak() молча возвращает "...". Ключевое слово помогает только там, где оно написано, поэтому включите noImplicitOverride в tsconfig.json. Тогда каждый метод, переопределяющий член базового класса, обязан это указать, а обычный speak() в подклассе будет ошибкой TS4114 (This member must have an 'override' modifier because it overrides a member in the base class 'Animal').

{
    "compilerOptions": {
        "strict": true,
        "noImplicitOverride": true
    }
}

noImplicitOverride не входит в strict; его нужно добавить самостоятельно. override стирается из скомпилированного JavaScript.

Защищённые члены в подклассах

Члены private родителя в подклассе не видны. Члены protected видны, и именно для этого protected существует: это API, который родительский класс предлагает потомкам.

class Counter {
    protected count = 0;
    private log: string[] = [];

    increment(): void {
        this.count++;
        this.log.push(`now ${this.count}`);
    }
}

class StepCounter extends Counter {
    constructor(private step: number) {
        super();
    }

    override increment(): void {
        this.count += this.step - 1; // protected: allowed
        super.increment();
        // this.log is private to Counter: a compile error here
    }

    get value(): number {
        return this.count;
    }
}

const c = new StepCounter(5);
c.increment();
c.increment();
console.log(c.value); // 10

Полные правила, включая то, почему ни private, ни protected не соблюдаются во время выполнения, см. в разделе модификаторы доступа.

Переобъявление поля с более узким типом

Подкласс часто знает, что поле хранит нечто более конкретное, чем говорит родитель. Переобъявление его как pet: Dog при современных полях классов имеет эффект во время выполнения: поле подкласса инициализируется значением undefined после возврата из super(), стирая то, что сохранил родительский конструктор. Если конструктор подкласса не присвоит его снова, TypeScript сообщает об этом как TS2612 (Property 'pet' will overwrite the base property in 'Home'). Используйте declare, чтобы изменить только тип:

class Animal {
    name = "pet";
}
class Dog extends Animal {
    bark(): string {
        return "woof";
    }
}

class Home {
    pet: Animal;
    constructor(pet: Animal) {
        this.pet = pet;
    }
}

class Kennel extends Home {
    declare pet: Dog; // type only: no field is emitted

    constructor(dog: Dog) {
        super(dog);
    }
}

console.log(new Kennel(new Dog()).pet.bark()); // woof

declare ничего не генерирует, поэтому значение, заданное конструктором Home, сохраняется. Более узкий тип становится правдой благодаря конструктору, который принимает только Dog.

implements и extends

Эти два ключевых слова отвечают на разные вопросы, и класс может использовать оба.

interface Serializable {
    serialize(): string;
}

class Entity {
    constructor(readonly id: number) {}
}

class User extends Entity implements Serializable {
    constructor(id: number, readonly email: string) {
        super(id);
    }

    serialize(): string {
        return JSON.stringify({ id: this.id, email: this.email });
    }
}

const u = new User(1, "ada@example.com");
console.log(u.serialize()); // {"id":1,"email":"ada@example.com"}

Класс может расширять только один класс (TS1174: Classes can only extend a single class). Чтобы объединить поведение из нескольких мест, реализуйте несколько интерфейсов и делитесь кодом через композицию (поле, хранящее вспомогательный объект) или миксины.

Миксины

Миксин это функция, которая принимает класс и возвращает его подкласс. Она даёт форму множественного наследования, проходящую проверку типов:

type Constructor<T = {}> = new (...args: any[]) => T;

function Timestamped<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        createdAt = new Date("2024-03-15T10:30:00Z");
    };
}

function Tagged<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        tags: string[] = [];
        tag(t: string): this {
            this.tags.push(t);
            return this;
        }
    };
}

class Note {
    constructor(public text: string) {}
}

const TaggedNote = Tagged(Timestamped(Note));
const n = new TaggedNote("buy milk").tag("home");
console.log(n.text, n.tags, n.createdAt.toISOString());
// buy milk [ 'home' ] 2024-03-15T10:30:00.000Z

any[] в Constructor обязателен: TypeScript принимает основу миксина, только если её конструктор принимает единственный rest-параметр типа any[]. Миксины работают, но усложняют чтение типов и трассировок стека, поэтому сначала пробуйте композицию.

Частые ошибки

• Вызов переопределяемого метода из базового конструктора. Базовый конструктор выполняется до инициализации полей подкласса, поэтому переопределение, читающее this.items, видит undefined, а вызов вроде this.items.push(x) выбрасывает TypeError во время выполнения. TypeScript этого не ловит.
• Забытый или поздний вызов super(...). Ошибки TS2377 и TS17009; родитель должен построить объект до того, как подкласс обратится к this.
• Переобъявление поля родителя без declare. Поле подкласса сбрасывает его в undefined.
• Глубокие иерархии. Каждый уровень связывает потомка с внутренностями родителя. Обычно двух уровней достаточно; дальше предпочитайте композицию или интерфейсы.