Angular 15.1.0编译TS2769错误修复咨询（原5.0.0示例兼容）

问题背景 #

基于Angular 5.0.0开发的表单验证示例升级至15.1.0版本后，编译出现TS2769类型错误，核心报错信息如下：

错误：src/app/app.component.ts:16:5 - error TS2769: 没有匹配的重载调用。
  重载3（共5个）：'(value: string | FormControlState<string>, validatorOrOpts?: ValidatorFn | ValidatorFn[] | FormControlOptions | null | undefined, asyncValidator?: AsyncValidatorFn | ... 2 more ... | undefined): FormControl<...>'，给出以下错误。
    参数类型'(control: FormControl<any>) => ValidationErrors | null'无法赋值给参数类型'ValidatorFn | ValidatorFn[] | FormControlOptions | null | undefined'。
      类型'(control: FormControl<any>) => ValidationErrors | null'无法赋值给类型'ValidatorFn'。
        参数'control'的类型不兼容。
          类型'AbstractControl<any, any>'缺少类型'FormControl<any>'的以下属性：defaultValue、registerOnChange、registerOnDisabledChange

错误原因 #

Angular 15+版本对表单验证器的类型约束更严格：

• 官方定义的ValidatorFn接口要求参数类型为AbstractControl（FormControl、FormGroup、FormArray的父类），而非旧版本允许的具体FormControl类型。
• 原验证器函数直接接收FormControl作为参数，不符合新版本的类型规范，导致类型检查失败。

修复步骤 #

1. 修改验证器函数的参数类型 #

找到CreditCardValidator中的validateCcNumber方法，将参数类型从FormControl<any>改为AbstractControl（或更精确的AbstractControl<any, any>）：

// 原代码
static validateCcNumber(control: FormControl<any>): ValidationErrors | null {
  // 原有验证逻辑
}

// 修改后代码
import { AbstractControl, ValidationErrors, FormControl } from '@angular/forms';

static validateCcNumber(control: AbstractControl): ValidationErrors | null {
  // 如果逻辑中需要访问FormControl专属属性，先做类型断言
  const formControl = control as FormControl;
  // 原有验证逻辑保持不变
}

2. 确认FormControl初始化代码 #

确保FormControl的初始化传参符合新版本重载要求，示例代码如下：

creditCardControl = new FormControl('', CreditCardValidator.validateCcNumber);

只要验证器函数的参数类型修改正确，此代码会自动符合ValidatorFn类型约束，无需额外调整。

验证 #

修改后重新编译项目，TS2769错误会被消除，验证器功能可正常运行。

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