Angular表单变量触发ESLint `any`类型不安全操作错误求解

问题根源 #

Angular的FormGroup.value默认返回any类型，TypeScript无法推断表单字段的具体类型，导致@typescript-eslint/no-unsafe-member-access等规则触发错误。

解决方案 #

方法1：定义表单数据接口，使用泛型约束FormGroup #

这是最推荐的类型安全方案，通过TypeScript接口明确表单结构：

1. 定义表单数据接口：

interface SignUpFormData {
  vorname: string;
  nachname: string;
  email: string;
  emailbestaetigt: string;
  passwort: string;
  passwortbestaetigt: string;
  Geburtstag: string;
  Telefonnummer: string;
}

2. 修改SignUpForm的类型声明，用泛型绑定接口：

import { FormControl, FormGroup } from '@angular/forms';

public SignUpForm!: FormGroup<Record<keyof SignUpFormData, FormControl<string>>>;

3. 初始化表单逻辑保持不变，TypeScript会自动匹配控件类型：

ngOnInit(): void {
  this.SignUpForm = this.formBuilder.group({
    vorname: ['', Validators.required],
    nachname: ['', Validators.required],
    email: ['', Validators.required],
    emailbestaetigt: ['', Validators.required],
    passwort: ['', Validators.required],
    passwortbestaetigt: ['', Validators.required],
    Geburtstag: ['', Validators.required],
    Telefonnummer: ['', Validators.required],
  });
}

4. 优化SignUp方法的字段访问，此时formValue会被推断为明确类型：

SignUp(): void {
  const mailformat: RegExp = /^\w+([-]?\w+)*@\w+([-]?\w+)*(\.\w{2,3})+$/;
  const formValue = this.SignUpForm.value;
  
  if (
    this.SignUpForm.valid &&
    formValue.vorname?.length !== 0 &&
    formValue.nachname?.length !== 0 &&
    formValue.passwort?.length > 7 &&
    formValue.email?.match(mailformat) &&
    formValue.email === formValue.emailbestaetigt &&
    formValue.passwort === formValue.passwortbestaetigt &&
    this.checkUserAge(formValue.Geburtstag!)
  ) {
    console.log('test');
  } else {
    console.log('test');
  }
}

方法2：使用get()方法获取表单控件并指定类型 #

如果不想定义接口，可以通过FormGroup.get()单独获取控件并强类型声明：

SignUp(): void {
  const mailformat: RegExp = /^\w+([-]?\w+)*@\w+([-]?\w+)*(\.\w{2,3})+$/;
  
  const vorname = this.SignUpForm.get('vorname')?.value as string;
  const nachname = this.SignUpForm.get('nachname')?.value as string;
  const passwort = this.SignUpForm.get('passwort')?.value as string;
  const email = this.SignUpForm.get('email')?.value as string;
  const emailbestaetigt = this.SignUpForm.get('emailbestaetigt')?.value as string;
  const passwortbestaetigt = this.SignUpForm.get('passwortbestaetigt')?.value as string;
  const Geburtstag = this.SignUpForm.get('Geburtstag')?.value as string;

  if (
    this.SignUpForm.valid &&
    vorname.length !== 0 &&
    nachname.length !== 0 &&
    passwort.length > 7 &&
    email.match(mailformat) &&
    email === emailbestaetigt &&
    passwort === passwortbestaetigt &&
    this.checkUserAge(Geburtstag)
  ) {
    console.log('test');
  } else {
    console.log('test');
  }
}

方法3：临时禁用ESLint规则（不推荐） #

仅适合临时调试，会丢失类型检查能力：

// 单条规则禁用
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
this.SignUpForm.value.vorname.length !== 0 &&

// 方法级批量禁用
/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument */
SignUp(): void {
  // 方法内容
}
/* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument */

内容的提问来源于stack exchange，提问作者Teamy