在 TypeScript 中使用條件屬性：一個實際範例

在 TypeScript 中，條件屬性允許我們建立靈活且類型安全的接口，這些接口可以根據某些條件進行調整。這在處理複雜的資料結構時特別有用，其中某些屬性只應在特定情況下出現。在這篇文章中，我們將透過涉及獎勵組的實際範例來探討如何使用條件屬性。

場景

想像一下我們有一個管理不同類型獎勵的系統。每個獎勵可以是特定類型，例如“金融”或“運輸”。

根據獎勵類型，應包含或排除某些屬性。例如，經濟獎勵應包括經濟屬性，而運輸獎勵應包括運輸屬性。此外，我們希望確保僅根據獎勵類型和條件獎勵包含某些屬性。

定義型別

首先，讓我們定義我們將使用的基本類型和介面：

type RewardType = "FINANCE" | "SHIPPING" | "OTHER"; // Example values for RewardType

interface ItemConditionAttribute {
  // Define the properties of ItemConditionAttribute here
}

interface RewardAttributes {
  // Define the properties of RewardAttributes here
}

interface ShippingAttributes {
  // Define the properties of ShippingAttributes here
}

interface FinanceAttributes {
  // Define the properties of FinanceAttributes here
}

interface RewardGroupBase {
  groupId: number;
  rewardType: RewardType;
  rewardOn: string;
  itemConditionAttributes: ItemConditionAttribute[];
}

使用條件類型

為了確保僅當rewardType為“FINANCE”時才包含financeAttributes，並且當rewardOn為“Finance”時不包含rewardAttributes，我們可以使用條件類型。以下是我們定義 RewardGroup 類型的方式：

type RewardGroup = RewardGroupBase & (
  { rewardType: "FINANCE"; rewardOn: "Finance"; financeAttributes: FinanceAttributes; rewardAttributes?: never; shippingAttributes?: never } |
  { rewardType: "SHIPPING"; rewardOn: Exclude; shippingAttributes: ShippingAttributes; financeAttributes?: never; rewardAttributes: RewardAttributes } |
  { rewardType: Exclude; rewardOn: Exclude; financeAttributes?: never; shippingAttributes?: never; rewardAttributes: RewardAttributes }
);

解釋

基本介面：
RewardGroupBase 包含始終存在的通用屬性，無論獎勵類型為何。

條件類型：
我們使用三種類型的聯合來處理條件屬性。

• 當rewardType為「FINANCE」且rewardOn為「Finance」時，financeAttributes為必填項，
  且不允許使用rewardAttributes 和shippingAttributes。

• 當rewardType為「SHIPPING」且rewardOn不是「Finance」時，shippingAttributes為必填項，不允許financeAttributes，但包含rewardAttributes。

• 對於任何其他不是“Finance”的rewardType 和rewardOn，將包括rewardAttributes，但不包括financeAttributes 和shippingAttributes。

用法範例

以下是您在實踐中使用 RewardGroup 類型的方法：

const financeReward: RewardGroup = {
  groupId: 1,
  rewardType: "FINANCE",
  rewardOn: "Finance",
  itemConditionAttributes: [ /* properties */ ],
  financeAttributes: { /* properties */ }
};

const shippingReward: RewardGroup = {
  groupId: 2,
  rewardType: "SHIPPING",
  rewardOn: "Delivery",
  itemConditionAttributes: [ /* properties */ ],
  shippingAttributes: { /* properties */ },
  rewardAttributes: { /* properties */ }
};

// This will cause a TypeScript error because financeAttributes is not allowed for rewardType "SHIPPING"
const invalidReward: RewardGroup = {
  groupId: 3,
  rewardType: "SHIPPING",
  rewardOn: "Delivery",
  itemConditionAttributes: [ /* properties */ ],
  financeAttributes: { /* properties */ } // Error: financeAttributes
};