Ts 函数

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」 TS规定了返回值类型\ TS定义方法传参\没有返回值的方法

//  函数的定义
//  之前es5的方法
    // 函数声明
    function fun1(){
        return 1;
    }
    // 匿名函数
    let fun2 = function (){
        return 1;
    }

// TS规定了返回值类型
    // 函数声明
    function fun3():number{
        return 5;
        // return '5';//报错
    }
    // 匿名函数
    let fun4 = function ():number{
        return 1;
    }
    console.log(fun1());
    console.log(fun2());
    console.log(fun3());
    console.log(fun4());
    console.log("-------------");
    
    
    // TS定义方法传参
    function fun5(name:string,age:number):string {
        return `${name}  ---   ${age}`
    }    
    console.log(fun5('张三',55));
    console.log("-------------");


// 没有返回值的方法
    function fun6():void {
        console.log("void");        
    }
    fun6()  
    console.log("-------------");
    

// 可选参数
// es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数
// 注意:可选参数必须配置到参数的最后面
    function fun7(name:string,age:number):string {
        if(age){
            return `${name}  ---   ${age}`
        }else{
            return `${name}  ---   年龄保密`
        }
    }
    // fun7('张三')//报错
    
    // 可选参数可以让这个age不传也不会报错
    function fun8(name:string,age?:number):string {
        if(age){
            return `${name}  ---   ${age}`
        }else{
            return `${name}  ---   年龄保密`
        }
    }
    console.log(fun8('张三'));
    console.log("-------------");
    
    
    // 默认参数可选参数
    // 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));    
    console.log("-------------");
    

// 剩余参数(...运算符)
    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)); 
    console.log("-------------");


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

    // Es5中出现同名方法，下面的会替换上面的方法
    /*
        function name(config) {
            
        }
        function name(config,value) {
            
        }
    */
    
    // 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("参数类型不一样");    
    console.log(getInfo1("张三"));
    console.log(getInfo1(66));
    console.log("*********");
    
    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));
    console.log("*********");

    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"));
    
    console.log("-------------");


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