TypeScript 標記的組合是 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 函數中處理這個新情況。

• 提高可維護性：隨著應用程式的成長，管理不同的狀態變得更加容易管理。程式碼某一部分的變更會提示其他地方進行必要的更新，從而減少錯誤。

？使用標記聯合的技巧

一致的鑑別器：在所有類型中使用相同的屬性名稱（例如類型、種類或狀態）。
文字類型：確保鑑別器屬性使用文字類型（「電子郵件」、「簡訊」等）以實現準確的類型縮小。
避免字串枚舉：對於鑑別器，優先使用字串文字類型而不是枚舉，以保持類型縮小的直接性。

？結論

標記聯合是 TypeScript 中的一項強大功能，可以幫助您編寫更安全、更易於維護的程式碼。透過明確處理每種可能的類型，您可以減少意外錯誤的機會並使程式碼更易於理解。

在目前或下一個 TypeScript 專案中嘗試標記聯合體並親身體驗其好處！

？進一步閱讀

• TypeScript 手冊：並集與交集類型
• 什麼是 TypeScript 可區分聯合？

以上是TypeScript 標記的組合是 OP的詳細內容。更多資訊請關注PHP中文網其他相關文章！