typeScript中的函数有一下几种形式:
1、普通函数
2、可选参数
3、默认参数
4、剩余参数
5、函数重载
6、箭头函数
一、普通函数
es5中的普通函数定义:
function run(){ return 'run' }
es5中的匿名函数定义:
var run2 = function(){ return 'run2' }
ts中的普通函数定义:
//ts中的函数声明 function run():string{ return 'run' } // 错误写法 function run1():string{ return 123; }
ts中的匿名函数定义:
var fun2=function():number{ return 123; }
二、可选参数
es5里方法的实参和形参可以不一样,但是ts中必须一样,如果不一样就需要配置可选参数
function getInfo(name:string,age:number):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} --- 年龄保密哦`; } } console.log(getInfo('wen',28))//wen --- 28
console.log(getInfo('wen'))//wen ---年龄保密哦
//注意:可选参数必须配置到参数的最后面
function getInfoSele(name:string,age?:number):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} --- 年龄保密哦`; } }
console.log(getInfoSele('wen',28))//wen --- 28
console.log(getInfoSele('wen'))//wen ---年龄保密哦
三、默认参数
es5中没发设置默认参数,es6和ts中都可以设置默认参数
function getInfoInit(name:string,age:number=18):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} --- 年龄保密哦`; } } console.log(getInfoInit('wen'))//wen --- 18
console.log(getInfoInit('wen',28))//wen --- 28
四、剩余参数
function sum(a:number,b:number,c:number,d:number){ return a+b+c+d; } alert(sum(1,2,3,4));//10
// 三点运算符 接受新参数传过来的值 function sum1(a:number,b:number,...result:number[]):number{ var sum = a+b; for (let i = 0; i < result.length; i++) { sum+=result[i]; } return sum; } alert(sum1(1,2,3,4));
五、ts函数重载
java中方法的重载,重载值得是两个或者两个以上同名阐述,但他们的参数不一样,这是会出现函数重载的情况。
typescript中的重载:通过为同一个函数提供多个函数类定义来实现多种功能目的。
ts为了兼容es5以及es6重载的写法和java中有区别。
//es5中出现同名方法,下面的回替换上面的方法 function css(config){ } function css(config,value){ }
ts中的重载
function getList(name:string):string; function getList(age:number):string; function getList(str:any):any{ if(typeof str === 'string'){ return "我叫:"+str; }else{ return "我的年龄是:"+str; } } alert(getList('wen'));//ok alert(getList(20));//ok alert(getList(true));//error
六、箭头函数
this指向的问题,箭头函数里面的this指向上下文。
setTimeout(()=>{ alert('run'); },1000)