[Day09] - 當ES6遇上了TypeScript - Function part 1

這豈不是無敵了??

> *當ES6 遇上了TypeScript，*
> *這豈不是無敵了?!。*
> *─────────────────────── By Opshell*

---

目標: 學會Function 的Type法

作為JavaScript 中常用到的的部分， 在 ES6 終於普及後有了更多花式的玩法， Arrow Funciton、參數預設值、...rest (其餘運算子)， 簡直就是天堂!! 在 TypeScript 中 當然有許多裝備可以配合這些花式玩法， 就讓我們一起看下去。

---

過程：

• 1. 基本函示Type法

   function add(num1, num2) {
     return num1 + num2;
   }

  有經驗的大大看到這個funciton第一個想法是， 到底是數字相加呢? 還是字串相加呢? 沒錯TypeScript 也一樣， 那會怎樣? 沒錯TypeScript會直接把萬惡的any拿出來用。 所以說，一般的funciton 都會積極Annotation(註記) 輸入和輸出。 像這樣：

   function add(num1: number, num2: number): number {
     // 是不是就能明顯看出這個function在做甚麼了呢?
     return num1 + num2;
   }

  ※ 但是Annotation(註記)是沒辦法多輸入或少輸入參數的， 有需求可以使使用optional parameter(可選參數) 語法：參數?:型別(沒錯，就是加個? 就是這麼形象)

   function add(num1: number, num2?: number): number {
     num2 = num2 || 0;
     return num1 + num2;
   }

  ※ optional parameter(可選參數)是不能放在required parameter(必填)的前面。

  在ES6後，終於允許我們給函式參數新增預設值了， 而在TypeScript中會自動把有預設值的參數視為optional parameter(可選參數)，

   function add(num1: number, num2: number = 0): number {
     return num1 + num2;
   }
  
   console.log(add(1)); // 1

  ※ 帶預設值的optional parameter(可選參數)可以放在required parameter(必填)的前面， 放最前面又不填的情況下，要給 undefined。

---

• 2. 匿名函式Type法

   const add = function(num1: number, num2: number): number {
     return num1 + num2;
   }

  ※ 其實上面的Type法是透過等好ˋ賦值Inference(推論)出add的型別， 完整Annotation(註記)的寫法是：

   const add: (num1: number, num2: number) => number = function(num1: number, num2: number): number {
     return num1 + num2;
   }

  超級繞 ※ 要稍微區分一下，上面的=> 不是 Arrow Funciton(箭頭函式) 的箭頭喔!。 只要後面等號賦值有帶型別，Inference(推論)都不太會出事， 所以很少有人會用這麼繞口的做法= 口= Opshell超愛箭頭函式的，這是我學ES6最大的動力。

---

• 3. rest (剩餘引數)【ES6】

  ES6 中，可以使用 ...rest 的方式獲取函式中的Rest parameter(剩餘參數) 或稱其餘運算子 參考

   // JavaScript Code
   function teamUp(team, ...members) {
     members.forEach(function(member) {
        team.push(member);
     });
   }
  
   let Maya = [];
   teamUp(Maya, 'Opshell', 'Bear');
  
   console.log(Maya); // ['Opshell', 'Bear']

  其餘運算子的原理是將剩餘的參數塞進一個陣列，所以我們可以用陣列的型別來定義它：

   type stringArray = string | null;
  
   function teamUp(team: stringArray[], ...members: stringArray[]) {
     members.forEach((member) => {
        team.push(member);
     });
   }
  
   let Maya: stringArray[] = [];
   teamUp(Maya, 'Opshell', 'Bear');
  
   console.log(Maya); // ['Opshell', 'Bear']

---

小結：

今天會了Funciton的Type法 而且更了解了 ES6 的其餘預算子 對於型別的Type法也更熟練了 明天繼續學習 Funciton的 Types法， 這麼有料的東西怎麼可以一天水完?