Angular自定义验证器forbiddenNameValidator代码疑问解析

先把你提到的代码片段格式化后清晰展示：

/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

问题1：第三行return (control: AbstractControl): {[key: string]: any}是标注Lambda函数的返回类型吗？ #

没错，你理解的方向是对的，不过要纠正一个小细节：原代码里的返回类型标注是{[key: string]: any}，不是() => {}哦。这行完整的箭头函数类型标注拆解来看：

• control: AbstractControl是这个箭头函数的参数类型，表示它接收一个AbstractControl类型的参数（也就是表单控件的实例）
• {[key: string]: any}是这个箭头函数的返回类型，说明它要么返回一个包含错误键值对的对象（验证不通过时），要么返回null（验证通过时）。这个返回类型其实对应Angular内置的ValidationErrors类型，本质就是带字符串索引签名的对象。

问题2：forbiddenNameValidator需返回ValidatorFn，是否可将ValidatorFn理解为ValidatorFunction？ #

完全可以！ValidatorFn就是Angular为了代码简洁性定义的类型别名，把它理解为"Validator Function"（验证器函数）完全准确。在Angular的类型定义里，ValidatorFn的本质就是一个函数类型：

type ValidatorFn = (control: AbstractControl) => ValidationErrors | null;

它和你理解的“验证器函数”是同一个概念，只是用简写的别名来简化日常代码书写而已。

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