TP TypeScript : les bases du typage

Cinq exercices progressifs pour mettre en pratique les notions du cours TypeScript : les bases du typage : annotations explicites, inférence, any/unknown, null/undefined et types littéraux. Chaque exercice se résout dans un fichier .ts personnel, avec le corrigé en repli juste après l’énoncé.

Objectifs#

Étape 1 : types primitifs et annotations explicites#

Un profil de voyageur simple doit être décrit avec trois variables :

• nomVoyageur, une chaîne de caractères
• nombreDeVoyages, un nombre
• aBadgeFidelite, un booléen

Complète les annotations de type manquantes et donne à chaque variable une valeur cohérente avec son type.

let nomVoyageur: string = "Amina";
let nombreDeVoyages: number = 3;
let aBadgeFidelite: boolean = false;

console.log(nomVoyageur, nombreDeVoyages, aBadgeFidelite);

Étape 2 : inférence de type#

Une variable capitale est initialisée sans annotation, avec la valeur "Lisbonne". Laisse l’inférence de type agir dessus (n’ajoute pas d’annotation), puis réaffecte-lui une autre valeur de chaîne de caractères.

let capitale = "Lisbonne";

capitale = "Porto";

console.log(capitale);

Étape 3 : any vs unknown#

Une fonction afficherLongueur reçoit une donnée externe non typée (simulant un retour JSON) et doit afficher sa longueur si c’est bien une chaîne de caractères. Type le paramètre donnee en unknown plutôt qu’en any, et ajoute la vérification nécessaire avant d’accéder à .length.

function afficherLongueur(donnee: unknown) {
  if (typeof donnee === "string") {
    console.log(donnee.length);
  }
}

afficherLongueur("Lisbonne");

Étape 4 : null et undefined#

La variable dateAnnulation représente la date d’annulation d’une réservation, ou null si elle n’a pas été annulée. La fonction decrireAnnulation doit afficher la date si elle existe, ou un message par défaut sinon.

let dateAnnulation: string | null = null;

function decrireAnnulation(date: string | null): string {
  if (date === null) {
    return "Non annulée";
  }
  return "Annulée le " + date.toUpperCase();
}

dateAnnulation = "2026-01-15";

console.log(decrireAnnulation(dateAnnulation));

Étape 5 : never et types littéraux#

Le type StatutCommande doit être restreint aux trois valeurs "pending", "shipped" et "delivered". La fonction decrireCommande doit couvrir les trois cas avec un switch, et une branche default doit utiliser never pour garantir qu’aucun cas n’est oublié.

type StatutCommande = "pending" | "shipped" | "delivered";

function decrireCommande(statut: StatutCommande): string {
  switch (statut) {
    case "pending":
      return "En attente";
    case "shipped":
      return "Expédiée";
    case "delivered":
      return "Livrée";
    default: {
      const casImpossible: never = statut;
      return casImpossible;
    }
  }
}

console.log(decrireCommande("pending"));

Pour aller plus loin#

Une fois les cinq exercices maîtrisés, le défi suivant combine toutes les notions du module dans un seul scénario, sans fichier à trous fourni : une carte de fidélité voyageur avec un nom de client annoté explicitement, un nombre de points inféré, une dernière connexion string | null, un type littéral NiveauFidelite ("bronze", "argent", "or") décrit par un switch exhaustif, et une fonction qui vérifie via unknown une donnée simulant une réponse d’API avant de la mettre en majuscules.

Points clés à retenir#

• Annoter explicitement une variable (nom: type) bloque toute affectation d’un type différent dès la compilation
• L’inférence de type est aussi stricte qu’une annotation manuelle, elle évite juste de la répéter
• unknown protège une donnée externe non fiable, any désactive toute vérification
• strictNullChecks retire null/undefined des types par défaut, il faut les autoriser explicitement (string | null)
• never dans une branche default transforme un cas manquant en erreur de compilation détectée immédiatement