Устранение проблемы "@ 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, это правило понимает поля класса.).

Размышления о концептуальном решении

Если я сделаю componentsReferencesIDs в поле класса stati c, будет невозможно получить значения из vue шаблон.

Стрелочные функции здесь использовать нельзя, потому что здесь находится поле класса. А также, если мы используем псевдоним this, мы столкнемся с правилом no-this-alias .

Я понимаю, что ESLint не единственный источник истины. Но мне нужно оправдание вроде «потому что 〈argument〉, это правило ESLint не распространяется на этот случай».

Answer 1

@typescript-eslint/no-invalid-this просто не поддерживает this в свойствах класса.

Правило расширения было добавлено в проект относительно недавно. В то время автор работал над необходимой им функцией, которая заключалась в поддержке this args.

Как проект, поддерживаемый сообществом, мы полагаемся на поддержку сообщества, которая поможет нам добавить правила, функции и исправлять ошибки. Если кто-то хочет решить эту проблему - пожалуйста, отправьте PR - я считаю, что на самом деле это должно быть относительно простое исправление.

Соответствующая проблема на github: https://github.com/typescript-eslint/typescript-eslint/issues/491

В стороне, вероятно, возникает вопрос: «Почему это не было исправлено больше года!?»

Две причины:

1. Когда у вас есть noImplicitThis включен параметр компилятора, сам TypeScript выдаст ошибку компилятора, если вы используете недопустимый this. Поскольку он обрабатывается непосредственно TS, подавляющее большинство пользователей не чувствуют необходимости дублировать ошибку с помощью пуха. rule.
2. Не многие пользователи используют this в свойствах класса, что означает, что пользователи вряд ли столкнутся с этой проблемой с самого начала. Некоторым пользователям не нравится этот стиль свойств, но я считаю, что большинство пользователей на самом деле не знают, что это действительно так.

Объединение этих двух параметров - немногие пользователи используют правило lint, и меньше пользователей по-прежнему используют this в свойствах класса, поэтому не было достаточно людей, чтобы мотивировать сообщество исправить это.