簡化 TypeScript 中的聯合類型和陣列

使用 TypeScript 時，您可能會發現自己需要定義一個聯合型別和一個包含該型別所有可能值的陣列。常見的方法是寫如下內容：

type Taste = 'しょうゆ' | 'みそ' | 'とんこつ';
const tastes = ['しょうゆ', 'みそ', 'とんこつ'];

乍一看，這似乎不錯。然而，這裡有一個隱藏的問題：每次想要更改或新增選項時，都需要更新 Taste 聯合類型和品味陣列。這種重複的工作可能會導致錯誤，並使維護程式碼變得更加乏味。

幸運的是，有一種方法可以透過減少冗餘來簡化這個過程。透過在 TypeScript 中使用 as const 斷言和 typeof，您可以將聯合類型和陣列的定義合併到一處。以下是重構上述程式碼的方法：

const tastes = ['しょうゆ', 'みそ', 'とんこつ'] as const;
type Taste = (typeof tastes)[number];

這種方法有幾個好處：

1. 單一事實來源：
   
   您只需在味道數組中定義一次值列表。 Taste 類型會自動從此數組派生，因此如果您需要更新列表，只需在一個地方執行即可。

2. 模式安全:
   
   透過使用 as const，TypeScript 將品味數組視為具有文字類型的元組，而不僅僅是字串數組。這可確保口味類型保持準確並與口味中的數值保持一致。

3. 更好的維護：
   
   由於 Taste 類型是從陣列產生的，因此不存在類型與實際值不符的風險。這減少了出現錯誤的可能性，並使程式碼更易於維護。

範例用例

現在，每當您在程式碼中使用 Taste 類型時，它保證與味道數組中的值相符：

function describeTaste(taste: Taste): string {
  switch (taste) {
    case 'しょうゆ':
      return 'Savory soy sauce flavor.';
    case 'みそ':
      return 'Rich miso flavor.';
    case 'とんこつ':
      return 'Creamy pork broth flavor.';
    default:
      return 'Unknown taste';
  }
}

const allTastes: Taste[] = tastes; // Safe, because they match the type!

這種模式不僅提高了程式碼的可讀性，而且還確保它不易出錯，特別是在處理需要保持同步的多個值時。

透過採用此策略，您可以讓您的 TypeScript 程式碼更具可維護性和可擴充性。當您處理大量值或您的程式碼庫隨著時間的推移而增長時，這特別有用。

以上是簡化 TypeScript 中的聯合類型和陣列的詳細內容。更多資訊請關注PHP中文網其他相關文章！