一、函數的定義

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))//29function 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)