typeScript中的函数
// 函数的定义 //es5定义函数的方法 /* //函数声明法 function run(){ return 'run'; } //匿名函数 var run2=function(){ return 'run2'; } */ //ts中定义函数的方法 //函数声明法 // function run():string{ // return 'run'; // } //错误写法 // function run():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 getInfo=function(name:string,age:number):string{ // return `${name} --- ${age}`; // } // alert(getInfo('zhangsan',40)); //没有返回值的方法 // function run():void{ // console.log('run') // } // run(); // 3.2、方法可选参数 // es5里面方法的实参和行参可以不一样,但是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')) */ // 3.3、默认参数 可选参数 // es5里面没法设置默认参数,es6和ts中都可以设置默认参数 /* function getInfo(name:string,age:number=20):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} ---年龄保密`; } } // alert( getInfo('张三')); alert( getInfo('张三',30)); */ // 3.4、剩余参数 // function sum(a:number,b:number,c:number,d:number):number{ // return a+b+c+d; // } // alert(sum(1,2,3,4)) ; //三点运算符 接受新参传过来的值 /* function sum(...result:number[]):number{ var sum=0; for(var i=0;i<result.length;i++){ sum+=result[i]; } return sum; } alert(sum(1,2,3,4,5,6)) ; */ /* function sum(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(sum(1,2,3,4,5,6)) ; */ // 3.5、ts函数重载 // 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 getInfo(name:string):string; function getInfo(name:string,age:number):string; function getInfo(name:any,age?:any):any{ if(age){ return '我叫:'+name+'我的年龄是'+age; }else{ return '我叫:'+name; } } // alert(getInfo('zhangsan')); /*正确*/ // alert(getInfo(123)); 错误 // alert(getInfo('zhangsan',20)); // 3.6、箭头函数 es6 //this指向的问题 箭头函数里面的this指向上下文 // setTimeout(function(){ // alert('run') // },1000) setTimeout(()=>{ alert('run') },1000)
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!