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来处理不同参数情况的逻辑*/
posted @ 2020-11-20 10:46  yxl87  阅读(165)  评论(0编辑  收藏  举报