Types nullables ('strictNull')

Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy. Leçon 71 sur 73.

Par défaut, TypeScript permet d'assigner null et undefined à n'importe quel type, ce qui peut entraîner des erreurs d'exécution. L'option de compilation strictNullChecks modifie ce comportement en faisant de null et undefined leurs propres types distincts.

Lorsque strictNullChecks est activé, vous devez explicitement inclure null ou undefined dans vos annotations de type si vous souhaitez autoriser ces valeurs :

// Sans strictNullChecks - ceci serait autorisé
let name: string = null; // Erreur avec strictNullChecks !

// Avec strictNullChecks - vous devez être explicite
let name: string | null = null; // Maintenant, cela fonctionne

Cela vous oblige à gérer les potentielles valeurs null avant de les utiliser. Vous ne pouvez pas appeler de méthodes ou accéder à des propriétés sur une valeur qui pourrait être null sans avoir vérifié au préalable :

function processName(name: string | null) {
  // Cela provoquerait une erreur
  // console.log(name.toUpperCase());
  
  // Vous devez d'abord vérifier
  if (name !== null) {
    console.log(name.toUpperCase()); // Sûr à utiliser
  }
}

Cette option du compilateur aide à prévenir les erreurs d'exécution courantes « Cannot read property of null » en les détectant au moment de la compilation, rendant votre code plus fiable et prévisible.

Défi

Facile

Créez une fonction qui traite en toute sécurité les données de profil utilisateur pouvant contenir des valeurs null. Ce défi démontre comment strictNullChecks vous oblige à gérer explicitement les types nullables.

Créez une fonction nommée getUserDisplayName qui :

Prend un paramètre fullName de type string | null
Retourne le nom complet s'il n'est pas null
Retourne "Anonymous User" si le nom complet est null
A un type de retour explicite string

Créez une deuxième fonction nommée formatUserEmail que :

Prend un paramètre email de type string | null
Retourne l'e-mail en minuscules s'il n'est pas null
Retourne "No email provided" si l'e-mail est null
A un type de retour explicite string

Créez une troisième fonction nommée getUserInfo qui :

Prend deux paramètres : name de type string | null et email de type string | null
Utilise les deux fonctions précédentes pour traiter les paramètres
Retourne une chaîne formatée : "Name: [processed name], Email: [processed email]"
A un type de retour explicite string

Testez vos fonctions avec les données suivantes :

Appelez getUserDisplayName("John Smith") et affichez le résultat
Appelez getUserDisplayName(null) et affichez le résultat
Appelez formatUserEmail("ALICE@EXAMPLE.COM") et affichez le résultat
Appelez formatUserEmail(null) et affichez le résultat
Appelez getUserInfo("Bob Johnson", "bob@test.com") et affichez le résultat
Appelez getUserInfo(null, null) et affichez le résultat
Appelez getUserInfo("Sarah Wilson", null) et affichez le résultat

Essayez vous-même

// À FAIRE : Écrivez votre code ici
// Créez la fonction getUserDisplayName qui prend fullName (string | null) et retourne une chaîne de caractères

// Créez la fonction formatUserEmail qui prend email (string | null) et retourne une chaîne de caractères

// Créez la fonction getUserInfo qui prend name et email (tous deux string | null) et retourne une chaîne de caractères

// Testez les fonctions et affichez les résultats
console.log(getUserDisplayName("John Smith"));
console.log(getUserDisplayName(null));
console.log(formatUserEmail("ALICE@EXAMPLE.COM"));
console.log(formatUserEmail(null));
console.log(getUserInfo("Bob Johnson", "bob@test.com"));
console.log(getUserInfo(null, null));
console.log(getUserInfo("Sarah Wilson", null));