TypeScript functions

TypeScript function is based on es6 function features added some back-end concepts: generalization, parameter type declaration, return value type declaration, overloading, decorators, etc.. Some other features: arrow functions, generators, async-await, promise, etc. are all added features of es6.

Function Type

JavaScript function parameters can be any type, TypeScript added to the parameters to mention the added type, the function itself to add the return value type.

function greetNane(name: string): string {
  return `hello ${name}`
}

There is another way of declaring functions.

let greetNane: (name: string) => string = function (name: string): string {
    return `hello ${name}`
}

TypeScript will report an error if the type and number of arguments passed in a function call do not match the function declaration.

Optional and default parameters

Optional parameter: TypeScript set function in a parameter can be passed or not passed.

let greetNane: (name: string, age?: number) => string = function (name: string, age?: number): string {
    return `hello ${name}`
}

Default parameters: Write the same default parameters as es6, you can also add the type after the parameters.

let greetNane: (name: string, age: number = 0) => string = function (name: string, age: number = 0): string {
    return `hello ${name} ${age}`
}

let greetNane: (name: string, age = 0) => string = function (name: string, age = 0): string {
    return `hello ${name} ${age}`
}

Remaining parameters

TypeScript remaining parameters and es6 is written in a similar way, also followed by a parameter type.

let greetNane: (name: string, ...arrs: string[]) => string = function (name: string, ...arrs: string[]): string {
    return `hello ${name} ${age}`
}

… The usage is the same as in es6.

Note: Because the mainstream browsers now do not fully support es6, all es6 and typescript in the actual project are finally converted to es5 writing. The remaining arguments are converted to es5 by traversing the arguments argument to the arrs array.

var arrs=[];
for (var _i = 0, coumt = arguments.length; i < coumt; i++) {
   arrs[_i]=arguments[_i];
}

If you think this may cause performance problems for your application, you should consider using only arrays as arguments without the remaining parameters.

Heavy load

Function overloading or method overloading is the ability to create multiple methods with the same name and with different types of number of parameters.

The function is implemented in typeScript by declaring the function tag and finally implementing the function in a tag.

function greetNane(name:string) :string;
function greetNane(name:number) :number;
function greetNane(name:boolean) :boolean;
function greetNane(name:(string|number|boolean)):any{
    return name;
}

Flood type

Scopes, this, and arrow functions will not be mentioned, but directly to the generic type, generic to create reusable components, a component can support multiple types of data.

function greetNane<T>(name:T):T{
    return name
}

greetNane<string>('name')
greetNane('name')

The function returns the value of the corresponding type according to the type of the argument.