Comment vérifier null et undefined en TypeScript : pièges et meilleures solutions

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Introduction : Pourquoi « simple if (value) » peut vous piéger ?

Chaque développeur qui passe de JavaScript à TypeScript se heurte tôt ou tard à la question : « Is there a way to check for both null and undefined? ». Cette question a recueilli des milliers de vues sur Stack Overflow — et pour cause. À première vue, la tâche semble triviale : écrire if (value != null) ou if (value). Mais le diable, comme toujours, se cache dans les détails.

Dans cet article, nous allons analyser les principales erreurs commises par les débutants (et pas seulement) lors de la vérification de null et undefined en TypeScript. Vous découvrirez pourquoi la comparaison non stricte peut être plus dangereuse qu'il n'y paraît, comment fonctionne l'opérateur Nullish Coalescing (??) et quand utiliser des gardes de type personnalisées. C'est parti !

Erreur n°1 : Utiliser `if (!value)` pour toutes les valeurs fausses

L'anti-patron le plus courant est d'essayer de vérifier la présence d'une valeur via la négation :

// ❌ Mauvaisfunction processInput(input: string | null | undefined) {  if (!input) {    console.log('Saisie absente');    return;  }  console.log(input.toUpperCase());}

processInput(''); // ❌ Affichera "Saisie absente", alors que la chaîne est vide, mais PAS null et PAS undefined

Le problème est que !value convertit n'importe quelle valeur fausse en true. En TypeScript (et JavaScript), les valeurs fausses sont : false, 0, '' (chaîne vide), NaN, null, undefined. Si votre logique métier autorise une chaîne vide ou le nombre 0, ce code échouera.

Comment l'éviter : Utilisez une vérification stricte de null et undefined avec === ou !==.

Erreur n°2 : Faire aveuglément confiance à `value == null`

De nombreux développeurs savent que value == null (double égal) vérifie à la fois null et undefined. Cela fonctionne effectivement :

// ✅ Fonctionne, mais...function check(value: string | null | undefined) {  if (value == null) {    console.log('value est null ou undefined');  }}

Cependant, le double égal en TypeScript est une source de bugs non évidents. Par exemple, null == undefined donne true, mais null == false donne false. Et qu'en est-il de '' == false ? C'est aussi true. La comparaison non stricte peut se comporter de manière imprévisible, surtout dans des conditions complexes.

Comment l'éviter : En TypeScript, value == null est un modèle officiellement autorisé (le linter l'accepte souvent), mais pour les débutants, il est préférable d'adopter une approche explicite : value === null || value === undefined.

Erreur n°3 : Ignorer `undefined` lors du travail avec des objets

Parfois, les développeurs ne vérifient que null, en oubliant undefined :

// ❌ Dangereuxinterface User {  name?: string;  age: number | null;}

function greet(user: User) {  if (user.age !== null) {    console.log(`Âge : ${user.age}`);  }  // Si age n'est pas fourni (undefined), le code s'exécutera !}

greet({ name: 'Alice' }); // Affichera "Âge : undefined"

Le champ age peut être null, number ou undefined (s'il n'est pas spécifié dans l'interface). Vérifier uniquement null laisse passer undefined.

Comment l'éviter : Vérifiez toujours les deux valeurs si le type les autorise toutes les deux. Ou utilisez l'opérateur Optional Chaining (?.) et la coalescence nulle (??).