TypeScript-函数

函数定义

1. 函数声明

对应于ES5中的函数声明法定义方式，ts中需要定义函数的返回值类型:

function sayHello(): string {
    return 'Hello!'
}

2. 函数表达式

对应于ES5中的函数表达式定义方式，ts中需要定义函数的返回值类型:

const sayHello = function(): string {
    return 'Hello!'
}

当函数为传参函数时，需要声明参数的类型。通过函数表达式定义一个传参函数：

const makeASentence = function(name: string, num: number): string {
    return `${name} planted ${num} trees.`
}

调用该函数时，如传入参数与事先声明的参数类型不匹配，则编译不通过，如果函数没有返回值，则声明返回值类型为void。

const sayHello = function(): void {
    console.log(‘Hello!’)
}

函数传参

1. 可选参数

ES5中函数的实参和形参可以不同，而TypeScript中则需保持一致，也就是说调用函数时传入的实参个数和类型需和函数定义时的形参个数和类型相同，因此选择性传递的参数可以在参数名后面加？将其设置为可选参数。

const makeASentence = function(name: string, num?: number): string {
    if(num) {
        return `${name} planted ${num} trees.`
    } else {
        return `${name} didn't go out on Arbor Day.`
    }
}

可选参数可以有多个，而且必须最后声明。

2. 默认参数

ts在定义函数时，可以给参数设置默认值

const makeASentence = function(name: string, num: number = 5): string {
    return `${name} planted ${num} trees.`
}
console.log(makeASentence('Lily')); // Lily planted 5 trees.
console.log(makeASentence('Lily', 10)); // Lily planted 10 trees.

3. 剩余参数

定义函数时，可以通过三点运算符接收参数

const sum = function(...res: number[]): number {
    return res.reduce((pre,cur) => {
        return pre + cur;
    })
}
console.log(sum(10, 8, 19, 1, 7)); // 45

const sum = function(num1: number, num2: number, ...res: number[]): number {
    let sum = num1 + num2;
    res.forEach((item: number) => {
        sum += item;
    })
    return sum;
}
console.log(sum(10, 8, 19, 1, 7)); // 输出45，其中num1 = 10，num2 = 8, 其他参数放入res数组

函数重载

在ES5中，如果出现了同名函数，后定义的函数会覆盖先定义的函数，ts中支持函数的重载。

function func(name: string): string;
function func(num: number): string;
function func(val: any): any { // 如果要进行函数重载判断,则该函数的形参以及返回值的类型必须要包含另外的同名函数的参数类型和返回值类型
  // 根据传入参数类型的不同进入不同的重载函数中
  if (typeof val === "string") {
    return "我是" + val;
  } else {
    return `我种了${val}棵树`;
  }
}
console.log(func("张三")); // 我是张三
console.log(func(18)); // 我种了18棵树
console.log(func(true)); // 报错,经过重载之后，尽管函数参数类型是any，但只能传入定义过的参数类型，也就是string和number类型

TypeScript中函数重载时也可以传入可选参数,根据参数的类型选择进入不同的重载函数。

function func(name: string): number;
function func(name: string, num: number): string;
function func(name: any, num?: any): any { 
  if (num) {
    return `我是${name}，我种了${num}棵树`
  } else {
    return 666;
  }
}

console.log(func("张三", 18)); // 我是张三,我种了18棵树
console.log(func("张三")); // 666
console.log(func("张三", true)); // 错误，在重载函数中找不到对应参数类型的函数