Verwendung bedingter Eigenschaften in TypeScript: Ein praktisches Beispiel

In TypeScript ermöglichen uns bedingte Eigenschaften die Erstellung flexibler und typsicherer Schnittstellen, die sich basierend auf bestimmten Bedingungen anpassen. Dies ist besonders nützlich, wenn es um komplexe Datenstrukturen geht, bei denen bestimmte Eigenschaften nur unter bestimmten Umständen vorhanden sein sollten. In diesem Blogbeitrag untersuchen wir anhand eines praktischen Beispiels mit Belohnungsgruppen, wie bedingte Eigenschaften verwendet werden.

Das Szenario

Stellen Sie sich vor, wir hätten ein System, das verschiedene Arten von Belohnungen verwaltet. Jede Belohnung kann von einem bestimmten Typ sein, beispielsweise „FINANZEN“ oder „VERSAND“.

Je nach Belohnungstyp sollten bestimmte Attribute einbezogen oder ausgeschlossen werden. Beispielsweise sollten finanzielle Prämien finanzielle Attribute beinhalten, während Versandprämien Versandattribute beinhalten sollten. Darüber hinaus möchten wir sicherstellen, dass bestimmte Attribute nur basierend auf dem Belohnungstyp und den Belohnungsbedingungen enthalten sind.

Definieren der Typen

Lassen Sie uns zunächst die grundlegenden Typen und Schnittstellen definieren, mit denen wir arbeiten werden:

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[];
}

Bedingte Typen verwenden

Um sicherzustellen, dass „financeAttributes“ nur enthalten ist, wenn „rewardType“ „FINANCE“ ist, und „rewardAttributes“ nicht enthalten ist, wenn „rewardOn“ „Finance“ ist, können wir bedingte Typen verwenden. So definieren wir den RewardGroup-Typ:

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

Erläuterung

Basisschnittstelle:
RewardGroupBase enthält die allgemeinen Eigenschaften, die unabhängig vom Belohnungstyp immer vorhanden sind.

Bedingte Typen:
Wir verwenden eine Vereinigung von drei Typen, um die bedingten Eigenschaften zu verarbeiten.

• Wenn „rewardType“ „FINANCE“ und „rewardOn“ „Finance“ ist, sind „financeAttributes“ erforderlich,
  und rewardAttributes und shippingAttributes sind nicht zulässig.

• Wenn „rewardType“ „SHIPPING“ und „rewardOn“ nicht „Finance“ ist, ist „shippingAttributes“ erforderlich und „financeAttributes“ ist nicht zulässig, „rewardAttributes“ ist jedoch enthalten.

• Für alle anderen RewardTypes und RewardOns, die nicht „Finance“ sind, sind „rewardAttributes“ enthalten, aber weder „financeAttributes“ noch „shippingAttributes“.

Beispielverwendung

So können Sie den Typ „RewardGroup“ in der Praxis verwenden:

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