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