解决类字段的“@typescript-eslint/no-无效”问题，而不与“@typescript-eslint/no-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发出@typescript-eslint/no-无效-这个问题(因为它不是ESLint的no-invalid-this，这个规则理解类字段)。

关于概念解的思考

如果将componentsReferencesIDs设置为静态类字段，就不可能从vue模板中检索值。

此处无法使用箭头函数，因为这里是类字段。而且，如果我们别名this，我们将面临不是这个化名规则。

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

Answer 1

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

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

作为一个社区维护的项目，我们依赖社区的支持来帮助我们添加规则、添加特性和修复bug。

如果有人想解决这个问题--请随意提交一份公关--我认为这实际上应该是一个相对简单的解决办法。

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

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

原因有二：

1. 当您打开noImplicitThis编译器选项时，如果您使用的是TS直接处理的无效的this.Because，那么TypeScript本身就会抛出一个编译器错误，绝大多数用户都不觉得需要用林特规则复制错误。
2. 没有多少用户在类属性中使用this，这意味着用户一开始就不太可能遇到这个问题。有些用户不喜欢这种类型的属性，但我相信大多数用户并不知道这样做是有效的。

将这两者结合起来--很少有用户使用林特规则，更少的用户在类属性中使用this --因此没有足够的人来激励社区来修复它。