Quel est un exemple d'utilisation d'un type union ?

Un exemple typique est la gestion d’entrées flexibles, comme une fonction qui accepte un prix soit en nombre soit en chaîne de caractères : 'function afficherPrix(prix: number | string) { ... }'.

Qu'est-ce qu'un type littéral ?

Un type littéral restreint une variable à des valeurs précises, définies à l'avance, comme 'let devise: "EUR" | "USD" | "MAD"'.

Comment combiner les types unions avec d'autres concepts ?

On peut combiner les types unions avec des types ou interfaces personnalisés pour des données plus complexes, par exemple, en définissant une interface 'Personne' avec un type 'Genre' qui utilise des types littéraux.

Types unions et littéraux en TypeScript

Q: Qu'est-ce qu'un type union ?

Un type union permet à une variable d’accepter plusieurs types possibles. On utilise le caractère '|' pour les séparer, par exemple, 'number | string'.

OUJOOD.COM

🔀 Les types unions

Un type union permet à une variable d’accepter plusieurs types possibles. On utilise le caractère | (barre verticale) pour les séparer.

📌 Exemple simple :

📋 Copier le code

let identifiant: number | string;

identifiant = 123;       // ✅ OK
identifiant = "abc123";  // ✅ OK
identifiant = true;      // ❌ Erreur : boolean n'est pas autorisé

identifiant peut être un number ou un string.
Mais pas un boolean, car il n’est pas inclus dans l’union.

📦 Utilisation typique : gestion d’entrées flexibles

On utilise souvent les types unions lorsqu’on veut accepter différentes formes de données en entrée.

📋 Copier le code

function afficherPrix(prix: number | string): void {
  console.log("Prix : " + prix + " €");
}

afficherPrix(19.99);   // OK
afficherPrix("19.99"); // OK

La fonction accepte un prix en number ou en string.
Utile pour gérer les entrées d'utilisateur (souvent des chaînes).

📐 Les types littéraux

Un type littéral permet de limiter une variable à des valeurs précises, comme un ensemble de choix autorisés.

📌 Exemple avec des devises :

📋 Copier le code

let devise: "EUR" | "USD" | "MAD";

devise = "EUR";  // ✅ OK
devise = "USD";  // ✅ OK
devise = "CAD";  // ❌ Erreur : non autorisé

devise n’accepte que les valeurs "EUR", "USD" ou "MAD".
Impossible d’y mettre une valeur non définie, même si elle est textuelle.

🎮 Exemple d’état de bouton :

📋 Copier le code

type EtatBouton = "actif" | "inactif" | "desactive";

let etat: EtatBouton = "actif";
etat = "desactive";     // ✅ OK
etat = "cliqué";        // ❌ Erreur

Le type EtatBouton est une union de littéraux.
Utile pour gérer des états, rôles, statuts avec sécurité maximale.

🎯 Combiner union + types personnalisés

On peut combiner les types unions avec type ou interface pour des données riches.

📋 Copier le code

type Genre = "homme" | "femme" | "autre";

interface Personne {
  nom: string;
  genre: Genre;
}

let p1: Personne = { nom: "Alex", genre: "autre" };
let p2: Personne = { nom: "Emma", genre: "inconnu" }; // ❌ Erreur