Eslint 规则 no-invalid-this 和类中的粗箭头函数

Question

我有以下课程：

export class MyClass {
  private foos: Foo[];

  constructor(foos: Foo[]) {
    this.foos = foos;
  }

  getByA = (myA: Mya): Foo => {
    return this.foos.find(foo => foo.a === myA) ?? unknownFoo();
  };
}

不幸的是，在我的胖箭头函数中，我收到有关 invalid 的警告this：

ESLint: Unexpected 'this'.(no-invalid-this)

我的 eslint 插件版本是4.15.1

除了禁用该规则之外，我还能做些什么来使该规则正常工作吗？

Answer 1

您收到此错误是因为当您创建箭头函数时，您正在创建一个可以在类的不同上下文中调用的对象。因此，当执行时，它可能处于不存在或不同的getByA上下文中。this

一种选择是bind箭头函数的上下文：

getByA = (myA: Mya): Foo => {
    return this.find(foo => foo.a === myA) ?? unknownFoo();
}.bind(this.foos);

有关此错误的更多资源以及如何this在正确的上下文中正确使用的示例，请查看此处。