Discriminated Unions 介紹

Discriminated Unions

先看範例:

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };

function area(s: Shape) {
  if (s.kind === "circle") {
    return Math.PI * s.radius * s.radius;
  } else if (s.kind === "square") {
    return s.x * s.x;
  } else {
    return (s.x * s.y) / 2;
  }
}

在這個範例中，Shape 是一個 Union Type。每個型別都有辨識屬性 kind，TypeScript 會根據這個屬性來區分型別。例如，當 kind 是 "circle" 時，TypeScript 可以推斷 s 一定有 radius 屬性，而不會有其他不相關的屬性。

透過 if 條件，TypeScript 可以縮小型別範圍，當判斷條件 s.kind === "circle" 為真時，TypeScript 會將 s 的型別縮小到 circle，這樣就可以安全地訪問 radius 屬性。

當然除了 if，switch 也有同樣的效果。

Type Guards 和 Narrowing

Type Guards : 是指在透過特定的邏輯判斷來縮小變數的型別範圍，有時也會搭配 typeof , instanceof , in 等關鍵字使用。 Narrowing : 是指將變數的型別從更廣泛的範圍縮小到具體型別的過程，常搭配 Type Guards 使用。

Discriminated Unions 使用時機

Discriminated Unions 適合在處理多種可能的狀態或多個不同類型的情境時使用。特別是當我們有多個型別之間有部份差異，但還是共享某些共同屬性時。常用於下列情境：

• API 回傳狀態：根據不同的 API 回傳狀態，可能會有不同的結構和資料。
• React Component Props：根據不同的 props 的值，會渲染不同的 UI 或使用不同的邏輯。

關於 React Component Props 的說明可以參考 此篇筆記。