打字稿：从扩展类调用超级方法会产生类型错误 - （中间值）不是函数

Question

我正在一个名为 StructureWindowComponent 的组件中实现事件处理，并且在 LeggerStructureWindowComponent 中也有一个覆盖它。

在基类（StructureWindowComponent）中，模糊事件的处理如下：

 symbolCellLostFocus = (symbolField : MatInput, $index: number) =>{ console.log("base class symbol cell lost focus"); //implementation... }

在派生类 LeggerStructureWindowComponent 中，我像这样使用 super 调用此方法...

symbolCellLostFocus = (symbolField : MatInput, $index: number) =>{
    console.log("derived class symbol lost focus");
    super.symbolCellLostFocus(symbolField, $index);
  }

我在控制台中收到错误消息：ERROR TypeError: (intermediate value).symbolCellLostFocus is not a function

不知道这里出了什么问题..有人可以请教吗？

Answer 1

这是一个棘手的问题，但它与类中箭头函数语法的使用以及原型链有关。 它与 Angular 没有特别的关系。

基本上，如果你想解决你的问题，你需要用a() { ... }替换a = () => { ... } a() { ... } ：

symbolCellLostFocus(symbolField : MatInput, $index: number) {
  console.log("base class symbol cell lost focus");
  //implementation...
}

symbolCellLostFocus(symbolField : MatInput, $index: number) {
  console.log("derived class symbol lost focus");
  super.symbolCellLostFocus(symbolField, $index);
}

---

现在解释一下，如果您编写以下代码段：

class A {
    name = 'A'
    sayHello = () => {
        console.log('Hello from A')
    }
}

class B extends A {
    name = 'B'
    sayHello = () => {
        console.log('Hello from B')
        super.sayHello()
    }
}

它被转换成这个 JavaScript 片段：

class A {
    constructor() {
        this.name = 'A';
        this.sayHello = () => {
            console.log('Hello from A');
        };
    }
}
class B extends A {
    constructor() {
        super(...arguments);
        this.name = 'B';
        this.sayHello = () => {
            console.log('Hello from B');
            super.sayHello();
        };
    }
}

如您所见，方法是在构造函数中为每个由构造函数创建的实例定义的。 这意味着来自A的方法sayHello不可用于B ，因为sayHello在B的原型（即A ）中不可用，它仅可用于A每个实例。 这可能会令人困惑，我强烈建议您学习 JavaScript 中的原型继承！

ES2015 中引入的类只是 JavaScript 中原型继承的语法糖。 class 、 constructor 、 super等关键字仅抽象了编写原型链所需的语法。 本质上，它是在 JavaScript 中实现组合和继承的方式，这是一个非常强大的概念。

无论如何，当您在这里编写super.X() ，JavaScript 引擎正在尝试访问原型上不存在的X方法。 你最终得到Object.getPrototypeOf(this).undefined() ，而undefined确实不是一个函数，所以你得到一个TypeError: (intermediate value).sayHello is not a function运行时错误。

这里有一个例子来说明我所说的： TS playground 。