TS quick start - functions

stay TS in , Although classes are already supported , Namespace and module , But functions are still the main place to define behavior

TS Most of the functions in are related to JS identical , The difference is ts Type declaration will be added to the return value and parameters of the function

stay TS in , Functions are still the most basic 、 One of the most important concepts

Function type definition

The definition of function type includes Parameters and Return value Type definition of

1. Directly define function types

function sayMyself(name: string, age: number): string {
    
    return ` I am a ${
      name}, I this year ${
      age} year `;
}

const sayMyself = (name: string, age: number) => {
    
    return ` I am a ${
      name}, I this year ${
      age} year `;
}

console.log(sayMyself(' Warmth key', 23));  //  I am warm key, I this year 23 year 

function printMsg(warn: string): void {
    
    console.warn(' Warning message ', warn);
}

const printMsg = (warn: string): void => {
    
    console.warn(' Warning message ', warn);
}

printMsg(' Warning warning 123');  //  Warning message   Warning warning 123

If the type of the parameter is omitted here ,TypeScript The default parameter is any type ;

If you omit the type of the return value
If the function has no return value , that TypeScript The default function return value is void type ;
If the function has a return value , that TypeScript The return type will be inferred according to the defined logic .

2. type Define function types

/*  First use of type Declare a function  */
type Submit = (user: string, props: object) => string;

/*  Then implement the function according to the declaration of the function  */
const submitHandle: Submit = (user, props) => {
    
    return ` Submit successfully , ${
      user}`
    // return 123 //  Returning a number will report an error , The error message is as follows 
    //  You can't type “(user: string, props: object) => number” Assign to type “Submit”.  You can't type “number” Assign to type “string”.
}

submitHandle(' Warmth key', {
     age: 22 });
// submitHandle(123, { age: 22 }); // error  type “number” Argument to cannot be assigned to type “string” Parameters of .

3. interface Define function types

Function types can be clearly defined using interfaces

interface AddInt {
    
    (x: number, y: number): number;
}

const add: AddInt = (a, b) => {
    
    return a + b
}


//  You can't type “(a: number, b: number) => string” Assign to type “AddInt”.
//  You can't type “string” Assign to type “number”.
// const add: AddInt = (a: number, b: number) => {
    
// return 'wwww'
// }

Function parameter definition

1. Optional parameters

The definition of optional parameters only needs to add a ?

const add = (x: number, y: number, z?: number): number => {
    
    return x + y + ( z ? z : 0 )
}

console.log(add(1 , 2));  // 3
console.log(add(1 , 2, 3));  // 6

The optional parameters can be one or more

const add = (x: number, y?: number, z?: number): number => {
    
    return x + ( y ? y : 0 ) + ( z ? z : 0 )
}

console.log(add(1 , 2));  // 3

Once optional parameters appear, they can only be followed by optional parameters

const add = (x: number, y?: number, z: number): number => {
      // error  Required parameters cannot be after optional parameters 
    return x + ( y ? y : 0 ) + ( z ? z : 0 )
}

2. Default parameters

The default parameter only needs to be assigned an initial value

const add = (x, y = 20) => {
    
    console.log(x + y);
}

add(10);  // 30
add(10, 70);  // 80

When a default parameter is specified for a parameter ,TS Will recognize the default value and infer the type of this parameter . When the function is called , If the actual parameter type is inconsistent with the default parameter type, an error will be reported

const add = (x, y = 20) => {
    
    console.log(x + y);
}

add(10);  // 30
add(10, '70');  // error  type “string” Argument to cannot be assigned to type “number” Parameters of .

Of course, you can also explicitly set the type of default parameters

const add = (x: number, y: number = 20): void => {
    
    console.log(x + y);
}

add(10);  // 30
add(10, 60);  // 70

3. The remaining parameters

The remaining parameters will be treated as an unlimited number of optional parameters . You can have none of them , There can also be any . The compiler will create an array of parameters , The name is in Ellipsis ... The name given later , You can use this array in the function body .

const add = (...args: number[] ) => {
    
    const res = args.reduce((pre, cur) => {
    
       return pre + cur
    })
    console.log(res);
}

add(1, 2, 3); // 6
add(10, 20, 30, 50, 90);  // 200

function overloading

The function names are the same , And multiple functions with different formal parameters

So called function overload is the same function , Depending on the parameters passed , There will be different forms of expression .

stay JS in , Due to the characteristics of weak types and shape participation arguments can not match , There is no such thing as function overloading But in TS in , This syntax exists with other object-oriented languages

//  demand ：  Define a add function , It can receive 2 individual string Type , You can also receive 2 individual number Add parameters of type  

//  Overloaded function declaration 
function add (x: string, y: string): string;
function add (x: number, y: number): number;

//  Define function implementation 
function add(x: string | number, y: string | number): string | number | undefined {
    
    if(typeof x === 'string' && typeof y === 'string') return x + y;
    else if(typeof x === 'number' && typeof y === 'number') return x + y;
}

console.log(add(1, 2));  // 3
console.log(add(' Warmth ', 'key'));  //  Warmth key


console.log(add(1, 'key'));  //  The error information is as follows 
//  The first  1  Heavy haul ( common  2  individual ),“(x: string, y: string): string”, The following error occurred .
//  type “number” Argument to cannot be assigned to type “string” Parameters of .
//  The first  2  Heavy haul ( common  2  individual ),“(x: number, y: number): number”, The following error occurred .
//  type “string” Argument to cannot be assigned to type “number” Parameters of .

Be careful : Function overloading can only use function To define , Out of commission interfacetype To define .