Top des erreurs des développeurs TypeScript débutants : de A à Z

Top erreurs des développeurs TypeScript débutants : de A à Z

TypeScript est un outil puissant qui ajoute un typage statique à JavaScript, rendant le code plus prévisible et plus sûr. Cependant, le passage de JS à TS est souvent accompagné d'erreurs typiques qui peuvent annuler tous les avantages du typage strict. Dans cet article, nous allons analyser les erreurs les plus courantes des développeurs TypeScript débutants — de l'abus de any à une mauvaise gestion de null et undefined. Vous apprendrez comment les éviter et écrire un code propre et fiable.

1. Abus du type any

L'erreur la plus fréquente chez les débutants est d'utiliser any partout où « on n'a pas envie de réfléchir ». TypeScript est conçu pour les types, et any désactive complètement la vérification.

// ❌ Mauvais
function processData(data: any) {
  return data.length; // Erreur à l'exécution si data est un nombre
}

// ✅ Bon
function processData(data: string | unknown[]) {
  return data.length; // TypeScript vérifiera que data a une propriété length
}

Conseil : Utilisez unknown au lieu de any si le type est vraiment inconnu. Visez toujours des types spécifiques.

2. Ignorer strictNullChecks

Par défaut, strictNullChecks est activé, mais de nombreux débutants le désactivent « pour simplifier ». Cela entraîne des erreurs d'exécution.

// ❌ Mauvais (si strictNullChecks: false)
let name: string = null; // Fonctionne, mais provoquera une erreur plus tard

// ✅ Bon
let name: string | null = null; // On indique explicitement la possibilité de null
if (name !== null) {
  console.log(name.toUpperCase());
}

Conseil : Ne désactivez jamais strictNullChecks. Utilisez Optional Chaining (?.) et Nullish Coalescing (??) pour travailler en toute sécurité avec null/undefined.

3. Mauvaise utilisation des types de tableaux

La confusion entre Array<T> et T[] est normale, mais l'erreur principale est de ne pas spécifier le type des éléments.

// ❌ Mauvais
let items = []; // Type any[]
items.push(1);
items.push("hello"); // Fonctionne, mais on perd le contrôle

// ✅ Bon
let items: number[] = []; // Uniquement des nombres
let strings: Array<string> = []; // Écriture alternative

Conseil : Annotez toujours le type du tableau, surtout s'il est vide lors de la déclaration. Utilisez readonly pour l'immuabilité.

4. Mauvais typage des fonctions et callbacks

Les débutants oublient souvent de typer les paramètres des fonctions ou utilisent Function comme type.

// ❌ Mauvais
function fetchData(callback: Function) {
  callback("data", 123);
}
fetchData((err: string, data: number) => {}); // Erreur : 2 arguments attendus

// ✅ Bon
function fetchData(callback: (err: string | null, data: number) => void) {
  callback(null, 123);
}

Conseil : Typez explicitement les paramètres et la valeur de retour. Pour les callbacks, utilisez des types fléchés ou type/interface.

5. Confusion entre interface et type

Beaucoup ne comprennent pas la différence et les utilisent de manière interchangeable, ce qui peut entraîner des erreurs.

// interface — peut être fusionnée (declaration merging)
interface User {
  name: string;
}
interface User {
  age: number;
} // Fonctionne

// type — ne peut pas être fusionné, mais peut créer des unions/intersections
type Status = "active" | "inactive";
type Admin = User & { role: "admin" };

Conseil : Utilisez interface pour les objets qui peuvent être étendus (par exemple, dans les bibliothèques). Utilisez type pour les types union, les tuples et les compositions complexes.

6. Ignorer readonly et const