Erreur TypeScript TS2533 : comment la supprimer et ce qu'il y a sous le capot

Introduction : pourquoi TypeScript crie-t-il pour rien ?

Vous écrivez du code en TypeScript, tout semble logique, mais soudain le compilateur affiche : "error TS2533: Object is possibly 'null' or 'undefined'". Cela vous dit quelque chose ? Cette erreur est l'un des "pièges" les plus fréquents pour les débutants. Selon Stack Overflow, la question sur sa suppression a recueilli plus de 100 000 vues et est devenue un classique.

Mais regardons plus en profondeur. TypeScript n'est pas simplement un "JavaScript strict". Son système de types, en particulier le mode strictNullChecks, vous oblige à gérer explicitement les cas où une valeur peut être null ou undefined. Et ce n'est pas un bug, mais une fonctionnalité. L'erreur TS2533 est une protection contre les bugs runtime qui, en JavaScript, conduisent souvent à Cannot read property of null.

Dans cet article, nous allons voir :

\n
• Ce qu'est strictNullChecks et comment il fonctionne "sous le capot"
\n
• Pourquoi l'erreur TS2533 se produit
\n
• 5 façons de la supprimer (des simples aux avancées)
\n
• Quand chaque méthode est appropriée, et quand elle ne l'est pas
\n

C'est parti pour comprendre l'erreur null TypeScript une fois pour toutes !

Comment fonctionne strictNullChecks sous le capot

Par défaut dans TypeScript (depuis la version 2.0), l'option strictNullChecks est activée. Qu'est-ce que cela signifie ? Avant, null et undefined étaient considérés comme des sous-types de n'importe quel type. Vous pouviez donc assigner null à une variable de type string — et TypeScript ne disait rien. Cela simplifiait le code, mais menait à des bugs.

En mode strictNullChecks, les types null et undefined sont des entités distinctes. Une variable de type string ne peut contenir qu'une chaîne de caractères. Si vous voulez autoriser null, vous devez explicitement spécifier string | null.

Exemple : à quoi ressemble l'erreur

// Exemple 1 : erreur TS2533 classique\ninterface User {\n  name: string;\n  email?: string; // optionnel — peut être undefined\n}\n\nfunction getUserEmail(user: User): string {\n  // Erreur TS2533 : Object is possibly 'undefined'\n  return user.email.toUpperCase(); \n}\n\n// Exemple 2 : travail avec le DOM\nconst button = document.querySelector('button');\n// Erreur TS2533 : Object is possibly 'null'\nbutton.addEventListener('click', () => console.log('clicked'));\n

Dans le second exemple, document.querySelector peut retourner null si l'élément n'est pas trouvé. TypeScript vous avertit : "Hé, es-tu sûr que le bouton existe ?"

5 façons de supprimer l'erreur TS2533

Passons maintenant au plus important — comment supprimer l'erreur. Voici 5 méthodes éprouvées, des simples aux avancées. Choisissez selon la situation.

1. Opérateur d'assertion non-null (!)

La méthode la plus rapide est de mettre un point d'exclamation ! après l'expression. Cela indique à TypeScript : "Je sais que ce n'est pas null, fais-moi confiance".

// Utilisation de ! pour supprimer\nconst button = document.querySelector('button')!;\nbutton.addEventListener('click', () => console.log('clicked'));\n\n// Pour une propriété optionnelle\nfunction getUserEmail(user: User): string {\n  return user.email!.toUpperCase();\n}\n

Quand l'utiliser : lorsque vous êtes absolument certain que la valeur n'est pas null. Par exemple, si vous venez de vérifier la présence d'un élément dans le DOM. Mais soyez prudent : si vous vous trompez, vous obtiendrez une erreur runtime.

2. Optional chaining (?.) et nullish coalescing (??)

Une méthode moderne et sûre. L'opérateur ?. permet d'accéder à une propriété uniquement si l'objet n'est pas null/undefined. Et ?? définit une valeur par défaut.

function getUserEmail(user: User): string {\n  // Si email est undefined — on retourne une chaîne vide\n  return user.email?.toUpperCase() ?? '';\n}\n\n// Travail avec le DOM\ndocument.querySelector('butt