VITON13School

TypeScriptLeçon 11 sur 16

readonly et types utilitaires

Les types utilitaires créent un nouveau type à partir d'un type existant : plus besoin de le décrire deux fois. Ce sont des génériques intégrés à TypeScript.

L’essentiel

  • Readonly<T> et un champ readonly interdisent l'écrasement.
  • Partial<T> rend tous les champs optionnels, pratique pour les mises à jour.
  • Pick<T, "a" | "b"> garde seulement les champs cités ; Omit<T, "id"> les retire.
  • Record<K, V> est un objet aux clés K et aux valeurs V.
  • readonly string[] est un tableau sans push ni autre méthode qui le modifie.

Exemple

interface Profile {  readonly id: number;  name: string;  email: string;} type ProfileUpdate = Partial<Profile>; // every field becomes optionaltype PublicProfile = Pick<Profile, "id" | "name">; // only these two fieldstype NewProfile = Omit<Profile, "id">; // everything except idtype Scores = Record<string, number>; // keys are strings, values are numbers const patch: ProfileUpdate = { name: "Sam" };const card: PublicProfile = { id: 7, name: "Sam" };const draft: NewProfile = { name: "Kim", email: "kim@example.com" };const scores: Scores = { math: 5, art: 4 };// card.id = 8; // error: 'id' is read-only const week: readonly string[] = ["Mon", "Tue"];// week.push("Wed"); // error: push does not exist on readonly string[] console.log(`${patch.name} #${card.id}, ${draft.name}, math ${scores.math}, ${week.length} days`);

Un seul Profile donne quatre types, sans écrire un champ deux fois. Si Profile change, les types dérivés suivent automatiquement.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Rendez defaults en lecture seule, patch Partial et summary un Pick de deux champs, ajoutez titles avec Record et affichez « Default: light, 16px », « Mine: dark, 18px », « Night mode ».

Sortie

Ce que le programme affiche apparaîtra ici.