TypeScript学习——函数的类型

TS中的函数声明

在TS中，需要对函数的输入和输出进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义比较简单：

function sum(x: number, y: number): number{
  return x + y;
}

输入的参数多于或少于要求的参数是不被允许的。

TS中的函数表达式

按照上面的写法，我们可能会这样写函数表达式：

let sum = function(x: number, y: number): number {
  return x + y;
}

上面的例子是可以通过编译的，但是上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的sum，是通过赋值操作进行类型推断而推断出来的。
如果我们要手动给sum添加类型，则应该是这样：

let sum: (x: number, y: number) => number = function(x: number, y: number) {
  return x + y;
}

TS中的=>与ES6中的=>不相同
在TS的类型定义中，=>用来表示函数的定义，左边是输入类型，用括号括起来，右边是输出类型。
在ES6中，=>表示箭头函数，可参考ES6中的箭头函数。

用接口定义函数的形状

我们也可以用接口的方式来定义一个函数需要符合的形状：

interface Fn{
  (x: number, y: number): boolean;
  //左边表示函数的输入类型，右边表示输出类型
}

let fn: Fn;
fn = function(x: number, y: number){
  return x > y
}

可选参数

既然接口能定义可选参数，那么函数同样也能定义可选参数，并且方式与接口定义可选参数的方式相同。

function fn(firstName: string, lastName?: string){
  if(lastName){
    return firstName + '  ' + lastName;
  }else{
    return firstName;
  }
}

let zinkwu = fn('zink', 'wu') ;
let zink = fn('zink');

注意点：在定义可选参数时，必须将其定义在必须参数后面。

参数默认值

在ES6中，我们能给函数的参数添加默认值，在TS中，会将添加了默认值的参数识别为可选参数（这也是定义可选参数的第二种方式）。

function fn(firstName: string = 'zink', lastName: string){
  return fitstName + ' ' + lastName
}

let zinkwu = fn(undefined, 'wu')

使用默认参数之后，也就不受[可选参数必须在必须参数之后]的限制了。

剩余参数

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）：

function push(array: number[], ...items: number[]){
    items.forEach( item => {
        array.push(item)
    })
}

let a = [];
push(a, 1, 2, 3);

使用了剩余参数后，items实际上是一个数组，所以我们将它定义为数组类型。
ES6规定：rest 参数只能是最后一个参数

重载

重载也是面向对象语言中一个重要的概念，允许一个函数接受不同数量或类型的参数，并作出不同的处理。

例如，我们需要实现一个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 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。