typescript学习笔记三：typescript中的函数定义

桃扇骨 2023-01-05 01:15 318阅读 0赞

#### 1.ts函数的定义 ####

函数声明

function action():string{
      return '去打篮球'  //正确
    }
    
    function action():string{
      return 123    //错误写法，限制了返回类型为字符串，不能是数值
    }

函数表达式

var action1 = function():number{
     return 123
    }
    action1(); //调用方法

#### 2.ts函数定义方法传参 ####

传入的参数和返回的类型都被限制

function getInfo(name:string,age:number):string{
      return `${name}现在${age}了`  
    }
    
    var getInfo1 = function(name:string,age:number):string{
       return `${name}--${age}`  
    }

#### 3.ts没有返回值的函数方法 ####

function run():void{
        console.log('无返回参数')
    }

#### 4.ts函数的可选参数 ####

参数后面的限制类型冒号(:)前加问号(?)，参数可传可不传；  
可选参数必须配置在参数的最后面；

function getInfo(name:string,age?:number):string{
      if(age){
        return `${name}--${age}` 
      }else{
        return `${name}--不知年龄`  
      }
    }

#### 5.ts函数的默认参数 ####

默认参数没有位置顺序限制

function getInfo(name:string,age:number = 20):string{
      if(age){
        return `${name}--${age}` 
      }else{
        return `${name}--不知年龄`  
      }
    }
    
    console.log(getInfo('张三'))  //张三--20
    console.log(getInfo('张三',30))  //张三--30

#### 6.ts函数的剩余参数 ####

#### 7.ts函数重载 ####

ts中的重载，通过为同一个函数提供多个函数类型定义来试下多种功能的目的；

//es5中出现同名方法，下面的会覆盖上面的方法
    function css(config){}
    function css(config，value){}
    
    //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}`
      }
    }
    
    function getInfo(name:string):string{}
    function getInfo(name:string,age:number):number{}
    function getInfo(name:any,age?:number):any{
      if(age'){
         return `${name} -- ${age}`
      }else{
        return `我是${name}`
      }
    }

#### 8.ts箭头函数 ####

箭头函数里面的this指向上下文

setTimeout( () => {
       alert('我是箭头函数')
    },1000)