TypeScript interface function syntax

Question

I want to understand the syntax of the following TypeScript function.

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;
                          };
}

Here: AbstractControl: https://angular.io/api/forms/AbstractControl

My understanding is:

forbiddenNameValidator: name of the user defined function.
nameRe: RegExp: Argument to function - forbiddenNameValidator.
ValidatorFn: Return type of the function - forbiddenNameValidator.

From here: https://angular.io/api/forms/ValidatorFn

interface ValidatorFn
{
  (control: AbstractControl): ValidationErrors | null
}

That documentation says that (control: AbstractControl): ValidationErrors | null is a function.

Which symbol here shows that it is a function? I had read that => symbol represents functions.

Nicholas Tower · Accepted Answer · 2020-06-29 16:14:29Z

Which symbol here shows that it is a function? I had read that => symbol represents functions.

There's a few different ways to create function types. The one you see here only occurs if you're defining an interface, and want to specify that that interface is also callable. The syntax is to have the argument list on the left hand side wrapped in parentheses, then a colon, then the return value on the right hand side.

You can see more about this particular syntax here: https://www.typescriptlang.org/docs/handbook/interfaces.html#function-types

And other ways of doing functions here, including the => version you're familiar with: https://www.typescriptlang.org/docs/handbook/functions.html

How does control: AbstractControl receive the argument in the following part of that code?

These lines are merely creating and then returning the validator function. No control object exists yet. Eventually someone will call this new validator function, and it will be their responsibility to pass in an appropriate object.

Collectives™ on Stack Overflow

TypeScript interface function syntax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related