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来处理不同参数情况的逻辑*/

巴特西