在 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
};