typescript中的函数

146 阅读2分钟
  • 函数定义
  • 函数传参
  • 可选参数
  • 默认参数
  • 剩余参数
  • 函数重载
  • 箭头函数

函数定义

es5定义函数的方法 函数声明

function run(){
    return 'run'
}

匿名函数

var run2 = function(){
    return 'run2'
}

ts中定义函数的方法 函数生命法

//正确
funtion run():string{
    retutn 'run'
}
//错误
function run:string{
    return 123
}

匿名函数法

var fun2 = function():number{
    return 123
}
alert(func2()) //调用方法

函数传参

function getInfo(name:string,age:number):string{
 return `${name}---${age}`
}
alert(getInfo('zhangsan',20))
var getInfo = function(name:string,age:number):string{
    return `${name}---${age}`
}
alert(getInfo('zhangsan',20))

没有返回值的方法

function run():void{
    console.log('run')
}
run()

可选参数

es5里面方法的实参和形参可以不一样,但是ts中必须一样,如果不一样就需要配置可选参数

function getInfo(name:string,age?:number):string{
  if(age){
    return `${name}---${age}`
  }else{
    return `${name}---年龄保密`
  }
  
 }
 alert(getInfo('zhangsan'))

可选参数必须配置在参数的最后面

function getInfo(name:string,age?:number):string{
  if(age){
    return `${name}---${age}`
  }else{
    return `${name}---年龄保密`
  }
  
 }
 alert(getInfo('zhangsan',123))

默认参数

es5里面没办法设置默认参数,es6和ts中可以设置默认参数

function getInfo(name:string,age:number=20):string{
  if(age){
    return `${name}---${age}`
  }else{
    return `${name}---年龄保密`
  }
  
 }
 alert(getInfo('zhangsan',30))
function getInfo(age:number=20,name:string):string{
  if(age){
    return `${name}---${age}`
  }else{
    return `${name}---年龄保密`
  }
  
 }
 alert(getInfo(30,'zhangsan'))

剩余参数

function sum(a:number,b:number,c:number,d:number):number{
  return a+b+c+d;
}
alert(sum(1,2,3,4))
function sum(...result:number[]):number{
  var sum =0;
  for(var i=0;i<result.length;i++){
    sum+=result[i]
  }
  return sum
}
alert(sum(1,2,3,4))
function sum(a:number,b:number,...result:number[]):number{
  var sum =a+b;
  for(var i=0;i<result.length;i++){
    sum+=result[i]
  }
  return sum
}
alert(sum(1,2,3,4))

函数重载

java中方法的重载:重载值得是两个或者两个以上同名函数,但他们的参数不一样,这时候就会出现函数的重载 typescript中的重载:通过为一个函数提供多个函数定义来试下多种功能的目的 ts为了兼容es5和es6写法和java中有区别

function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(str:any):any{
  if(typeof str==='string'){
    return '我叫:' + str
  }else{
    return '我的年龄是' + str
  }
}
alert(getInfo('张三'))
alert(getInfo(20))

alert(getInfo(true))

function getInfo(name:string):string;
function getInfo(name:string,age:number):string;
function getInfo(name:any,age?:any):any{
  if (age) {
    return '我叫:'+ name + '我的年龄是' + age
  } else {
    return  '我叫:'+ name
  }
}

alert(getInfo('张三')) //正确
alert(getInfo('张三', true)) //错误

箭头函数

箭头函数的this指向的是上下文