避免引用未绑定的方法，因为这可能会导致无意中限定“this`”的范围

Question

嗨，有没有关于如何预防的想法

错误避免引用未绑定的方法，这可能会导致this @typescript-eslint/未绑定方法的无意作用域

16:41  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  16:62  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  17:34  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  18:35  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  18:56  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  20:40  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  21:46  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method

import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  registrationForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.registrationForm = new FormGroup({
      companyName: new FormControl('', [Validators.required, Validators.email]),
      name: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormGroup({
        password: new FormControl('', [Validators.required, Validators.minLength(8)]),
        repeatPassword: new FormControl('', [Validators.required])
      }, {validators: [this.passwordMismatchValidator()]})
    });
  }

  onRegistrationFormSubmit() {
    if (!this.registrationForm.valid) {
      return;
    }
  }

  passwordMismatchValidator(): ValidatorFn {
    return (c: AbstractControl): ValidationErrors | null => {
      const password = c.get('password')?.value;
      const repeatPassword = c.get('repeatPassword')?.value;

      if (password !== repeatPassword) {
        return {'passwordMismatch': true};
      }

      return null;
    };
  }
}

Answer 1

参见this issue。似乎您必须执行以下操作之一：

• Angular库从静态方法更改为静态箭头函数属性。
• Angular库使用类似this: void的内容对其函数进行注释，我们可以在此规则中为其构建处理。
• you，用户，禁用注释。

就目前而言，我想唯一的解决方案是要么在行/文件/项目级别完全禁用规则，要么将严重性从错误更改为简单的警告。

对于前一种情况，只需添加以下内容：

在出现错误的行前执行

• (仅在该行上禁用错误)：

// eslint-disable-next- @typescript-eslint/unbound-method

显示错误的文件顶部的

• (禁用整个文件中的错误)：

/* eslint-disable @typescript-eslint/unbound-method */

如果您只想跳过某一节，也可以在同一文件中再次启用它，只需放入以下行：

/* eslint-enable @typescript-eslint/unbound-method */

在您的eslint配置文件的rules部分中的

• (即.eslintrc.json) (用于在整个项目中禁用错误)：

"@typescript-eslint/unbound-method"："off"

在后一种情况下，将以下内容放入您的eslint配置文件的rules部分(即.eslintrc.json) (以显示整个项目中的警告而不是错误)：

"@typescript-eslint/unbound-method": "warn"

EDIT:对于Angular Validators.*，您也可以覆盖eslint配置文件中的规则(请参阅the documentation)：

"@typescript-eslint/unbound-method": [
    "error",
    {
        "ignoreStatic": true
    }
],