Skip to content

Discriminated Union

可辨識聯合型別

01你是不是遇到這個 / THE SYMPTOM

我有一種資料會有好幾種「狀態」或「種類」(例如載入中/成功/失敗,或圓形/方形),每種帶的欄位都不一樣。我想用一個共同的標記欄位來區分,這樣 TypeScript 在 switch 裡就能自動知道每個分支該有哪些欄位、不要讓我亂存取不存在的欄位。

↑ 如果你點頭了,你要的關鍵字就是 Discriminated Union

02這是什麼 / DEFINITION

一種 TypeScript 設計模式:多個物件型別共用一個固定的「標籤」欄位(如 kind 或 status),TypeScript 靠這個欄位的值自動判斷目前是哪一種、收窄出對應的型別。

03什麼時候用 / WHEN TO USE

用來表達「同一個資料有多種互斥狀態」——API 請求狀態(idle/loading/success/error)、表單欄位類型、Redux/事件的 action 等。比起一堆可有可無的 optional 欄位,這樣型別更精確也更不易出錯。

04怎麼跟 AI 說 / HOW TO ASK

直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT:

幫我把這個狀態型別改成 discriminated union,用 status 當標籤欄位('loading' | 'success' | 'error'),讓 switch (state.status) 在每個分支自動收窄出對應欄位。
05常見坑 / WATCH OUT

標籤欄位必須是「字面量型別」(如 'success' 而非泛泛的 string),否則無法辨識。常搭配 switch 的 default 分支放 exhaustiveness check(never 型別)來確保少寫一種狀態時編譯就報錯。

06相關的詞 / RELATED