“（control：AbstractControl）：{[key：string]：any} |是什么？ null =>”吗？

Question

I'm new to TypeScript and Angular but I have a pretty good background in C#.

I'm reading this article , specifically "Custom validators" and this snippet

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

What does this line of code do/mean? Is this TypeScript's way of defining a delegate?

(control: AbstractControl): {[key: string]: any} | null => {

Answer 1

This is an arrow function . To understand it, you can read it as

function (control: AbstractControl): {[key: string]: any} | null {
  const forbidden = nameRe.test(control.value);
  return forbidden ? {'forbiddenName': {value: control.value}} : null;
};

That is, the function returns type {[key: string]: any} (an object with key(s) declared as variable named key , and value type can be any), or null ; while the function requires input value with Angular type AbstractControl .

In TypeScript, a colon is frequently used in two ways:

1. In an object, such as { key: value }
2. Define the type of a value, which might be your question in this case.

Hope this helps. Welcome to the world of Angular & TypeScript!