Uso de propiedades condicionales en TypeScript: un ejemplo práctico

En TypeScript, las propiedades condicionales nos permiten crear interfaces flexibles y con seguridad de tipos que se adaptan en función de ciertas condiciones. Esto es particularmente útil cuando se trata de estructuras de datos complejas donde ciertas propiedades solo deberían estar presentes en circunstancias específicas. En esta publicación de blog, exploraremos cómo usar propiedades condicionales con un ejemplo práctico que involucra grupos de recompensa.

El escenario

Imagina que tenemos un sistema que gestiona diferentes tipos de recompensas. Cada recompensa puede ser de un tipo específico, como “FINANCIACIÓN” o “ENVÍO”.

Dependiendo del tipo de recompensa, ciertos atributos deben incluirse o excluirse. Por ejemplo, las recompensas financieras deben incluir atributos financieros, mientras que las recompensas de envío deben incluir atributos de envío. Además, queremos asegurarnos de que ciertos atributos solo se incluyan según el tipo de recompensa y las condiciones de recompensa.

Definición de los tipos

Primero, definamos los tipos e interfaces básicos con los que trabajaremos:

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

Uso de tipos condicionales

Para garantizar que financeAttributes solo se incluya cuando rewardType es "FINANCIAR" y que rewardAttributes no se incluya cuando rewardOn es "Finanzas", podemos usar tipos condicionales. Así es como definimos el tipo de grupo de recompensas:

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

Explicación

Interfaz base:
RewardGroupBase contiene las propiedades comunes que siempre están presentes independientemente del tipo de recompensa.

Tipos condicionales:
Usamos una unión de tres tipos para manejar las propiedades condicionales.

• Cuando rewardType es "FINANCIAR" y rewardOn es "Finanzas", se requiere financeAttributes ,
  y los atributos de recompensa y de envío no están permitidos.

• Cuando rewardType es “ENVÍO” y rewardOn no es “Finanzas”, se requieren shippingAttributes y financeAttributes no están permitidos, pero se incluyen rewardAttributes.

• Para cualquier otro Tipo de recompensa y recompensa que no sea “Finanzas”, se incluyen los Atributos de recompensa, pero no se incluyen ni los Atributos de finanzas ni los Atributos de envío.

Ejemplo de uso

Así es como puedes utilizar el tipo RewardGroup en la práctica:

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