Ts 与Js函数JavaScript 函数是被设计为执行特定任务的代码块，会在某代码调用它时被执行。而TypeScrip

ES5的函数

首先我们先回顾一下es5的函数函数的定义

函数声明

 function fun1(){
    return 1;
}

匿名函数

let fun2 = function (){
    return 1;
}

箭头函数

没有 this、super、arguments 和 new.target 绑定。箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。不可以作为构造函数，也就是不能使用 new 命令，否则会报错。
适合使用的场景：ES6 之前，JavaScript 的 this 对象一直很令人头大，回调函数，经常看到 var self = this 这样的代码，为了将外部 this 传递到回调函数中，那么有了箭头函数，就不需要这样做了，直接使用 this 就行。

setTimeout(()=>{
    console.log("箭头函数");
},1000)

在官方文档里面有对this的详细讲解，如果有兴趣可以看看。this和箭头函数

TS中的函数

TS函数声明

首先看一下无参函数，这里的无参函数定义了函数的返回类型，如果返回值与参数不一样就会报错。例如如下代码：

  function fun3():number{
    return 5;
    // return '5';//报错
}

TS匿名函数的定义

和函数声明差不多，指定了返回值类型

let fun4 = function ():number{
    return 1;
}

这里把TS函数声明与匿名函数的运行结果放在这里

TS传参

传参这里与JavaScript不同的地方是对参数的数据类型进行了说明。

function fun5(name:string,age:number):string {
    return `${name}  ---   ${age}`
}   
console.log(fun5('张三',55));

无返回值函数

上面讲的都是有返回值的函数，这里就讲讲无返回值函数怎么写的。和上面比较类似，依旧需要写返回值类型，因此这里写void。如下代码所示：

function fun6():void {
    console.log("void");        
}
fun6()

可选参数

es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数，注意:可选参数必须配置到参数的最后面。这里如果这么写会报错：

function fun7(name:string,age:number):string {
    if(age){
        return `${name}  ---   ${age}`
    }else{
        return `${name}  ---   年龄保密`
    }
}
fun7('张三')//报错

此时我们可以用可选参数这种写法：

 function fun8(name:string,age?:number):string {
    if(age){
        return `${name}  ---   ${age}`
    }else{
        return `${name}  ---   年龄保密`
    }
}
console.log(fun8('张三'));

可选参数可以让这个age不传也不会报错。

默认参数

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

function fun9(name:string,age:number = 20):string {
    if(age){
        return `${name}  ---   ${age}`
    }else{
        return `${name}  ---   年龄保密`
    }
}
console.log(fun9('张三'));    
console.log(fun9('张三',40));

剩余参数(...运算符)

可以把传入的参数一次性加入函数，例如这里实现一个将所有参数进行累加。

 function sumadd(...result:number[]) {
    let sumRes = 0;
    for (let index = 0; index < result.length; index++) {
        sumRes +=  result[index];
    }  
    return sumRes; 
}
console.log(sumadd(5,8,9,5));

除了可以直接把内容放进去以外，还可以选择性放入，前面指定后面不指定。

function sumPrint(a:number,b:string,...result:number[]):string {
    let sumRes:string = String(a) + "---";
    for (let index = 0; index < result.length; index++) {
        sumRes +=  String(result[index]) + "---";
    }  
    sumRes = sumRes +  b ;
    return sumRes; 
}
console.log(sumPrint(5,"8",9,5));

ts函数重载

java中方法的重载，重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。typescript中的重载:通过为同一个函数提供多个函数类型定义来试下多种功能的目的。ts为了兼容es5 以及es6重载的写法和java中有区别。咱们先来看看ES5出现同名方法的情况。

function people(name) {
    console.log(name);
}

function people(name, age) {
    console.log(`${name}的年龄${age}`);
}
people('小明')
people('小明', 19)

很显然这里下面的方法替换了上面的方法。接下来我们看看TS的重载。

function getInfo1(name:string):string; 
function getInfo1(age:number):number; 
function getInfo1(str:any):any{
    if(typeof str ==='string'){
        return "我叫："+str
    }else{
        return "我的年龄是："+str
    }
};    
console.log(getInfo1("张三"));
console.log(getInfo1(66));

除了对参数类型不一样的情况下重载，还可以对参数个数不一样的情况下进行重载。

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
        }
    }; 
    console.log(getInfo2("李四"));
    console.log(getInfo2("李四",50));

那我们前面用的可选参数在重载中可以用到吗？

function getInfo3(name:string):string; 
function getInfo3(name:string,sex:string):string; 
function getInfo3(name:string,sex:string,grade:string):string; 
function getInfo3(name:string,sex?:string,grade?:string):string{
    if(grade){
        return "我叫：" + name + "，性别是：" + sex + "，等级是：" + grade
    }else if(sex){
        return "我叫：" + name + "，性别是：" + sex
    }else{
        return "我叫：" + name
    }
}; 
console.log(getInfo3("李四"));
console.log(getInfo3("李四","男"));
console.log(getInfo3("李四","男","A"));

由图可见，之前说的可选参数在这里依旧可用。

Ts 与Js函数

推荐阅读

JavaScript 函数参数

TS官方函数讲解