06_TypeScript 中的函数

一、函数的定义

es5 定义函数的方法

// 函数声明
function run(){
  return "run"
} 
// 匿名函数
var run4 = function(){
  return "run4"
}

TypeScript 定义函数的方法

// 函数声明
function run():string {
  return "run"
} 
// 匿名函数
var run2 = function():number{
  return 100
}
console.log(run2())// 调用方法

ts 中定义方法传参

返回值和参数都有类型

//传参
function getInfo(name: string, age:number):string{
  return `${name}---${age}`
}

// console.log(getInfo('zs', 'li'))//错误写法，编译不通过
console.log(getInfo('zs', 20))
//匿名函数定义传参
let getInfo2=function(name: string, age:number):string{
  return `${name}---${age}`
}
console.log(getInfo2('zs', 20))
//没有返回值的方法
function run2():void{
  console.log("run2")
}
run2()

二、可选参数

es5 里面的方法的实参和形参 可以不一样，但是ts 中必须要一样，如果不一样就需要配置可选参数（使用 问号？）

function getInfo(name: string, age?:number):string{
  if(age) {
    return `${name}---${age}`
  } else {
    return `${name}---保密`
  }
  
}
console.log(getInfo('zs'))
console.log(getInfo('zs', 20))

注意：可选参数必须配置到参数的最后面，以下是一个错误写法，ts 编译不通过

function getInfo(name?: string, age:number):string{
  if(age) {
    return `${name}---${age}`
  } else {
    return `${name}---保密`
  }
  
}
console.log(getInfo('zs'))

三、默认参数（跟可选参数一样）

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

function getInfo(name: string, age:number = 20):string{
  if(age) {
    return `${name}---${age}`
  } else {
    return `${name}---保密`
  }
  
}
console.log(getInfo('zs'))

四、剩余参数（三点运算符的应用）

function sum(a:number, b:number, c:number):number {
  return a+b+c
}
console.log(sum(1,2,3))//6

//三点运算符 接收形参传过来的值
function sum2(...result:number[]):number {
  let sum = 0;
  for(let i = 0; i< result.length; i++) {
    sum += result[i]
  }
  return sum
}
console.log(sum2(1,2,3,7,8,8,0))//29

function sum3(a:number,...result:number[]):number {
  let sum = a;
  for(let i = 0; i< result.length; i++) {
    sum += result[i]
  }
  return sum
}
console.log(sum3(1,2,3,7,8,8,0))//29

五、函数重载

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

//es5 中出现同名方法，下面的会替换上面的方法
function css(config:any) {

}
function css(config, value) {

}

//ts 中的重载--- 参数不一样
function getInfo3(name:string):string;
function getInfo3(age:number):number;
function getInfo3(str:any):any {
  if(typeof str === 'string') {
    return "我叫"+str
  } else {
    return "我的年龄是："+str
  }
}
console.log(getInfo3('zs'))// 正确写法
console.log(getInfo3(12))// 正确写法
// console.log(getInfo3(true))// 错误写法

function getInfo4(name:string):string;
function getInfo4(name:string, age:number):number;
function getInfo4(name:any, age?:any):any {
  if(typeof age === 'string') {
    return "我叫"+name +"我的年龄是："+age
  } else {
    return "我叫"+name
  }
}
console.log(getInfo4('zs'))// 正确写法
console.log(getInfo4('sansan',12))// 正确写法
console.log(getInfo4(12))// 错误写法

六、箭头函数 es6

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

// es5的写法
setTimeout(function(){
  console.log("异步任务，es5的写法")
},1000)

// es6 箭头函数， this 指向上下文
setTimeout(()=>{
  console.log("异步任务，es5的写法")
},1000)