TypeScript 的 Literal 類型

TypeScript 里有一類很有意思的類型，叫做 Literal Type。也就是說某些特殊的「值」可以當作「類型」來使用。這個聽上去有點奇怪的feature什麼時候會有用呢？舉個例子：

type Gender = "male" | "female";var gender: Gender;gender = "male"; // Correctgender = "Chinese"; // Error: not assignable

這裡 `gender`的類型就不是任意的string，而只可以是`male`或者`female`。像第四行這樣不太明顯的錯誤就可以在run之前就發現了。

另外一個有用的例子就是對參數的限制。比如如果打開lib.d.ts, 會看到這樣的函數定義：

declare function addEventListener(type: "resize", listener: (this: Window, ev: UIEvent) => any, useCapture?: boolean): void;

這樣的定義就保證了在這個簽名里第一個type參數接受"resize"這個值的時候，listener的ev類型必須是UIEvent 而不是一般的Event類型。

在傳統的JavaScript 代碼里，很多信息的交流是通過string來完成的，而往往這些string和string的差別只能通過文檔或者注釋來說明。如果在TypeScript裡面也把這些東西全都認為只是string而已，就漏掉了很多可以檢查到的錯誤。String literal 類型正好解決了這個問題。

而最新的TS支持的literal 類型不僅僅是string而已，數字值類型(number literal) 和布爾值類型 (boolean literal) 都已經支持啦！比如如果你想讓函數的一個布爾型參數必須是true, 但是你又不想讓這個參數是可忽略的，就可以寫成：

function foo(p: true) { }

Literal Type出現在TypeScript里已經有一段時間，而如今工具的支持也越來越成熟。想要重命名或者找到所有引用？最新的VSCode已經支持了：

不同的literal類型還可以進一步拼起來，有更強的表達能力：

type Cat = "whiteCat" | "blackCat";type Dog = "husky" | "corgi";type Pets = Cat | Dog; // The same as: type Pets = "whiteCat" | "blackCat" | "husky" | "corgi"type Falsy = "" | 0 | false | null | undefined;// 模擬JS的if條件判斷規則

推薦閱讀：