Type of function

wang xiao bo 's photo
wang xiao bo
·

3 min read

A function has input and output. To constrain it in TypeScript, both input and output need to be considered. The type definition of the function declaration is simpler:

function sum(a:number, b:number): number {
     return a + b
}
sum(6,8)

Note that inputting redundant (or less than required) parameters is not allowed

Function expression If we were to write a definition of a function expression (Function Expression) now, it might be written like this:

let  somSum = function(a: number, b: number): number {
     return a + b
}

This can be compiled, but in fact, the above code only defines the type of anonymous functions on the right side of the equal sign, and somSum on the left side of the equal sign is inferred by type inference through assignment operations. If we need to manually add a type to somSum, it should be like this:

let somSum = (a:number, b：number) => number = function(a: number, b: number): number {
     return a + b
}

Be careful not to confuse the == in TypeScript with the == in ES6. In the type definition of TypeScript, => is used to indicate the definition of the function. The left side is the input type, which needs to be enclosed in parentheses, and the right side is the output type.

Define the shape of the function with an interface We can also use the interface to define the shape that a function needs to conform to:

interface SearchFunc {
   (a: string, b: string): boolean
}

let mySearch: SearchFunc;
mySearch = function(a:string, b:string) {
    returna.search(b) !== -1;
}

When using the function expression | interface to define a function, the type restriction on the left side of the equal sign can ensure that the number of parameters, parameter types, and return value types remain unchanged when assigning a function name in the future.

Optional parameters

As mentioned earlier, the input of redundant (or less than required) parameters is not allowed. So how to define optional parameters? Similar to the optional attributes in the interface, we use? To indicate optional parameters:

function handName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = handName('Tom', 'Cat');
let tom = handName('Tom');

It should be noted that optional parameters must be followed by required parameters. In other words, no required parameters are allowed after optional parameters:

function handName(firstName?: string, lastName: string) {
    if (firstName) {
        return firstName + ' ' + lastName;
    } else {
        return lastName;
    }
}
let tomcat = handName('Tom', 'Cat');
let tom = handName(undefined, 'Tom');

// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.

Parameter default value In ES6, we allow default values ​​to be added to function parameters, and TypeScript will recognize parameters with default values ​​added as optional parameters

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

At this time, it is not restricted by "optional parameters must be followed by required parameters":

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

rest function In ES6, you can use...rest to get the remaining parameters (rest parameters) in the function:

function push(arr, ...items) {
   items.forEach((item) => arr.push(item))
}

let a:any[] = []
push(a, 1, 2, 3)

In fact, items is an array. So we can define it with the type of the array:

function push(arr: any[], ...items: any[]) {
   items.forEach((item) => arr.push(item))
}

let a = []
push(a, 1, 2, 3)

Note that the rest parameter can only be the last parameter. Regarding the rest parameter

TypeScript