3 .typeScript中的函数

函数的定义

• 函数传递参数时要指定类型，函数返回值也要指定类型；
• 函数声明：使用function关键字声明一个函数，在指定一个函数名。
• 函数表达式：使用function关键字声明一个函数，但是未给函数命名，最后将匿名函数赋予给一个变量

es5的定义方法

//函数声明法 function run(){ return 'run'; } //函数表达式 var run2=function(){ return 'run2'; } 

ts中定数的方法

//函数声明法 function run():string{ return 'run'; } // 错误写法 function run2():string{ return 123; } //函数表达式 var fun2=function():number{ return 123; } alert(fun2()); /*调用方法*/

ts中定义方法传参

function getInfo(name:string,age:number):string{ return `${name} --- ${age}`; } alert(getInfo('zhangsan',20)); var getInfo2=function(name:string,age:number):string{ return `${name} --- ${age}`; } alert(getInfo2('zhangsan',40));

没有返回值的方法：void表示没有任何类型，一般用于定义方法的时候方法没有返回值。

function run():void{ alert('run') } run();

typeScript中函数的可选参数

ts中实参和形参必须一样，如果不一样就需要配置可选参数

用? 来说明元素是可选的，可选参数必须配置到参数的最后面

可选元素必须在必选元素的后面，也就是如果一个元素后缀了 ?号，其后的所有元素都要后缀 ?号。

正确写法

function getInfo(name:string,age?:number):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} ---年龄保密`; } } alert(getInfo('zhangsan')) alert(getInfo('zhangsan',123))

错误写法

function getInfo(name?:string,age:number):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} ---年龄保密`; } } alert(getInfo('zhangsan'))

typeScript中函数的默认参数｜可选参数：es5里面没法设置默认参数，ts可以设置默认参数

默认参数

function getInfo(name:string,age:number=20):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} ---年龄保密`; } } alert( getInfo('张三')); alert( getInfo('张三',30));

typeScript中函数的剩余参数

function sum(a:number,b:number,c:number,d:number):number{ return a+b+c+d; } alert(sum(1, 2, 3, 4));

扩展运算符 数组接受形参传过来的值

function sum2(...result:number[]):number{ var sum=0; for(var i=0;i<result.length;i++){ sum+=result[i]; } return sum; } alert(sum2(1,2,3,4,5,6)) ; function sum3(a:number,b:number,...result:number[]):number{ var sum=a+b; for(var i=0;i<result.length;i++){ sum+=result[i]; } return sum; } alert(sum3(1,2,3,4,5,6)) ;

typeScript中函数的函数重载

• JavaScript是面向过程的语言，没有重载的概念
• java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
• typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。【同名函数传入不同参数，执行出不同的结果】
• ts为了兼容es5 以及 es6 重载的写法和java中有区别。

es5中出现同名方法，下面会替换上面的方法

function css(config){} function css(config,value){}

ts中的重载，参数校验

function getInfo(name:string):string; function getInfo(age:number):string; function getInfo(str:any):any{ if(typeof str==='string'){ return '我叫：'+str; }else{ return '我的年龄是'+str; } } alert(getInfo('张三'));//正确 alert(getInfo(20));//正确 alert(getInfo(true));//错误写法 function getInfo2(name:string):string; function getInfo2(name:string,age:number):string; function getInfo2(name:any,age?:any):any{ if(age){ return '我叫：'+name+'我的年龄是'+age; }else{ return '我叫：'+name; } } alert(getInfo2('zhangsan')); /*正确*/ alert(getInfo2(123)); //错误 alert(getInfo2('zhangsan',20)); 

typeScript中函数的箭头函数、es6

setTimeout(function(){ alert('run') },1000) setTimeout(()=>{ alert('run1') },1000)

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/typescriptbc/11198.html