TS2611：'foo' 被定义为类'A' 中的一个属性，但在'B' 中作为访问器被覆盖

Question

我的 angular 应用程序中遇到打字稿编译错误。以下是示例代码和错误消息。你能指导我抑制这个错误吗？我认为这段代码根据 Javascript 是正确的。

- error TS2611: 'foo' is defined as a property in class 'A', but is overridden here in 'B' as an accessor.

export class A {
  foo: string;
}

export class B extends A {
  f1;
  set foo(name) {
    this.f1 = name;
  }
  get foo() {
    return this.f1;
  }
}

Answer 1

错误消息是正确的，因为这里有一个微妙的错误。当您在父类中定义属性时，会自动为其每个子类创建该属性。

因此，在您编写的代码中，如果您不是为 Bset/get foo(name) { ... }类编写的：该类无论如何都会拥有该foo属性，因为该属性是在B的父类 - 中声明的A。

在您的代码中，您实际上是在破坏使用访问器声明声明的foo属性A。

如果你想要求所有的子类都A声明自己的 foo属性（类似于一个接口），那么尝试：

export class A {
  abstract foo: string;
}

Answer 2

这是编程语言中的常见行为，当您从父级继承时，您不能使用相同的变量/函数/访问器名称，直到您指定新名称覆盖旧名称，但始终必须是相同的类型。因此，在您的示例中，我们在父级中有变量，在子级中有访问器。您可以进行以下更改：

class A {
  _foo: string = "";
  set foo(name) {
    this._foo = name;
  }
  get foo() {
    return this._foo;
  }
}

export class B extends A {
  f1: any;
  set foo(name) {
    this.f1 = name;
  }
  get foo() {
    return this.f1;
  }
}

我相信有某种方法可以省略类型限制（如果必须的话），但我不知道如何，而且我认为这不是好方法（程序应该对读者来说很清楚）。