TypeScript 標記的組合是 OP-js教程-PHP中文網

TypeScript Tagged Unions are OP

曾經在 TypeScript 中處理多個物件形狀時遇到困難，並希望有一個更類型安全的解決方案嗎？

如果是這樣，你並不孤單。許多開發人員沒有意識到標記聯合（也稱為歧視聯合）在 TypeScript 中提供的全部潛力。這項強大的功能可以增強程式碼的安全性、可讀性和可維護性。在本文中，我們將深入研究標記聯合併探索它們如何提高您的 TypeScript 技能。

?️ 什麼是標記聯合？

標記聯合允許您建立代表幾種可能形狀之一的類型，每個形狀都具有稱為「標記」或「鑑別器」的區別屬性。這使得 TypeScript 能夠縮小條件檢查中的類型範圍，確保您的程式碼明確處理所有可能的情況。

？為什麼你應該關心？

增強類型安全性

標記聯合透過確保處理所有可能的情況來幫助在編譯時捕獲錯誤。這可以減少運行時錯誤並使您的程式碼更加健壯。

清晰且可維護的程式碼

透過明確定義每個案例的形狀，您的程式碼將變得更具可讀性並且更易於維護。未來的開發者（甚至未來的你）會感謝你！

詳盡性檢查

如果您忘記處理可能的情況，TypeScript 可以向您發出警告，確保您的程式碼考慮到所有場景。

？透過範例標記工會

考慮一個場景，您有不同的形狀並想要計算它們的面積：

// Define interfaces with a discriminant property 'kind'
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

// Create a union type of all shapes
type Shape = Circle | Rectangle | Triangle;

// Function to calculate the area based on shape kind
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;

    case 'rectangle':
      return shape.width * shape.height;

    case 'triangle':
      return (shape.base * shape.height) / 2;

    default:
      // The 'never' type ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

登入後複製

這裡發生了什麼事？

判別屬性（kind）：每個介面都包含一個具有文字類型的kind屬性。該屬性充當聯合的標籤。
聯合類型（形狀）：將所有形狀介面組合成一個類型。
類型縮小：在 switch 語句中，TypeScript 根據 kind 屬性準確地知道它正在處理哪種形狀。
詳盡性檢查：具有 never 類型的預設情況可確保如果新增形狀但未處理，TypeScript 將產生編譯時錯誤。

?️ 範例：狀態管理

標記聯合在狀態管理場景中非常有用，例如表示非同步操作的各種狀態（例如，資料擷取）。

interface LoadingState {
  status: 'loading';
}

interface SuccessState {
  status: 'success';
  data: string;
}

interface ErrorState {
  status: 'error';
  error: string;
}

type AppState = LoadingState | SuccessState | ErrorState;

function renderApp(state: AppState) {
  switch (state.status) {
    case 'loading':
      return 'Loading...';
    case 'success':
      return `Data: ${state.data}`;
    case 'error':
      return `Error: ${state.error}`;
    // default case can be omitted because typescript is making sure all cases are covered!
  }
}

登入後複製

？為什麼這很好？

清晰的狀態表示：每個介面代表應用程式的不同狀態，使其易於理解和管理。
資料存取的類型安全性：當狀態為「成功」時，TypeScript 知道該狀態具有資料屬性。類似地，當狀態為「錯誤」時，它知道錯誤屬性。這可以防止您意外存取給定狀態下不存在的屬性。
詳盡檢查：如果新增狀態（例如狀態為「empty」的 EmptyState），TypeScript 會提醒您在 renderApp 函數中處理這個新情況。
提高可維護性：隨著應用程式的成長，管理不同的狀態變得更加容易管理。程式碼某一部分的變更會提示其他地方進行必要的更新，從而減少錯誤。