函数

es5定义函数的方法

//函数声明法
function run(){
    return 'run';
}
//匿名函数
var run2=function(){
    return 'run2';
}

ts中定义函数的方法

//函数声明法
function run():string{
    return 'run';
}
//匿名函数
var fun2=function():number{
    return 123;
}
alert(fun2());

ts中定义方法传参

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

没有返回值的方法

function run():void{
    console.log('run')
}
run();

方法可选参数

es5里面方法的实参和行参可以不一样,但是ts中必须一样,如果不一样就需要配置可选参数

注意:可选参数必须配置到参数的最后面

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

默认参数  可选参数

es5里面没法设置默认参数,es6和ts中都可以设置默认参数

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

剩余参数(三点运算符)

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));

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));

箭头函数  es6

  this指向的问题  箭头函数里面的this指向上下文

setTimeout(function(){
    alert('run');
},1000);
//可以改写为:
setTimeout(()=>{
    alert('run');
},1000);

 

 

posted @ 2019-08-20 00:41  汝此彩笔  阅读(152)  评论(0编辑  收藏  举报