Heim > Artikel > Web-Frontend > Wie verwende ich bedingte Typen in Typoskript?
In TypeScript ermöglichen uns bedingte Eigenschaften die Erstellung flexibler und typsicherer Schnittstellen, die sich an bestimmte 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 der Belohnungsart und den Belohnungsbedingungen enthalten sind.
Typen definieren
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<string, "Finance">; shippingAttributes: ShippingAttributes; financeAttributes?: never; rewardAttributes: RewardAttributes } | { rewardType: Exclude<RewardType, "FINANCE" | "SHIPPING">; rewardOn: Exclude<string, "Finance">; financeAttributes?: never; shippingAttributes?: never; rewardAttributes: RewardAttributes } );
Erklärung
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, ist „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 };
Das obige ist der detaillierte Inhalt vonWie verwende ich bedingte Typen in Typoskript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!