Top des erreurs des développeurs TypeScript débutants

Top erreurs des développeurs TypeScript débutants

TypeScript est un outil puissant qui aide à écrire un code plus fiable et maintenable. Cependant, comme tout langage, il recèle des pièges, surtout pour les débutants. De nombreux développeurs viennent de JavaScript et continuent à utiliser de vieilles habitudes, annulant ainsi les avantages du typage statique. Dans cet article, nous allons analyser les 4 erreurs les plus fréquentes des développeurs TypeScript débutants, montrer comment les corriger et donner des conseils pratiques. Si vous débutez avec TypeScript, cet article vous aidera à éviter les pièges typiques.

1. Abus du type any

L'erreur la plus courante est d'utiliser any partout où TypeScript ne peut pas déduire le type automatiquement. Les débutants écrivent souvent ceci :

function processData(data: any) {    console.log(data.name.toUpperCase());}

Cela désactive complètement la vérification des types pour la variable data. Vous perdez tous les avantages de TypeScript : l'autocomplétion, la vérification des erreurs et la documentation du code.

Que faire à la place ?

Essayez toujours de décrire explicitement le type, même s'il est complexe. Utilisez unknown si le type est vraiment inconnu au moment de l'écriture du code :

function processData(data: unknown) {    if (typeof data === 'object' && data !== null && 'name' in data) {        console.log((data as { name: string }).name.toUpperCase());    }}

Ou, encore mieux, décrivez une interface :

interface DataItem {    name: string;    age?: number;}

function processData(data: DataItem) {    console.log(data.name.toUpperCase());}

Conseil : Configurez noImplicitAny: true dans tsconfig.json. Le compilateur signalera tout any implicite, et vous prendrez l'habitude d'écrire les types.

2. Ignorer strictNullChecks

En JavaScript, null et undefined sont des valeurs normales. En TypeScript, sans vérifications strictes, vous pouvez accidentellement accéder à une propriété de null et obtenir une erreur à l'exécution. Erreur typique :

function getLength(str: string | null) {    return str.length; // Erreur : Object is possibly 'null'}

Si strictNullChecks est désactivé, TypeScript ne vous avertira pas et l'erreur n'apparaîtra qu'à l'exécution.

Solution : Activez strict: true dans tsconfig.json. Cela activera automatiquement strictNullChecks. Désormais, TypeScript vous obligera à gérer null et undefined :

function getLength(str: string | null): number {    if (str === null) {        return 0;    }    return str.length;}

// Ou utilisez l'optional chaining et le nullish coalescing :function getLengthSafe(str: string | null): number {    return str?.length ?? 0;}

Important : Ne désactivez jamais strictNullChecks. C'est l'une des principales fonctionnalités de TypeScript qui prévient des millions de bugs.

3. Mauvaise gestion de async/await et des promesses

TypeScript type strictement les fonctions asynchrones, mais les débutants oublient souvent le type de retour Promise. Exemple d'erreur :

async function fetchUser(id: number) {    const response = await fetch(`/api/users/${id}`);    return response.json(); // TypeScript peut ne pas connaître le type exact}

Ici, response.json() retourne Promise<any>, et vous perdez à nouveau le typage. Un deuxième problème courant est d'oublier de gérer les erreurs :

async function loadData() {    const data = await fetchUser(1); // Si fetch échoue, l'erreur n'est pas gérée    console.log(data.name);}

Comment faire correctement ?

Indiquez toujours explicitement