TypeScript 中的可辨識聯合(Discriminated Unions)設計模式

更新時間：2026年05月27日 10:08:52 作者：csdddn

TypeScript的可辨識聯合（Discriminated Unions）是一種結合聯合類型和字面量類型的設計模式,用于安全處理多種數據類型,本文就來詳細的介紹一下TypeScript可辨識聯合的使用,感興趣的可以了解一下

引言

在 TypeScript 開發(fā)中，處理多種可能的數據類型是常見需求?？杀孀R聯合（Discriminated Unions）設計模式提供了一種強大且類型安全的方式來處理這類場景。它通過結合聯合類型和字面量類型，使得開發(fā)者能夠清晰地表達不同數據類型之間的差異，并在編譯時獲得準確的類型檢查。

可辨識聯合的基本概念

可辨識聯合由兩部分組成：可辨識屬性和聯合類型?？杀孀R屬性是一個具有明確字面量類型的屬性，它作為區(qū)分不同類型成員的標志。聯合類型則將多個具有共同可辨識屬性的類型組合在一起。

例如，考慮一個表示不同形狀的場景。我們可以定義一個具有 kind 可辨識屬性的聯合類型，其中 kind 的值用于區(qū)分不同的形狀類型：

type Square = {
  kind: 'square';
  size: number;
};

type Rectangle = {
  kind: 'rectangle';
  width: number;
  height: number;
};

type Circle = {
  kind: 'circle';
  radius: number;
};

type Shape = Square | Rectangle | Circle;

在上述代碼中，kind 是可辨識屬性，Shape 是聯合類型，它包含了 Square、Rectangle 和 Circle 三種不同的形狀類型。

可辨識聯合的類型推斷

當使用可辨識聯合時，TypeScript 能夠根據可辨識屬性的值進行精確的類型推斷。這使得在處理聯合類型的成員時，代碼更加安全和可靠。

例如，我們可以編寫一個函數來計算不同形狀的面積：

function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case'square':
      return shape.size * shape.size;
    case'rectangle':
      return shape.width * shape.height;
    case 'circle':
      return Math.PI * shape.radius * shape.radius;
  }
}

在 calculateArea 函數中，switch 語句根據 shape.kind 的值進行分支判斷。TypeScript 能夠根據每個 case 語句中的值，推斷出 shape 的具體類型，從而提供準確的類型提示和檢查。例如，在 case'square' 分支中，shape 被推斷為 Square 類型，我們可以安全地訪問 size 屬性。

可辨識聯合的完整性檢查

可辨識聯合還提供了完整性檢查的功能。當使用 switch 語句處理可辨識聯合時，如果遺漏了某個可能的類型分支，TypeScript 會發(fā)出警告，提醒開發(fā)者處理所有可能的情況。

例如，如果我們忘記處理 Circle 類型的情況：

function calculateAreaIncomplete(shape: Shape): number {
  switch (shape.kind) {
    case'square':
      return shape.size * shape.size;
    case'rectangle':
      return shape.width * shape.height;
    // 缺少 case 'circle' 分支
  }
}

TypeScript 會提示 Function lacks ending return statement and return type does not include 'undefined'，因為編譯器檢測到 switch 語句沒有覆蓋所有可能的 Shape 類型，可能導致函數在某些情況下沒有返回值。

可辨識聯合在實際項目中的應用

狀態(tài)管理

在狀態(tài)管理庫中，可辨識聯合常用于表示不同的狀態(tài)類型。例如，在一個簡單的計數器應用中，我們可以定義不同的狀態(tài)類型：

type CounterState = {
  kind: 'initial';
} | {
  kind: 'incremented';
  count: number;
} | {
  kind: 'decremented';
  count: number;
};

function updateCounter(state: CounterState, action: 'increment' | 'decrement'): CounterState {
  switch (state.kind) {
    case 'initial':
      return action === 'increment'? { kind: 'incremented', count: 1 } : { kind: 'decremented', count: -1 };
    case 'incremented':
      return action === 'increment'? { kind: 'incremented', count: state.count + 1 } : { kind: 'decremented', count: state.count - 1 };
    case 'decremented':
      return action === 'increment'? { kind: 'incremented', count: state.count + 1 } : { kind: 'decremented', count: state.count - 1 };
  }
}

在這個例子中，CounterState 聯合類型表示計數器的不同狀態(tài)，updateCounter 函數根據當前狀態(tài)和操作更新計數器的狀態(tài)。

異步操作結果處理

在處理異步操作時，可辨識聯合可以用于表示操作的成功或失敗結果。例如：

type ApiResult<T> = {
  kind: 'success';
  data: T;
} | {
  kind: 'error';
  message: string;
};

async function fetchData(): Promise<ApiResult<string>> {
  try {
    const response = await fetch('https://example.com/api/data');
    const data = await response.text();
    return { kind:'success', data };
  } catch (error) {
    return { kind: 'error', message: error.message };
  }
}

async function processData() {
  const result = await fetchData();
  switch (result.kind) {
    case'success':
      console.log('Data:', result.data);
      break;
    case 'error':
      console.error('Error:', result.message);
      break;
  }
}

在這個例子中，ApiResult 聯合類型表示異步操作的結果，fetchData 函數返回一個 Promise<ApiResult<string>>，processData 函數根據操作結果進行不同的處理。

總結

可辨識聯合是 TypeScript 中一種強大且實用的設計模式。它通過可辨識屬性和聯合類型的結合，提供了精確的類型推斷和完整性檢查，使得代碼更加安全和可靠。在實際項目中，可辨識聯合廣泛應用于狀態(tài)管理、異步操作結果處理等場景，幫助開發(fā)者更好地組織和管理復雜的數據類型。通過合理使用可辨識聯合，開發(fā)者可以編寫出更具可維護性和類型安全性的 TypeScript 代碼。

到此這篇關于TypeScript 中的可辨識聯合(Discriminated Unions)設計模式的文章就介紹到這了,更多相關TypeScript 可辨識聯合內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: