FrontMaster - Apprendre le Front-end Avance

Union et Intersection Types

Cas d'usage precis et exemples pratiques des unions et intersections.

Les Union Types permettent a une variable d'accepter plusieurs types. On utilise l'operateur | pour les definir. C'est utile quand une valeur peut avoir differentes formes.

Les Intersection Types combinent plusieurs types en un seul avec l'operateur &. Le type resultant possede toutes les proprietes de chaque type combine.

Quand utiliser quoi ? - Union : quand une valeur peut etre de type A ou de type B - Intersection : quand une valeur doit etre de type A et de type B

Les unions sont particulierement utiles pour les reponses API qui peuvent renvoyer differents formats, ou pour les etats d'un composant UI (loading, error, success).

Exemple de code

union-intersection.ts

typescript

// Union Types
type Status = "loading" | "success" | "error";
type ID = string | number;

function fetchUser(id: ID): void {
  // id peut etre string ou number
  console.log(`Fetching user ${id}`);
}

// Intersection Types
type HasName = { name: string };
type HasAge = { age: number };
type Person = HasName & HasAge;

const user: Person = {
  name: "Alice",
  age: 30
};

// Discriminated Unions (patron avance)
type ApiResponse<T> =
  | { status: "success"; data: T }
  | { status: "error"; message: string }
  | { status: "loading" };

function handleResponse(res: ApiResponse<User>) {
  switch (res.status) {
    case "success":
      console.log(res.data); // TypeScript sait que data existe
      break;
    case "error":
      console.error(res.message); // message est accessible
      break;
    case "loading":
      console.log("Chargement...");
      break;
  }
}

A retenir

1Les Union Types utilisent | pour permettre plusieurs types
2Les Intersection Types utilisent & pour combiner les types
3Les Discriminated Unions facilitent le pattern matching
4TypeScript infere correctement les types dans chaque branche

Exercice pratique

Creer une Discriminated Union

Definissez un type Shape qui est une discriminated union avec 3 variantes :

Un cercle avec un champ kind: "circle" et un champ radius (number)

Un rectangle avec un champ kind: "rectangle", width (number) et height (number)

Un triangle avec un champ kind: "triangle", base (number) et height (number)