Function（函数分享）第二节

一、类型注解

1.1 类型注解

函数的类型注解分为两个部分：参数类型注解和返回值类型注解。其中返回值类型注解有时候我们可以直接省略，因为Typescript可以根据返回的语句来自动判断出返回值的类型。

function add (x: number, y: number): number {
    return x + y;
} // 匿名函数完整的参数注解；
let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; }; // 匿名函数表达式完整的参数注解；
/*这其中，表达式左右的类型注解中，参数名称可以不一致，我们需要把顺序对应上即可。当函数没有返回值的时候，我们用void类型进行注解。*/

当我们指定了赋值语句一侧的类型之后，我们是可以忽略另一侧的类型注解，在Typescript的类型推论中，被称作“按上下文归类”。

let myAdd = function(x: number, y: number): number {
  return x + y;
}; //省略左侧的类型注解
let myAdd: (baseValue: number, increment: number) => number = function(x, y) { return x + y; };
// 省略右侧的类型注解，并且左右侧的参数名称并不相同。

除了基本的类型注解之外，我们还有其他的方式来描述这两部分类型。

例如使用变量来单独定义参数：

let param: { a: number };
function foo(param) {}

还可以利用接口的形式定义参数：

interface Param {
    a: number;
}
function foo (param: Param): number {
    return 1;
}

同时我们也可用这些方法去定义返回值的类型。

除此之外，我们还可以利用接口直接定义函数：

interface SearchFunc {
    (a: number, b: number): number;
}
let search : SearchFunc;
search = function(a: number, b: number) {
    return a+b;
}

1.2 可选参数和默认参数

在Typescript中定义函数是，定义了参数的个数及类型。当调用该函数时，必须严格遵守其个数和参数类型。但是在Javascript中，我们可以选择性传递参数，当某个参数不传值的时候，该参数的值为undefined。在TS中，我们可以使用？来表示该参数为可选参数。

let myAdd = function (a: number, b?: number) { //b为可选参数
    if (b === undefined) {
        return a;
    }
    return a + b;
}

除了使用可选参数之外，我们还可以给参数设置默认值：

let myAdd = function (a: number, b = 0) { //b不传值时，该值为0
    return a + b
}

1.3 剩余参数

当传入的参数不确定数量时，可以使用…来表示剩余参数，进行传值。这与ES6中的用法是一致的。

function plus(firstNum: number, ...restofNum: number[]) {
    return firstNum + restofNum.reduce((a, b) => a + b);
} // 我们用一个数字类型的数组来规定剩余参数的类型。
let a = plus(1, 2, 3, 4);
console.log(a); //10

二、函数重载

我们在JS中定义的函数，可以接受任意的参数，这里的任意有两层意义：一个是任意个数，一个是任意类型（JS中没有类型检查机制）。因此我们在构建一个健壮性足够强的函数时，通常会用if语句或switch语句在其中进行类型或个数的判断，来执行不同的逻辑。这在代码的意义上，也算是一种重载。但是其最大的问题在于，重载的逻辑是耦合在一起的，没有做到逻辑分离。然而TS的重载，实际上也没有很好的解决这个问题。

我们在声明重载的时候需要注意以下几点：

• 重载函数只有函数声明，没有函数体。其本质是记录你调用函数的方式。
• 函数实现必须紧跟函数重载声明。
• 重载函数必须和其实现的参数个数保持一致，不能出现函数实现中不能满足的重载声明。

function padding(all: number); // 当传入一个值的情况；
function padding(topAndBottom: number, leftAndRight: number) : {
    top: string;
    right: string;
    bottom: string;
    left: string;
}; //传入两个值的情况
function padding(top: number, right: number, bottom: number, left: number) : {
    top: number;
    right: number;
    bottom: number;
    left: number;
}; //传入四个值的情况
function padding(a: number, b?: number, c?:number, d?:number) {
    if (b === undefined && c === undefined && d === undefined) {
        b = c = d = a;
    } else if (c === undefined && d === undefined) {
        c = a;
        d = b;
    }
    return {
        top: a,
        right: b,
        bottom: c,
        left: d,
    };
}
/*函数实现体内，通过if来处理不同参数情况的逻辑*/