Aller au contenu principal
Dev Serein
Frontend

TypeScript — corriger les erreurs courantes

Exemples ciblés pour traiter undefined, unknown, les objets, les unions et les fonctions asynchrones avec un typage strict.

18commandesMis à jour le7 septembre 2026NiveauIntermédiaire
Toutes les cheatsheets

Quel message d’erreur ?

Message ou code Point d’entrée
TS2322 / TS2345 : type non assignable Vérifier le type attendu et réduire l’union avec typeof
Valeur possiblement null ou undefined Vérification explicite, ?. et valeur de repli avec ??
TS18046 : valeur unknown Garde de type ou instanceof Error avant d’accéder aux propriétés
TS7053 : clé incompatible avec l’objet keyof ou dictionnaire qui prévoit les clés absentes
Propriété absente sur une Promise Attendre le résultat avec await
Tableau inféré en never[] Déclarer le type des éléments dès la création

Exemples indépendants, prévus pour TypeScript 4.9+ en mode strict, avec les bibliothèques ES2015 ou ultérieures. Intégrez les fragments de configuration au tsconfig.json existant.

À retenir Pourquoi
Valider les données d’une API ou de JSON.parse Les types ne vérifient rien à l’exécution ; le JSON peut aussi être mal formé
Éviter any, ! ou as Type pour masquer une erreur Ils ne corrigent pas la donnée reçue
Tester précisément les valeurs absentes if (valeur) écarte aussi 0, false et ""
Vérifier les accès et propriétés optionnelles noUncheckedIndexedAccess et exactOptionalPropertyTypes complètent strict, sans être activés par lui

Après correction, lancez le contrôle de types du projet et ses tests. Pour Astro, Vue ou Svelte, utilisez aussi le vérificateur du framework.

Vérifier le projet

3 commandes
CommandeDescriptionExempleRisque
tsc --noEmitWindows · macOS · LinuxContrôler le projet avec le TypeScript déjà installé. npm exec peut proposer une installation si le binaire manque : annuler et installer les dépendances du projet.
npm exec -- tsc --noEmit -p tsconfig.json
Sûr
tsc --showConfigWindows · macOS · LinuxAfficher la configuration effective, y compris les options héritées.
npm exec -- tsc --showConfig -p tsconfig.json
Sûr
strictWindows · macOS · LinuxBase conseillée pour un nouveau projet. Dans un projet existant, planifier les corrections et conserver les options du framework.
{ "compilerOptions": { "strict": true, "noEmit": true } }
Sûr

Valeurs absentes et erreurs

4 commandes
CommandeDescriptionExempleRisque
paramètre optionnelWindows · macOS · LinuxVérifier undefined avant une opération qui exige un nombre. Éviter un test de vérité si 0 est valide.
function doubler(valeur?: number): number {
  if (valeur === undefined) return 0;
  return valeur * 2;
}
Sûr
?. et ??Windows · macOS · LinuxAccéder à une propriété optionnelle avec une valeur de repli ; ?? préserve 0, false et la chaîne vide.
function libelle(user: { nom?: string } | null): string {
  return user?.nom ?? "Anonyme";
}
Sûr
Array.findWindows · macOS · LinuxLe résultat peut être undefined même si le tableau contient des éléments.
function nomParId(users: { id: number; nom: string }[], id: number) {
  const user = users.find((item) => item.id === id);
  if (!user) throw new Error("Utilisateur introuvable");
  return user.nom;
}
Sûr
catch et unknownWindows · macOS · LinuxUne exception peut être une chaîne ou un autre objet : vérifier avant de lire message.
function messageErreur(error: unknown): string {
  return error instanceof Error ? error.message : String(error);
}
Sûr

Valider les données reçues

3 commandes
CommandeDescriptionExempleRisque
typeofWindows · macOS · LinuxRéduire une union avant d’utiliser une méthode propre à un type.
function normaliser(valeur: string | number): string {
  return typeof valeur === "string" ? valeur.trim() : valeur.toString();
}
Sûr
unknown et garde de typeWindows · macOS · LinuxContrôler tous les champs utiles avant de traiter une donnée externe comme User ; un prédicat incorrect tromperait le compilateur.
type User = { id: number; nom: string };
function estUser(value: unknown): value is User {
  return typeof value === "object" && value !== null
    && "id" in value && typeof value.id === "number"
    && Number.isFinite(value.id)
    && "nom" in value && typeof value.nom === "string";
}
Sûr
JSON.parse vers unknownWindows · macOS · LinuxParser le JSON puis valider la structure. Un JSON syntaxiquement valide peut avoir une forme incorrecte.
function lireNom(json: string): string {
  const value: unknown = JSON.parse(json);
  if (typeof value !== "object" || value === null
      || !("nom" in value) || typeof value.nom !== "string") {
    throw new Error("Champ nom invalide");
  }
  return value.nom;
}
Sûr

Objets, clés et tableaux

5 commandes
CommandeDescriptionExempleRisque
keyofWindows · macOS · LinuxLimiter une clé aux propriétés réelles de l’objet au lieu d’accepter une chaîne arbitraire.
function lire<T, K extends keyof T>(objet: T, cle: K): T[K] {
  return objet[cle];
}
const nom = lire({ id: 42, nom: "Lina" }, "nom");
Sûr
satisfiesWindows · macOS · LinuxVérifier une configuration sans remplacer son type par une assertion ; disponible depuis TypeScript 4.9.
type Config = { mode: "test" | "production"; delai: number };
const config = { mode: "test", delai: 3000 } satisfies Config;
Sûr
RecordWindows · macOS · LinuxDécrire un dictionnaire. Une clé libre peut manquer à l’exécution : refléter cette absence dans le type.
const scores: Record<string, number | undefined> = {};
const score = scores["Lina"] ?? 0;
Sûr
tableau vide typéWindows · macOS · LinuxAnnoncer le type des éléments d’un tableau destiné à être rempli. Utile notamment pour les états de composants.
type User = { id: number; nom: string };
const users: User[] = [];
users.push({ id: 42, nom: "Lina" });
Sûr
as constWindows · macOS · LinuxConserver des valeurs littérales et rendre les propriétés readonly au niveau du type ; ce n’est pas un gel à l’exécution.
const modes = ["clair", "sombre"] as const;
type Mode = (typeof modes)[number];
Sûr

États et fonctions asynchrones

3 commandes
CommandeDescriptionExempleRisque
union discriminéeWindows · macOS · LinuxDistinguer les formes d’une réponse grâce à un champ commun littéral.
type Resultat =
  | { ok: true; valeur: string }
  | { ok: false; erreur: string };
function afficher(resultat: Resultat): string {
  return resultat.ok ? resultat.valeur : resultat.erreur;
}
Sûr
neverWindows · macOS · LinuxFaire échouer la compilation si un nouveau cas n’est pas traité dans un switch exhaustif.
type Etat = "pret" | "chargement";
function label(etat: Etat): string {
  switch (etat) {
    case "pret": return "Prêt";
    case "chargement": return "Chargement";
    default: {
      const impossible: never = etat;
      throw new Error(String(impossible));
    }
  }
}
Sûr
Promise et awaitWindows · macOS · LinuxUne fonction async renvoie une Promise : attendre son résultat avant de l’utiliser.
async function charger(): Promise<string> {
  return "Prêt";
}
async function afficher(): Promise<void> {
  const texte = await charger();
  console.log(texte.toUpperCase());
}
Sûr
SUPER CALCULATEUR / CONNEXION ÉTABLIE

UN PASSAGE SECRET DANS DEV SEREIN

Bienvenue sur
Code Lyoko.

Le monde virtuel n’était qu’à quelques lettres.
Jérémie a ouvert la connexion. À toi de jouer.

Des arbres infinis, des chemins suspendus. Garde un œil sur la mer numérique.

LYOKO-GUERRIERS

Aelita · Yumi · Ulrich · Odd

SCAN DU TERRITOIREFORÊT / 01

ALERTE XANA · TOUR ACTIVÉE

On compte sur toi, Aelita.