typescript - 3.函数
(1)函数的定义
函数声明法
// 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();
(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))
(3)默认参数 可选参数
es5里面没法设置默认参数,es6和ts中都可以设置默认参数
function getInfo(name:string,age:number=20):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密`;
}
}
(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)) ;
(5)函数重载
- java中方法的重载:重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况。
- typescript中的重载:通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
ts为了兼容es5 以及 es6 重载的写法和java中有区别。
//es5中出现同名方法,下面的会替换上面的方法
/*
function css(config){
}
function css(config,value){
}
*/
es5出现同名方法会覆盖前面,下面看ts中的重载
示例1:
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)); //错误写法
示例2:
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));
(6)箭头函数
注意:this指向的问题 箭头函数里面的this指向上下文
//es5
// setTimeout(function(){
// alert('run')
// },1000)
setTimeout(()=>{
alert('run')
},1000)