typescript(三)--ts中函数

如题。

ts中函数语法大致和es6一致，因为ts中也兼容es5的语法，故es5的代码在ts中也并不会报错。又因为ts比js多了可选的类型，故ts的语法看起来更像传统面向对象编程语言(如java、c#等)的语法。

ts中函数(方法)：

  函数的定义
  可选参数
  默认参数
  剩余参数
  函数重载
  箭头函数 es6

===========================================

1、函数定义。

//1 函数的定义
 
//es5函数声明
function f(){
  console.log("hello f");
}
 
//es5 匿名函数
var f2=function () {
    console.log("hello f2");
}
 
f2();//调用函数
 
//ts中没有返回值的函数
function run():void{  console.log('run')
}
run();//调用函数
 
//ts中指定返回值类型(number)的函数
var run2=function():number{
    //return "aa";//ts编译报错
    return 123;
}
console.log(run2());//调用函数

2、函数可选参数

//2 可选参数
 
// es5里面方法的实参和形参数量可以不一样，但是ts中必须一样，如果不一样就需要配置函数可选参数。
//注意:可选参数必须放到形参列表的最后
 
 function getInfo(name:string,age?:number):string{
 
         if(age){
 
             return "我的姓名:"+name+",年龄:"+age;
         }else{
 
             return "我的姓名:"+name;
         }
 }
console.log((getInfo('zhangsan')));
console.log((getInfo('zhangsan', 123)));

3、函数默认参数

//3 默认参数
 
// es5里面函数没法设置默认参数，es6和ts中函数都可以设置默认参数
//这里设置age参数的默认值为20，默认参数只能放到形参列表最后。
        function getInfo(name:string,age:number=20):string{
                    if(age){
 
                        return "我的姓名:"+name+",年龄:"+age;
                    }else{
 
                        return "我的姓名:"+name;
                    }
 
 
        }
 
console.log( getInfo('张三'));
console.log( getInfo('张三',30));

4、函数剩余(rest)参数

// 4、剩余参数
 //  function sum(a:number,b:number,c:number,d:number):number{
 //    return a+b+c+d;
 // }
 // alert(sum(1,2,3,4)) ;
 
 
//三点运算符 接收所有多余的参数
// ...rest 参数是一个数组，可接收函数剩下的所有参数，rest参数只能放在函数形参列表最后。
function sum(a:number,b:number,...rest:number[]):number{
    var total=a+b;
    for(var i=0;i<rest.length;i++){
        total+=rest[i];
    }
    return total;
}
console.log(sum(1,2,3,4,5,6)) ;//21

5、ts中函数重载

// 5、ts函数重载 （比较特殊）
 
// java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
// typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
//ts为了兼容es5 以及 es6 重载的写法和java中有区别。
 
 
//es5中若出现同名方法，后声明的会覆盖之前声明的(前声明的方法失效)
/*
    function css(config){
    }
    function css(config,value){
    }
*/
 
 
//ts中的重载
 
//下面的两行函数声明，指明getInfo函数接收的参数s可为string或number类型
function getInfo(name:string):string;
function getInfo(age:number):string;
 
//下面是getInfo函数的实现
function getInfo(s:any):any{
    if(typeof s==='string'){
        return '我叫:'+s;
    }else{
        return '我的年龄是'+s;
    }
}
 
 console.log(getInfo('张三'));   //正确
 console.log(getInfo(20));   //正确
// console.log(getInfo(true));    //错误写法 ts编译报错

6、ts中箭头函数

// 6、箭头函数  es6
 
//注意：this指向的问题    箭头函数里面的this指向当前函数定义所在的上下文，而普通函数中this是指向运行时上下文
//es5
// setTimeout(function(){
//    //this 指向运行时上下文
//      console.log('run...')
//  },1000);
 
//ts es6中箭头函数
setTimeout(()=>{
    //this指向当前函数定义所在的上下文
    console.log('run...')
},1000);