TypeScript中的函数

TypeScript中的函数相比ES5新增了一些功能，比如规范了传参的类型，函数返回值的类型，可选参数， 默认参数，剩余参数，函数重载等。

一、函数的定义

函数的定义和ES5一样有两种方式，函数表达式和函数声明式。TypeScript声明的函数需要规定函数返回的数据类型。
函数表达式

let person = ():string=>{
  return 'hello world';
};

函数声明式

function person():string{
  return 'hello world';
};

如果函数没返回值的话用void即可。

function person():void{
  console.log('hello world');
};

二、函数可选参数

在ES5中，函数的形参和实参的个数可以不一样，但是在TypeScript必须一样。

function person(name:string,age:number):string{
  return `我的名字叫${name}，我的年龄是${age}`;
};

console.log(person("don",26)); //我的名字叫don，我的年龄是26

如果只想传name，不传age的话可以设置成可选参数，可选参数必须放到形参列表的最后。

function person(name:string,age?:number):string{
  return `我的名字叫${name}，我的年龄是${age}`;
};

console.log(person("don")); //我的名字叫don，我的年龄是undefined

三、函数默认参数

在ES5中，函数无法设置默认参数，但是在ES6和TypeScript中可以设置。

function person(name:string,age:number=18):string{
  return `我的名字叫${name}，我的年龄是${age}`;
};

console.log(person("don")); //我的名字叫don，我的年龄是18

这里如果不传age的话默认会将age设置成18，默认参数必须放到形参列表的最后。

四、函数剩余参数

想实现一个函数，功能是累加所有参数。由于无法预估函数传入参数的个数，所以可以用剩余参数，...rest可用于接收剩余参数，rest本身是个数组，rest参数只能放在函数形参列表最后。

function total(a:number,b:number,...rest:number[]):number{
  let sum = a+b;
  return rest.reduce(res=>{
    sum += res;
    return sum;
  },sum);
};
console.log(total(1,2,3,4,5,6));

四、函数的重载

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。
比如，我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 'hello' 的时候，输出反转的字符串 'olleh'。

利用联合类型，我们可以这么实现：

function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
};

然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。
这时，我们可以使用重载定义多个 reverse 的函数类型：

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

上例中，我们重复定义了多次函数 reverse，前几次都是函数定义，最后一次是函数实现。在编辑器的代码提示中，可以正确的看到前两个提示。
注意，TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。