TypeScript教程(四)函数类型

来源:程序思维浏览:138次
函数类型的约束支持有函数本身的参数约束和返回值约束,如果想支持联合类型的函数关系可以使用重载的方式。
TypeScript函数类型

接下来声明一个参数约束和返回值约束的函数,代码示例如下:

function funcType(name:string,age:number):number{
    return age
}
let ageNum:number=funcType("张三",18);

注意上面代码加粗的地方,funcType函数的参数name为string类型,age为number类型,那么在调用该函数的时候传值必须是相对应的类型,funcType(name:string,age:number)冒号后面的number代表该函数返回的类型必须是number类型,由于funcType函数返回的是number类型,变量ageNum的类型必须也是number类型。

如果函数的参数出现了可选参数可以使用问号来进行约束,代码示例如下:

function funcType(name:string,age:number,gender?:string):string{
    return name
}

funcType("张三",18,"男");
funcType("张三",18);

注意上面代码加粗的地方funcType函数的第三个参数gender是可选参数,在调用该函数时可以传值也可以不传值。

如果函数的参数不确定怎么办呢?可以使用扩展运算符的方式来定义动态参数,代码示例如下:

function dynFuncType(name:string,age:number,...args:any):any{
    console.log(args);//结果:[“11”,”22”,33]
    return args
}
let dynUser:any=dynFuncType("张三",18,"11","22",33);

注意上面代码加粗的地方在dynFuncType函数的第三个参数的位置使用...args:any的方式定义动态参数由于未来参数的类型不确定所以使用any定义类型,这样就实现了动态参数,这种方式和ES6是一样的。

函数的参数也可以设置默认值,这一点和ES6是一样的,区别就是要给参数设置一个类型约束。看一下代码示例:

function funcType(name:string="张三",age:number=18):number{
    return age;
}

看一下上面代码加粗的地方,funcType函数的第一个参数name的类型为string,默认值为“张三”,第二个参数age的类型为number,默认值为“18”,注意这个函数返回的类型是number类型,所以返回的参数是age而不是name。

也可以声明表达式类型的函数,代码示例如下:

let funcType:(name:string,age:number)=>number=function(name:string=”张三”,age:number=20):number{
    return age
}

注意上面代码加粗的地方,声明变量funcType约束的类型是一个箭头函数,这个箭头函数有两个参数第一个参数name约束类型为string,第二个参数age约束类型为number,返回值的类型为number,接下来在声明函数的时候就要按照这个约束来声明可以看到function()的第一个参数是name类型为string,,默认值为“张三”,第二个参数为age类型为number,默认值为20,返回的值是age参数其类型为number。

也可以使用接口来约束函数,代码示例如下:

interface IFuncType{
    (name:string,age:number):number;
}
let funcType:IFuncType=function(name:string,age:number):number{
    return age;
}

看一下代码加粗的地方,接口IFuncType约束类型和表达式函数的约束类型格式类似只是将“=>”换成了“:”,意思是约束一个函数有两个参数第一个参数为name约束的类型为string,第二个参数为age约束的类型为number,返回值的类型为number,接下来在变量funcType使用该接口并且声明函数,声明的函数约束格式必须与接口对应。

对于联合类型的函数,可以使用重载的方式实现,代码示例如下:

//重载
function getValue(value:number):number;
function getValue(value:string):string;
//联合类型的函数
function getValue(value:string|number):string|number{
    return value;
}
let val:string=getValue("张三");
let val2:number=getValue(18);

注意上面代码加粗的地方,声明联合类型的函数getValue其参数value约束的类型为string或number,返回值的类型也是string或number,接下来声明变量val类型为string,调用函数getValue(“张三”),传参为string类型。再声明一个变量val2类型为number,调用函数getValue(18),传参为number类型。这时会报错,需要使用重载来解决这个问题:

//重载
function getValue(value:number):number;
function getValue(value:string):string;

以上代码为函数的重载,只需要重新定义函数及参数类型和返回值的约束即可,需要注意的是重载函数参数的类型及返回类型必须是联合类型函数的参数类型及返回类型,而且必须在联合类型函数的上方定义。

如果函数没有返回值可以使用void来定义,代码示例如下:

//void规定函数没有返回值
function fun():void{
    let age=20
}

注意上面代码加粗的地方,在fun函数中并没有return返回值所以使用void来规定。
精品好课
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
收藏
扫一扫关注我们