Наследование абстрактных классов с конфигурацией в конструкторе

avatar
hilbert
8 августа 2021 в 19:47
39
1
0

Я пришел из мира PHP и в настоящее время реализую свой первый проект TypeScript. К сожалению, здесь не работают многие вещи, к которым я давно привык в PHP. Одной из таких вещей является следующий пример кода: 

abstract class Car {

    constructor() {
        this.initCar()
    }

    abstract initCar(): void

    abstract start(): void
}

class SportCar extends Car {

    private engine = ''
    
    initCar(): void {
        this.engine = 'V8'
    }

    start() {
        console.log(`I'm starting the ${this.engine} engine.`)
    }
}

const sportCar = new SportCar()
sportCar.start()

Я ожидаю, что я запускаю двигатель V8. будет выведено. но к сожалению Я запускаю двигатель. будет выведено.

  1. что делает TypeScript + JavaScript с этим примером?
  2. как решить такие случаи, когда я хочу использовать конструктор абстрактного класса для настройки дочерних объектов.
Источник

Ответы (1)

avatar
Evert
8 августа 2021 в 22:48
0

На этот вопрос можно ответить, взглянув на вывод Javascript:

"use strict";
class Car {
    constructor() {
        this.initCar();
    }
}
class SportCar extends Car {
    constructor() {
        super(...arguments);
        this.engine = '';
    }
    initCar() {
        console.log('initCar');
        this.engine = 'V8';
    }
    start() {
        console.log(`I'm starting the ${this.engine} engine.`);
    }
}
const sportCar = new SportCar();
sportCar.start();

Как видите, строка this.engine = '' выполняется после конструктора.

Я тоже думаю, что это довольно удивительное поведение. Самый простой способ решить эту проблему для этого случая — не инициализировать engine как пустую строку, потому что, в конце концов… зачем? Вы всегда будете перезаписывать его.

class SportCar extends Car {

    private engine!: string;
    
    initCar(): void {
        console.log('initCar');
        this.engine = 'V8';
    }

    start() {
        console.log(`I'm starting the ${this.engine} engine.`)
    }
}