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