Typescript - 从抽象构造函数调用抽象方法或提供等效功能

Question

在 Typescript 中 - 无法从抽象构造函数中调用抽象方法(代码将编译，但会在运行时崩溃)。

以下例代码崩溃为例:

abstract class Puzzle {


    addState = () => {
         let data = this.createStateData()
         //Perform a operation with data 
    }

    abstract createStateData: () => Object

    protected constructor() {
        //The code crashes here because createStateData
        //has not been defined yet
        this.addState()
     }

}

class RiverPuzzle extends Puzzle {

    createStateData = (): Object => {
         return 'Foo'
    }

    constructor() { 
        super()
        //this.addState()
    }

}

在此特定示例中，可以通过取消注释 RiverPuzzle 类的构造函数中的行并注释抽象类的构造函数中的有问题的行来解决该问题。

但是，该解决方案并不是最优的，因为有许多类扩展了抽象类 Puzzle 并且我不想手动将 this.addState() 添加到构造函数每个子类。

什么是更有效的替代方案？

Answer 1

您正在使用arrow functions as methods ，这通常是不鼓励的。它用 this 做了奇怪的事情，并且类的每个实例都有自己的方法，而不是原型(prototype)上只有一个方法。除非你有充分的理由，否则我建议你使用原型(prototype)方法(不使用箭头函数表示法)，如下所示:

abstract class Puzzle {
    addState() {
         let data = this.createStateData()
         //Perform a operation with data 
    }

    abstract createStateData(): Object

    protected constructor() {
        this.addState()
     }
}

class RiverPuzzle extends Puzzle {
    createStateData() {
         return 'Foo'
    }

    constructor() { 
        super()            
    }
}

这应该会像你期望的那样发挥作用。