6. Function

Basic use

Like js, ts has two function types: named functions and anonymous functions. But ts functions need to define parameter types and function return value types in advance.

named function

function add(num1: number, num2: number):number {
    
    
    return num1 + num2
}

Anonymous functions
The definition of anonymous functions is relatively troublesome. We need to define the type of the function in advance.

// 直接使用类型推导
//const add = (num1: number, num2: number):number => {
    
    
//    return num1 + num2
//}
// 还可以反向类型推导
//const add: (num1: number, num2: number) => number = (x, y) => x + y
const add: (num1: number, num2: number) => number = (num1: number, num2: number):number => num1 + num2

Function parameters

Each function parameter in ts is required. The number and type of function parameters must be exactly the same before the function can be used.

function add (num1: number, num2: number):number {
    
    
   return num1 + num2
}
// add('1')  Expected 2 arguments, but got 1.
// add('1', 1) Argument of type 'string' is not assignable to parameter of type 'number'.
add(1, 1) 

We can also ?specify a function parameter that is not required. Of course, this parameter needs to be placed at the end of all parameters.

function add (num1: number, num2: number, num3?:number):number {
    
    
   return num1 + num2 + (num3 ? num3 : 0)
}
console.log(add(1, 1) )    // 2
console.log(add(1, 1, 1) ) // 3

We can also set default values ​​for function parameters

function add (num1: number, num2: number, num3:number = 0):number {
    
    
   return num1 + num2 + num3
}
console.log(add(1, 1) )   // 2
console.log(add(1, 1, 1) )// 3

In fact, if you set a default value for the parameter at the end, the effect is equivalent to specifying ?a non-required parameter at the end.

In js, if we don't know how many parameters will be passed in, we can use to argumentsreceive all parameters, or we can use es6 ...to collect them into an array.
And we can do the same in ts

function add (num1: number, num2: number, num3:number = 0):number {
    
    
    console.log(arguments) // {‘0’： 1, '1': 2}
   return num1 + num2 + num3
}
console.log(add(1, 1) )

function add (num1: number, ...arg:number[]):number {
    
    
    console.log(arg) // [2,3,4]
   return num1 
}
console.log(add(1, 2, 3, 4) )

function overloading

The so-called function overloading refers to having multiple function signatures and one function body implementation.

function calculateAverage(nums: number[]): number;
function calculateAverage(str: string): number;
function calculateAverage(arrOrStr: number[] | string): number {
    
    
  if (Array.isArray(arrOrStr)) {
    
    
    let sum = arrOrStr.reduce((a, b) => a + b);
    return sum / arrOrStr.length;
  } else {
    
    
    let nums = arrOrStr.split(',').map(Number);
    let sum = nums.reduce((a, b) => a + b);
    return sum / nums.length;
  }
}

console.log(calculateAverage([1, 2, 3])); // 输出结果为 2
console.log(calculateAverage("1,2,3")); // 输出结果为 2