在不与“@typescript-eslint/no-this-alias”冲突的情况下解决 class 字段的“@typescript-eslint/no-invalid-this”问题

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 emits @typescript-eslint/no-invalid-this 问题（因为它不是 ESLint 的 no-invalid-this，此规则理解 class 字段。）。

关于概念性解决方案的思考

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

此处无法使用箭头函数，因为此处是 class 字段。而且，如果我们使用别名 this，我们将面临 no-this-alias 规则。

我知道 ESLint 不是唯一的真实来源。但我想要这样的理由“因为，这个 ESLint 规则不涵盖这种情况。”

Answer 1

@typescript-eslint/no-invalid-this 只是没有在 class 属性中添加对 this 的支持。

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

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

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

顺便说一句，这可能会引出一个问题“为什么一年多了还没有修复！？”

两个原因：

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

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

在不与“@typescript-eslint/no-this-alias”冲突的情况下解决 class 字段的“@typescript-eslint/no-invalid-this”问题

Resolve "@typescript-eslint/no-invalid-this" issue for class fields without conflicting with "@typescript-eslint/no-this-alias"

typescript

eslint

typescript-eslint

typescript-class

关于概念性解决方案的思考