在聊註記、斷言以及推論之前，我們先來快速認識一下 TS 的型別有哪些。

型別類型

此處所列的類型，並非官方分類，是依書籍作者（Maxwell Huang）的分類為依據，筆者認為對於認識 TypeScript 的型別有很大的幫助。

書籍原始文章：讓TypeScript成為你全端開發的ACE！- Maxwell Huang

型別大致分為六種：原始型別、物件型別、明文型別、特殊型別、複合型別、泛用型別，以下簡單介紹：

原始型別（Primitive Types）

包含 number, string, boolean, undefined, null, symbol, void。

物件型別（Object Types）

此型別可再細分三種型別：

• 基礎物件型別：Object, JSON, Array, Class
• TS 內建擴充型別：Enum, Tuple
• 函式型別：function, arrow function

明文型別（Literal Type）

一個值本身可成為一個型別。

舉例來說，將字串 "Hello TS" 變成某變數的型別，則變數值只能是 "Hello TS"，當然，這麼做的意義並不大，因此大部分看到的會是 Object Literal Type。

特殊型別（非官方分類）

包含 any, never, unknown。

複合型別（Composite Type，非官方分類）

包含 union 與 intersection ，此型別通常由邏輯運算子（|, &）組成。

泛用型別（Generics Types）

此型別中譯由 通用型別 改為 泛用型別 ，修正參考 此篇。

泛用型別，就是將 型別化名 進行參數化（Parameterize）的行為，其中 型別化名 會於 明文型別 的篇章進行說明。

---

型別註記、斷言與推論

型別註記（Type Annotation）

就是將型別註記在程式碼中，因此，有固定的註記形式，以下使用 ~ 底線標註。

註記形式一：註記在 變數後方， 等號前方

const msg: string = 'Hello TS';
//       ~~~~~~~~~

let randomNum: number = Math.random();
const isExist: boolean = true;

型別註記二：註記在 函式陳述式 宣告時

// JavaScript
function isPositive(input) {
    return input > 0;
}

// TypeScript
function isPositive(input: number): boolean {
    //                    ~~~~~~~ ~~~~~~~~~
    return input > 0;
}

型別註記三：註記在 函式表達式 宣告時

請留意此處的 () => boolean 並非 arrow function！
仔細觀察可發現 = 號後方都未改變，註記 統一都在前方。

// JavaScript
const isPositive = function(input) {
    return input > 0;
}

// TypeScript
const isPositive: (input: number) => boolean = function(input) {
    //          ~       ~~~~~~~~  ~~~~~~~~~~
    return input > 0;
}

型別註記四：註記在 Arrow Function 宣告時

仔細觀察可發現 = 號後方都未改變，註記 統一都在前方。

// JavaScript
const isPositive = (input) => input > 0;

// TypeScript
const isPositive: (input: number) => boolean = (input) => input > 0;
//              ~       ~~~~~~~~  ~~~~~~~~~~

型別註記五：註記在 Arrow Function 宣告時

這是註記 唯一 寫在 = 後方的寫法，有點類似 函式陳述式

const isPositive = (input: number): boolean => input > 0;

型別斷言（Type Assertion）

只要使用 TS 關鍵字 as 或 <T>(...) 的格式，就是斷言的用法。

仔細觀察可發現 = 號前方都未改變，斷言 統一都在後方。

斷言形式一：斷言在 未知的值

const num = returnUnknown() as number;
//                          ~~~~~~~~~
const num = <number>(returnUnknown());
//          ~~~~~~~~

斷言形式二：斷言在 Arrow Function 宣告時

仔細觀察可發現 = 號前方都未改變，斷言 統一都在後方。

// JavaScript
const isPositive = (input) => input > 0;

// TypeScript
const isPositive = ( (input) => input > 0 ) as (input: number) => boolean
// ( () => {} ) as (input: number) => boolean
// 斷言在 arrow function 之後

const isPositive = <(input: number) => boolean>( (input) => input > 0 );
// <(input: number) => boolean>( () => {} )
// 斷言在 arrow function 之前

型別推論（Type Inference）

• 不需要像註記一樣，由工程師手動編寫至程式碼中
• 型別推論內建於 TS 中，由 TS 主動監測，並推論前後撰寫的變數與值，型別是什麼，以及型別是否一致。

因此，如果指派其他型別的值，到被推論後的變數，則 TS 便會提醒或顯示警告。

結論

型別註記與型別斷言非常相似，不過斷言可用於型別轉換：

let sayA: any = 'hello';
let sayB: string = sayA as string;

在這個範例中，宣告了一個變數 sayA 型別為 any，不過在宣告 sayB 時，則透過 型別斷言 強制將 sayA 型別轉換為 string 後，才將值賦予給 sayB。

要特別留意的是，型別斷言執行時不會進行任何檢查，如果轉換錯誤，可能會導致執行錯誤。

因此，在使用斷言進行型別轉換時，務必要確保轉換的類型是正確的。

---

Reference

• 讓TypeScript成為你全端開發的ACE！Day 02 - Maxwell Huang
• 讓 TypeScript 成為你全端開發的 ACE！ 系列 - 第 11 屆 iThome 鐵人賽
• TypeScript Official Site

---

系列：跑完 JS30 就接著認識 TypeScript 入門
上一篇：Day00：JavaScript 與 TypeScript
下一篇：Day02：型別系統 - 原始型別 Primitive Types

tags: 跑完 JS30 就接著認識 TypeScript 入門

Created on ∥ March 13, 2023

文章若有任何錯誤，還請不吝給予留言指正，謝謝大家！