Angular自定义表单验证器继承Validators报TS2417错误如何解决

在Angular项目中开发自定义表单验证器时，尝试继承Angular表单内置的Validators类重写required静态校验方法，初始实现代码如下：

import {AbstractControl, Validators} from "@angular/forms";

export class Form extends Validators{
  static required(control: AbstractControl){
    return super.required(control) ?
      {required: true} :
      undefined
  }
}

代码编译阶段抛出TS2417类型错误，具体错误信息：

TS2417: Class static side 'typeof Form' incorrectly extends base class static side 'typeof Validators'.
The types returned by 'required(...)' are incompatible between these types.
Type '{ required: boolean; } | undefined' is not assignable to type 'ValidationErrors | null'.
Type 'undefined' is not assignable to type 'ValidationErrors | null'

• Angular内置表单验证器的方法签名有明确类型约束：返回值必须为ValidationErrors | null，即校验失败返回错误对象，校验通过必须返回null，undefined不属于约定的合法返回值
• 子类重写父类静态方法时，返回值类型必须和父类方法签名完全兼容，原代码在校验通过分支返回undefined，和父类要求的null类型不匹配，因此触发类型校验报错

• 调整校验通过分支的返回值，将undefined替换为符合类型约定的null
• 从@angular/forms引入ValidationErrors类型，显式标注重写方法的返回值类型，避免TS自动推断出不符合预期的类型
• 若使用Angular 14+配套的TS版本，给重写的静态方法加上override关键字，明确标识方法重写逻辑，后续父类方法签名变更时可获得更清晰的编译提示

修复后的完整代码：

import {AbstractControl, Validators, ValidationErrors} from "@angular/forms";

export class Form extends Validators{
  static override required(control: AbstractControl): ValidationErrors | null {
    return super.required(control) ?
      {required: true} :
      null
  }
}

注意：不要用undefined、false等其他假值替代校验通过时的null返回值，否则不仅会触发TS类型错误，还可能导致Angular表单的校验状态判断逻辑异常。

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