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

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函数的剩余参数

function getSum(a:number,b:number,c:number,d:number,):number{
    return a+b+c+d
}
console.log(getSum(1,2,3,4))  //10

//三点运算符 接受新传过来的值
function getSum1(...nums:number[]):number{
    return a+b+c+d
    var sum = 0
    for(var i =  0 ; i < nums.length; i++){
     sum += nums[i]
    }
    return sum
}
console.log(getSum1(1,2,3,4))  //10

//三点运算符 结合实参 
function getSum1(a:number,...nums:number[]):number{
    return a+b+c+d
    var sum = 0
    for(var i =  0 ; i < nums.length; i++){
     sum += nums[i]
    }
    return sum
}
//把1赋值给a,234赋值给nums数组
console.log(getSum1(1,2,3,4))  //10

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)