[TOC] >[success] # JS -- 函數的兩種表現形式 ~~~ 1.我們熟知js有兩種函數表現形式'函數聲明'和'函數表達式' 2.二者的區別：在函數聲明的中，重名的函數不管你在哪 里調用，都執行最后一個函數，函數表達式就不會出現函 數聲明 重名的問題，只會依次正常執行 ~~~ >[danger] ##### 函數聲明 ~~~ // 函數聲明（Function Declaration） function sum(x, y) { return x + y; } ~~~ >[danger] ##### 函數的表達式 ~~~ // 函數表達式（Function Expression） let mySum = function (x, y) { return x + y; }; ~~~ >[danger] ##### es6 箭頭函數 ~~~ const esExample = (name)=>{ console.log(name) } ~~~ >[success] # TS -- 定義一個函數 ~~~ 1.剛才已經知道js 函數中的常見三種寫法，接下的案例將會根據這個三種 寫法依次推到成現在我們要寫的'ts' 寫法 ~~~ >[danger] ##### TS -- 函數聲明 （定義） ~~~ 1.TS以函數的聲明的形式，需要定義函數參數中的類型，以及返回類型。 'function 函數名(參數:類型):函數返回的類型{}' 2.如果函數沒有返回類型就是void ~~~ ~~~ function add(arg1:number,arg2:number):number{ return arg1 + arg2 } console.log(add(1,2)) //3 ~~~ >[danger] TS -- 函數函數的表達式/ 箭頭函數（定義） ~~~ 1.這個案例直接用箭頭函數寫一個函數表達式的形式 2.下面兩種寫法最后編譯成'js'的結果不同，但是卻在'TS' 表現形式略有區別 第一個案例只對等號右側的匿名函數進行了類型定義，在吧這個重新被定義 的類型函數賦值給了'add',第二個案例就比較遵循'ts' 規則，先定義了一個 函數類型，這個類型參數指定的類型，以及函數返回的類型，然后使用的 時候在按照定義規范去用 ~~~ * 第一種寫法 ~~~ const add = (arg1:number,arg2:number) => arg1 + arg2 console.log(add(1,2)) // 3 ~~~ * 第二種寫法 ~~~ // 聲明一個函數類型包括參數類型和返回類型 // 這里要注意的是這里是ts函數定義寫法并不是箭頭函數意思，其左側是函數的參數類型，右側是函數的返回值類型 let add:(x:number,y:number) => number // 使用的時候具體函數使用 // 參數名字可以不一致但是類型一定要相同 add = (arg1:number,arg2:number) =>{ return arg1+arg2} console.log(add(1,2)) // 3 ~~~ * 第二種寫法 弄成基本類型對比理解 ~~~ // 函數比我多了一步使用而已 let name:string name = "1" ~~~ >[danger] ##### 使用接口(定義) ~~~ interface add { (x:number,y:number):number } // 按照接口格式 規范實現我們的myAdd方法 let myAdd:add myAdd = (x:number,y:number)=>{ return x+y } // 使用 console.log(myAdd(1,2)) //3 ~~~ >[danger] ##### 使用類型別名(定義) ~~~ // ts箭頭函數不加大括號的含義是 返回 類型 type PersonInfo = (name:string) => string // 這里箭頭函數是正常的js 表達的意思 let personName:PersonInfo = (name) => name ~~~ >[danger] ##### ts 定義參數可選參數寫法 -- '?'的使用 ~~~ 1.JavaScript里，每個參數都是可選的，可傳可不傳。但'TS'不同每個函數參數都是必須的，可以理解定義即使用 2.但使用的時候不想將每一個定義的參數都傳值使用，就可以用'?' 的形式， 和接口中使用的方式相似 3.需要注意的是，可選參數必須接在必需參數最后面。 ~~~ ~~~ type AddFun = (x:number,y:number,z?:any) => number let add:AddFun add = (x:number,y:number)=>{ return x+y } // 增加了一個z參數 add = (x:number,y:number,z:number)=>{ return x+y+z } ~~~ * 官方給的案例 ~~~ function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; } let result1 = buildName("Bob"); // works correctly now let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters let result3 = buildName("Bob", "Adams"); // ah, just right ~~~ >[danger] TS函數 -- 設置函數參數默認值 ~~~ 1.和es6 一樣直接在參數中給要增加的參數賦值默認參數即可 2.案例二中，如果定義默認參數在最前面，想使用默認參數需要傳 遞'undefined' 3.當有默認參數的時候，默認參數會自動變成一個可選參數，這個好理解 因為不填就用默認參數，填就用填寫參數，但是'?'形式的可選參數依然必須 在末尾 ~~~ ~~~ function buildName(firstName: string, lastName: string = 'Cat') { return firstName + ' ' + lastName; } let tomcat = buildName('Tom', 'Cat'); let tom = buildName('Tom'); ~~~ * 案例二 ~~~ function buildName(firstName = "Will", lastName: string) { return firstName + " " + lastName; } let result1 = buildName("Bob"); // error, too few parameters let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters let result3 = buildName("Bob", "Adams"); // okay and returns "Bob Adams" let result4 = buildName(undefined, "Adams"); // okay and returns "Will Adams" ~~~ >[danger] ##### TS函數 -- 設置 剩余參數 [js 函數傳遞](http://www.hmoore.net/cyyspring/more/1006387) ~~~ 1.使用的場景：你想同時操作多個參數，或者你并不知道會有多少參數傳遞 進來 2.在es5的時候使用'arguments',在es6 使用'...' 3.對es6中的'...' 簡單講解: var a = [1,2,3] var b = [...a] console.log(b) // [1, 2, 3] 可以解包 // 對象解包 var aObj = {'a':1} var bObj2 = {...aObj,"b":2} console.log(bObj2 ) // {a: 1, b: 2} 4.在'ts' 中也是'...'但需要定義數組類型參數' ...args: number[]' ~~~ ~~~ const handleData = (arg1: number, ...args: number[]) => { // ... } ~~~ >[danger] ##### 函數重載 ~~~ 1.有時候函數會因為傳遞的參數不同，導致函數參數返回的時候類型值不同 ，這時候第一反應可能是使用我們之前用的'聯合類型',案例一將告訴你為什 推薦'重載' 而用'聯合類型' 2.官方文檔的標準解釋：為了讓編譯器能夠選擇正確的檢查類型，它與 JavaScript里的處理流程相似。 它查找重載列表，嘗試使用第一個重載定 義。 如果匹配的話就使用這個。 因此，在定義重載的時候，一定要把最精 確的定義放在最前面。 ~~~ * 3.4.5 版本不支持下面的寫法 ~~~ 1.這個案例表達的意思是，返回值可以是數字也可以是字符，但實際傳入 是數字只能返回數字，傳入的是字符串返回的只能是字符串 ~~~ ~~~ function reverse(x: number | string): number | string { if (typeof x === 'number') { return Number(x.toString().split('').reverse().join('')); } else if (typeof x === 'string') { return x.split('').reverse().join(''); } } ~~~ * 為了讓 剛才的寫法更加嚴格使用'重載' ~~~ 1.在編寫的時候發現你的參數是數字，就會提示你必須用數字類型作為返回 值。 ~~~ ~~~ function reverse(x: number): number; function reverse(x: string): string; function reverse(x: number | string): any { if (typeof x === 'number') { return Number(x.toString().split('').reverse().join('')); } else if (typeof x === 'string') { return x.split('').reverse().join(''); } } ~~~