Heim >Web-Frontend >js-Tutorial >Wie verwende ich bedingte Typen in Typoskript?

Wie verwende ich bedingte Typen in Typoskript?

Susan Sarandon
Susan SarandonOriginal
2024-11-06 12:46:02487Durchsuche

How to use Conditional Types in typescript?

Verwendung bedingter Eigenschaften in TypeScript: Ein praktisches Beispiel

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn