3 .typeScript中的函数

函数的定义

• 函数传递参数时要指定类型，函数返回值也要指定类型；

• 函数声明：使用function关键字声明一个函数，在指定一个函数名。

• 函数表达式：使用function关键字声明一个函数，但是未给函数命名，最后将匿名函数赋予给一个变量

es5的定义方法

//函数声明法
function run(){
    return 'run';
}
//函数表达式
var run2=function(){
    return 'run2';
}

ts中定数的方法

//函数声明法
function run():string{
    return 'run';
}
// 错误写法
function run2():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 getInfo2=function(name:string,age:number):string{
    return `${name} --- ${age}`;
}
alert(getInfo2('zhangsan',40));

没有返回值的方法：void表示没有任何类型，一般用于定义方法的时候方法没有返回值。

function run():void{
    alert('run')
}
run();

typeScript中函数的可选参数

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

typeScript中函数的默认参数｜可选参数：es5里面没法设置默认参数，ts可以设置默认参数

默认参数

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

typeScript中函数的剩余参数

function sum(a:number,b:number,c:number,d:number):number{
    return a+b+c+d;
}
alert(sum(1, 2, 3, 4));

扩展运算符 数组接受形参传过来的值

function sum2(...result:number[]):number{
    var sum=0;
    for(var i=0;i<result.length;i++){
        sum+=result[i];  
    }
    return sum;
}
alert(sum2(1,2,3,4,5,6)) ;
function sum3(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(sum3(1,2,3,4,5,6)) ;

typeScript中函数的函数重载

• JavaScript是面向过程的语言，没有重载的概念
• 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 getInfo2(name:string):string;
function getInfo2(name:string,age:number):string;
function getInfo2(name:any,age?:any):any{
    if(age){
        return '我叫：'+name+'我的年龄是'+age;
    }else{
        return '我叫：'+name;
    }
}
alert(getInfo2('zhangsan'));  /*正确*/
alert(getInfo2(123));  //错误
alert(getInfo2('zhangsan',20));

typeScript中函数的箭头函数、es6

setTimeout(function(){
    alert('run')
},1000)

setTimeout(()=>{
    alert('run1')
},1000)