解决 class 字段的“@typescript-eslint/no-invalid-this”问题，而不与“@typescript-eslint/no-this-alias”冲突

Question

在下面的代码中：

import { Vue, Component } from "vue-property-decorator";  


@Component({
  components: {}
})
export default class ProductViewingAndEditingPage extends Vue {

  private readonly componentsReferencesIDs: {
    productTitleInputField: string;
    productPriceInputControl: string;
  } = {
    productTitleInputField: "ProductTitle--InputField",
    productPriceInputControl: "ProductPrice--InputComponent"
  };

  private readonly productDataFormValidator: InputsGroupValidator = new InputsGroupValidator({
    controls: {
      [this.componentsReferencesIDs.productTitleInputField]:
          this.$refs[this.componentsReferencesIDs.productTitleInputField],
      [this.componentsReferencesIDs.productPriceInputControl]:
          this.$refs[this.componentsReferencesIDs.productPriceInputControl]
    }
  });
}

@typescript/eslint发出@typescript-eslint/no-invalid-this问题（因为它不是 ESLint 的no-invalid-this ，所以该规则理解 class 字段。）。

关于概念解决方案的思考

如果我将componentsReferencesIDs设置为 static class 字段，则无法从 vue 模板中检索值。

这里不能使用箭头函数，因为这里是 class 字段。 而且，如果我们给this加上别名，我们将面临no-this-alias规则。

我知道 ESLint 不是唯一的事实来源。 但我想要像“因为〈argument〉，这个 ESLint 规则不包括这种情况”这样的理由。

Answer 1

@typescript-eslint/no-invalid-this只是在添加的 class 属性中不支持this功能。

扩展规则是最近才添加到项目中的。 当时，作者致力于他们需要的功能，即对this args 的支持。

作为一个社区维护的项目，我们依靠社区的支持来帮助我们添加规则、添加功能和修复错误。
如果有人想解决这个问题 - 请随时提交 PR - 我相信它实际上应该是一个相对简单的修复。

github 上的相关问题： https://github.com/typescript-eslint/typescript-eslint/issues/491

---

顺便说一句，这可能引出了一个问题：“为什么一年多没有解决这个问题？？”

两个原因：

1. 当你打开noImplicitThis编译器选项时，如果你使用无效的this ，TypeScript 本身会抛出编译器错误。因为它是由 TS 直接处理的，绝大多数用户不觉得有必要用 a 来复制错误皮棉规则。
2. 没有多少用户在 class 属性中使用this ，这意味着用户不太可能一开始就遇到这个问题。 有些用户不喜欢这种风格的属性，但我相信大多数用户实际上并不知道这样做是有效的。

将这两个放在一起 - 很少有用户使用 lint 规则，并且在 class 属性中仍然使用this的用户更少 - 所以没有足够的人来激励社区修复它。