Utilisation de propriétés conditionnelles dans TypeScript : un exemple pratique

Dans TypeScript, les propriétés conditionnelles nous permettent de créer des interfaces flexibles et sécurisées qui s'adaptent en fonction de certaines conditions. Ceci est particulièrement utile lorsqu'il s'agit de structures de données complexes où certaines propriétés ne doivent être présentes que dans des circonstances spécifiques. Dans cet article de blog, nous explorerons comment utiliser les propriétés conditionnelles avec un exemple pratique impliquant des groupes de récompense.

Le scénario

Imaginez que nous ayons un système qui gère différents types de récompenses. Chaque récompense peut être d'un type spécifique, tel que « FINANCE » ou « EXPÉDITION ».

Selon le type de récompense, certains attributs doivent être inclus ou exclus. Par exemple, les récompenses financières doivent inclure des attributs financiers, tandis que les récompenses d'expédition doivent inclure des attributs d'expédition. De plus, nous voulons nous assurer que certains attributs ne sont inclus qu'en fonction du type de récompense et de la récompense sous conditions.

Définition des types

Tout d'abord, définissons les types et interfaces de base avec lesquels nous allons travailler :

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

Utilisation de types conditionnels

Pour garantir que financeAttributes est uniquement inclus lorsque rewardType est « FINANCE » et que rewardAttributes n'est pas inclus lorsque rewardOn est « Finance », nous pouvons utiliser des types conditionnels. Voici comment nous définissons le type 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 }
);

Explication

Interface de base :
RewardGroupBase contient les propriétés communes qui sont toujours présentes quel que soit le type de récompense.

Types conditionnels :
Nous utilisons une union de trois types pour gérer les propriétés conditionnelles.

• Lorsque rewardType est "FINANCE" et rewardOn est "Finance", financeAttributes est requis,
  et les rewardAttributes et shippingAttributes ne sont pas autorisés.

• Lorsque rewardType est « SHIPPING » et rewardOn n'est pas « Finance », shippingAttributes est obligatoire et financeAttributes n'est pas autorisé, mais rewardAttributes est inclus.

• Pour tout autre rewardType et rewardOn n'étant pas « Finance », rewardAttributes est inclus, mais ni financeAttributes ni shippingAttributes sont inclus.

Exemple d'utilisation

Voici comment utiliser le type RewardGroup en pratique :

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