TypeScript實用技巧 Nominal Typing名義型別詳解

2022-09-24 14:01:25

Nominal Typing（名義型別）

概念解析

意思是給一個型別附加上一個“名義”，從而防止結構型別在某些情況下由於型別結構相似而被錯用。假設有如下程式碼：

interface Vector2D { x: number, y: number };
interface Vector3D { x: number, y: number, z: number };
function calc(vector: Vector2D): void;

const vector: Vector3D = { x: 1, y: 1, z: 1}

calc(vector) // 並沒有丟擲錯誤

看上去calc()函數應該只能傳入Vector2D型別，但其實也可以傳入Vector3D，因為本質上Vector3D是Vector2D的子集。對於calc()函數來說，傳入的vector變數的型別中只要同時具有x、y屬性即可通過型別校驗。

這種特性這在TS中被稱為 Structual Typing（結構型別）。通常來說這會給我們的編碼過程帶來便利，但極端情況下，也可能不符合我們的預期。

假如嚴格規定函數只能傳入Vector2D型別而不能傳入Vector3D型別，那麼在型別實現上，就可以使用 名義上的型別（Nominal Type），通過為原型別新增一個獨有標識來區分彼此：

interface Vector2D { x: number, y: number, __type: '2d' };
interface Vector3D { x: number, y: number, z: number, __type: '3d' };
function calc(vector: Vector2D): void;

對於interface，我們可以直接為其增加標誌屬性，但 primitive types (原始型別) 要如何處理呢？答案是使用交叉型別，例如：

type Food = string &amp; { _type: 'food' };
type Money = number &amp; { _type: 'money' }

你可能會對最終型別有所疑問，但這樣處理之後，他們依舊是原始型別。因為實際上原始型別最終都會解析成對應的 WrapperType (包裹型別)，例如string → String，number → Number，就像在JS中一樣。這意味著你可把它們當做原始型別使用：

const money = 100 as Money;
const bill = money * 1; // bill 仍然是 number 型別

雖然這樣的使用方式顯得不太優雅，甚至有些繁瑣，但在某些情況下至少可以保證型別安全。假如你的型別系統中有許多基礎型別單元，那可能會非常有用。

拓展應用

這樣的型別雖然可以被當做原始型別使用，但本質上又不是純粹的原始型別。我們可以利用這個特性，寫出一些非常有趣和實用的型別。

例如在字面量列舉時，我們可以在限制預設值的同時，使用基於原始型別拓展出來的名義型別進行兜底，從而使得我們的型別能夠在具備足夠自由性的前提下，仍能享受到TypeScript的型別提示，如下：

可以看到，CustomLiteral名義型別不但可以享受到Literal字面量的型別提示，又能跳出列舉的限制，使用自定義字串。倘若我們將Literal和原始型別string直接交叉：

聯合型別的機制本質上是求並集，而求並集最終得到的型別將會是更加廣泛而通用的string，這使得我們反而使失去了字面量型別的推導。想要實現上述效果，就需要為string型別賦予“名義”，使它不同於普通的原始型別，不再那麼“廣泛”，從而在求並集的時候，不至於被string型別徹底拿捏。附上Typescript Playground。

在Vue中的應用

其實在Vue3原始碼中也有很多 Nominal Typing 的例子，例如VNode、Teleport、KeepAlive、Fragment等等這些內建元件，他們的定義中都有一個標誌變數用於區分。分別對應了__is_VNode，__isTeleport，__isKeepAlive，__isFragment。下圖是KeepAlive元件的宣告，更多元件宣告可以移步官方倉庫查閱。

如果型別宣告的位置處在函數入參上，為了防止與使用者定義的屬性產生衝突，通常會採用unique symbol作為鍵值來構造名義型別，例如：

以上就是TypeScript實用技巧 Nominal Typing名義型別詳解的詳細內容，更多關於TypeScript名義型別Nominal Typing的資料請關注it145.com其它相關文章！

TypeScript實用技巧 Nominal Typing名義型別詳解

目錄

Nominal Typing（名義型別）

概念解析

拓展應用

在Vue中的應用

熱門文章