TypeScript函数

短命女 2022-10-19 15:59 138阅读 0赞

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

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

那么，在ts定义函数的方法是什么样子的呢？

// 函数声明法
    function run():string{
        return 'run';
    }
    
    // 匿名函数
    var fun2 = function():number{
        return 123;
    }
    
    
    //ts中定义方法传参
    function getInfo(name:string,age:number):string{
         return `$(name)-----$(age)`
    }
    
    //匿名
    var getInfo = function(name:string,age:number):string{
        return `${name}---${age}`
    }
    alert(getInfo('zhangsan',40))
    
    
    // 没有返回值的方法
    function run():void{
        console.log('run')
    }

//可选参数
    
    // es5里面方法的实参和形参可以不一样,但是ts中必须一样，如果不一样就需要配置可选参数
    // 问号？表示可传可不传
    ***** 可选参数必须配置到参数的最后面
    
    function getInfo(name:string,age?:number):string{
          if(age){
                return `$(name)-----$(age)`
          } else {
                return `$(name)-----'年龄保密'`
          }
     
    }

默认参数
    
    // 在es5里面没法设置默认参数，在es6和ts中都要可以设置默认参数
    
    function getInfo(name:string,age:number=20):string{
        if(age){
            return `${name}---${age}`
        }else{
            return `${name}---'年龄保密'`
        }
    }

剩余参数
    
    function sum(a:number,b:number,c:number,d:number):number{
            return a+b+c+d;
    }
    
    // 三点运算符，接受新参传过来的值
    function sum(...result:number):number{
        var sum = 0;
        for(var i=0;i<result.length;i++){
                sum+=result[i];
        }   
        return sum;
    }

ts函数重载
    
    // java中方法的重载，重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况
    
    // typescript中的重载，通过为同一个函数提供多个函数类型定义来试下多种功能的目的
    
    // ts为了兼容es5以及es6重载的写法和java中有区别
    
    
    //es5中出现同名方法，下面的会替换上面的方法
    function css(config){
        
    }
    
    function css(config:any,value:any):any{
        
    }
    
    
    // ts中重载
    
    function getInfo(name:string)string{
        
    }
    
    function getInfo(age:number):number{
        
    }
    function getInfo(str:any):any{
         if(typeof str === 'string'){
            return '我叫'+str;
        } else {
            return '我的年龄是'+str;
        }
    }