首頁 > 軟體

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,因為本質上Vector3DVector2D的子集。對於calc()函數來說,傳入的vector變數的型別中只要同時具有xy屬性即可通過型別校驗。

這種特性這在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 & { _type: 'food' };
type Money = number & { _type: 'money' }

你可能會對最終型別有所疑問,但這樣處理之後,他們依舊是原始型別。因為實際上原始型別最終都會解析成對應的 WrapperType (包裹型別),例如string → Stringnumber → 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 的例子,例如VNodeTeleportKeepAliveFragment等等這些內建元件,他們的定義中都有一個標誌變數用於區分。分別對應了__is_VNode__isTeleport__isKeepAlive__isFragment。下圖是KeepAlive元件的宣告,更多元件宣告可以移步官方倉庫查閱。

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

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


IT145.com E-mail:sddin#qq.com