沒想到還可以超載起來

一個function不夠?
那我就再宣告一個。
───────────────────────── By Opshell

目標: 學會 Function 的 Type法 Part2

今天來把剩下常用的function type 法來學完，
Alias(別名) 、Interface(介面)和很酷的Overload(超載)，
而且透過這些有趣的東西來稍微複習、熟悉我們前面學習的。

過程：

• 1. Alias(別名)

  語法：type 類型名稱 = (參數: 型別) => 型別;

   type tFullName = (firstname: string, lastname: string) => string;
  
   // 字首轉大寫
   const upWord = (word: string): string => word.charAt(0).toUpperCase() + word.slice(1);
  
   const combinName: tFullName = (firstname, lastname) => {
     return `Hello ${upWord(lastname)} ${upWord(firstname)}, Welcome to typeScript.`;
   };
  
   console.log(combinName('Liu', 'opshell')); // Hello Opshell Liu, Welcome to typeScript.
  

  除了Alias(別名) 的範例以外，
  順便複習了 箭頭函式 + 函式Inference(推論)，
  可以在 ts 中確認兩個函式的的型別，會有更多的了解和熟悉度。

  

• 2. Interface(介面)

  和前面的Alias(別名)
  非常的接近，在前一篇 funciton part 1 提到的，
  等號賦值 + Inference(推論) 的特性，
  可以在上面Alias(別名)的例子和下面這個，
  都可以很明顯看出這個特性，
  不需要使用完整的型別陳述：

   interface IFaceStrChk {
     (paragraph: string, keyword: string): boolean;
   }
  
   const checkKeyword: IFaceStrChk = (paragraph, keyword) => {
     // 如果再 Ts 中 查看paragraph 或 keyword 都會告訴你是string
     return paragraph.search(keyword) !== -1;
   }
  
   console.log(checkKeyword('Hello world !', 123)); // 報錯 類型number 無法指定給 string
   console.log(checkKeyword('Hello world !', 'llo')); // true
   console.log(checkKeyword('Hello world !', 'lle')); // false
  

• 3. Overload (超載)

  Overload(超載)允許一個函式接受不同數量或型別的引數時，作出不同的處理。
  我們有一個反轉輸入的需求，做成一個函式 reverse，
  輸入數字 123 的時候，輸出反轉的數字 321，輸入字串 'hello' 的時候，輸出反轉的字串 'olleh'。
  我們會想到利用Union(聯集)型別：

   function reverse(word: number | string): number | string {
     if (typeof word === 'number') {
        return Number(word.toString().split('').reverse().join(''));
     } else if (typeof word === 'string') {
        return word.split('').reverse().join('');
     }
   }
  

  但Union(聯集)輸入與輸出同時使用時有個問題，沒辦法精確的表達輸入與輸出的對應關係，
  reverse 在輸入數字的時候，輸出也應該是數字，輸入字串的時候，輸出也應該是字串。
  這時候就可以使用 Overload(超載)技巧。
  Overload(超載)會包含兩個部分：

  • overload signatures：也就是函式輸入輸出對應的部分
  • function implementation：實際上執行的 function，它的型別需要滿足所有的 overload signatures

   // overload signatures => `type definition`(型別定義)`
   function nsReverse(word: number): number; // 數字
   function nsReverse(word: string): string; // 字串
  
   // 可以隔開也沒關係
   // function implementation 實現 funciton 功能
   function nsReverse(word: number | string): number | string {
     if (typeof word === 'number') {
        return Number(word.toString().split('').reverse().join(''));
     } else {
        return word.split('').reverse().join('');
     }
   }
  
   console.log(nsReverse('aerg')); // grea
  

  例子中重複定義了多次函式 reverse，前幾次都是函式對照定義，最後一次是函式實現。
  成功使用函式Overload(超載) 之後，VSCode 的 會跳出提示來說明可用的 function signatures
  ※ VSCode 的parameter hints(鑲嵌提示)功能，可以這樣啟用它：在settings.json中添加：
  "javascript.inlayHints.parameterNames.enabled": "all",
  

  ※ 注意，TypeScript 會優先從最前面的函式定義開始匹配，所以多個函式定義如果有包含關係，需要優先把精確的定義寫在前面。

小結：

終於把Function Type法學完啦，
沒想到常用的 JS funciton 會有這麼多種花樣的 Type 方式，
居然讓我水了兩天
明天就要進入Object的世界啦~
大家期不期待呢?

章節小結：

沒想到跌跌撞撞的也到了第10天，
在這邊學到了複合型別，Function(函式)的Type，
算是學到了個人覺得TypeScript中很常會使用到的部分，
各種Type法也越來越熟練了，
在每篇文章中都會重複的稍為提及一些較為複雜的東西，
讓大家可以對他們有個熟悉度，
在之後的章節中能夠更容易的上手，
如果現在看到，對他們還不是很熟悉也不用緊張喔~
就讓我們下個章節見吧。
────────────────────────────────────────祝大家中秋節快樂~