[Day07] - 認識來自TypeScript的新朋友 - 特殊型別

認識來自TypeScript的新朋友

有型別自TypeScript來不亦悅乎!───────────────────── By Opshell

---

目標:認識來自TypeScript的新朋友

• 型別總覽

  1. 我們先來複習複習JS的型別：

  • 原始資料型別
    • boolean 布林值
    • number 數值
    • string 字串
    • null 查找不到物件
    • undefined 未定義
    • symbol（於 ES6 新定義）
  • 物件型別
    • object 物件
    • array 陣列
    • function 函式

  2. 認識一點TS裡的新朋友

  • 特殊型別
    • void (空值)
    • unknown (不曉得)
    • any (任意型別) (全世界都是我的 的可怕型別)
    • never (全世界都不是我的 的型別)

---

• JS大家都這麼熟了，我們來介紹一下TS的新朋友：

  1. 空值 void: 沒有回傳值

  一般 void 用於沒有回傳值的 funciton 中 可以用我們之前寫的consoleAge來改一下 來表示consoleAge不會回傳任何值

   function consoleAge(age: string | number): void {
     console.log(age);
   }

  ※　在參數括號外: 型別代表該 function 回傳的類型

  2. 任意 any: 不檢查型別(畢竟我誰都是)

  可以想像成 let age; 的感覺， 只知道有這個人，但他誰都可以是。 在TS中宣告時如果沒有指定型別，一律Inference(推論)為any

   function consoleAge(age): void {
     console.log(age); // age什麼值都可以!
   }

  ※　不要濫用any型別，這樣跟沒用TypeScript一樣 　　甚至更赤裸了...

  3. 任意 unknown: 不檢查型別(畢竟我誰都是)

  unknown 和 any 一樣可以接受任何型別賦值， 但 any 可以賦值給任何型別， unknown 只能賦值給 any 和自己。

   function consoleAge(age: unknown): void {
     let name: string = 'Opshell';
     name = age; // Error：類型 string 不可指派給 unknown
   }

  4. 絕不 never: 永遠不存在值的型別

  這邊可以用之前的例子來舉證， 這個情況下 age 永遠不會有值， 所以是 never

   function consoleAge(age: string & number) {
     console.log(age);
   }

  

  或者可以是另一個情況， 像這種無窮迴圈，在TS的Inference(推論)中會判斷回傳為 never， 沒有人可以從無窮迴圈中出來...

   let immortal = function forever(age: number) {
     while (true) {
        age++;
     }
   }

  ※　never類型，只能用never賦值， 但是never可以賦值給所有型別， 也就是說，never是所有型別的子類， 　　可以理解為，所有物件都有錯誤的可能。

  ※　可以發現void和never很接近， 　　最值觀的差別是會不會結束? void函式 會完整結束只是沒有要回傳; never函式 無法完整跑完，無法回傳。

  因為never的特性緣故， 很常用來處理錯誤。 boolean裡其實也含有never(never是所有型別的子類) 所以: boolean 和: boolean | never是一樣的 有興趣的可以把: boolean | never寫出來觀察一下 TS 只會說age的回傳是 boolean型別

   function ageIsString(age: string | number): boolean{
     if (typeof age === 'string') {
         return true;
     } else if (typeof age === 'number') {
         return false;
     }
  
     //TS 推論此為 never 型別
     return fail('Age cannot be expressed in this way!');
   }
  
   function fail(message: string): never {
     throw new Error(message);
   }

---

小結：

可以發現TypeScript， 非常努力補足JavaScript沒有算處理的部分， 讓程式碼都變得更井然有序、更容易讀懂， 而且除了型別以外的地方， 基本上都還是按照JS 原來的操作。 可以明確感受到 "TypeScript是JavaScript的型別外掛" never 與 void 讓我們更容易了解函式的回傳， 對於理解他人程式碼相對容易非常多。