自我介绍:大家好,我是吉帅振的网络日志(其他平台账号名字相同),互联网前端开发工程师,工作5年,去过上海和北京,经历创业公司,加入过阿里本地生活团队,现在郑州北游教育从事编程培训。
一、前言
在JavaScript中,函数是构建应用的一块基石,我们可以使用函数抽离可复用的逻辑、抽象模型、封装过程。在TypeScript中,虽然有类、命名空间、模块,但是函数同样是最基本、最重要的元素之一。在TypeScript里,我们可以通过function字面量和箭头函数的形式定义函数,示例如下:
functionadd(){}
constadd=()={}
我们还可以显式指定函数参数和返回值的类型,示例如下。
constadd=(a:number,b:number):number={
returna+b;
}
二、返回值类型
在JavaScript中,我们知道一个函数可以没有显式return,此时函数的返回值应该是undefined:
functionfn(){
//TODO
}
console.log(fn());//=undefined
需要注意的是,在TypeScript中,如果我们显式声明函数的返回值类型为undfined,将会得到如下所示的错误提醒。
functionfn():undefined{//ts()Afunctionwhosedeclaredtypeisneithervoidnoranymustreturnavalue
//TODO
}
void类型来表示函数没有返回值的类型,示例如下:
functionfn1():void{
}
fn1().doSomething();//ts()PropertydoSomethingdoesnotexistontypevoid.
我们可以使用类似定义箭头函数的语法来表示函数类型的参数和返回值类型,此时=类型仅仅用来定义一个函数类型而不用实现这个函数。需要注意的是,这里的=与ES6中箭头函数的=有所不同。TypeScript函数类型中的=用来表示函数的定义,其左侧是函数的参数类型,右侧是函数的返回值类型;而ES6中的=是函数的实现。如下示例中,我们定义了一个函数类型,并且使用箭头函数实现了这个类型。
typeAdder=(a:number,b:number)=number;//TypeScript函数类型定义
constadd:Adder=(a,b)=a+b;//ES6箭头函数
在对象中,除了使用这种声明语法,我们还可以使用类似对象属性的简写语法来声明函数类型的属性,如下代码所示:
interfaceEntity{
add:(a:number,b:number)=number;
del(a:number,b:number):number;
}
constentity:Entity={
add:(a,b)=a+b,
del(a,b){
returna-b;
},
};
在某种意义上来说,这两种形式都是等价的。但是很多时候,我们不必或者不能显式地指明返回值的类型,这就涉及可缺省和可推断的返回值类型的讲解。
三、可缺省和可推断的返回值类型
幸运的是,函数返回值的类型可以在TypeScript中被推断出来,即可缺省。函数内是一个相对独立的上下文环境,我们可以根据入参对值加工计算,并返回新的值。从类型层面看,我们也可以通过类型推断加工计算入参的类型,并返回新的类型,示例如下:
function