`truthy` et `falsy` en TypeScript

Dans cet article, nous expliquerons les concepts de truthy et falsy en TypeScript.

YouTube Video

truthy et falsy en TypeScript

Les concepts de truthy et falsy en TypeScript jouent un rôle très important dans les instructions conditionnelles des programmes. Ici, nous expliquerons ces concepts en détail et comment ils sont effectivement utilisés. De plus, nous fournirons des exemples spécifiques de code TypeScript pour comprendre comment les valeurs truthy et falsy sont traitées.

Qu'est-ce que truthy et falsy ?

En JavaScript et TypeScript, toute valeur est évaluée comme vraie (true) ou fausse (false) dans une expression conditionnelle. Ces valeurs sont logiquement classées en tant que truthy ou falsy.

• truthy fait référence aux valeurs qui sont évaluées comme true dans les expressions conditionnelles.
• falsy fait référence aux valeurs qui sont évaluées comme false dans les expressions conditionnelles.

En TypeScript, les valeurs suivantes sont considérées comme falsy :.

2. Le nombre 0
3. "" (chaîne vide)

Toutes les autres valeurs sont considérées comme truthy.

Exemples spécifiques de truthy et falsy

 1// Examples of falsy values
 2console.log("0 is", Boolean(0) ? "truthy" : "falsy");
 3console.log('"" is', Boolean("") ? "truthy" : "falsy");
 4console.log("null is", Boolean(null) ? "truthy" : "falsy");
 5console.log("undefined is", Boolean(undefined) ? "truthy" : "falsy");
 6console.log("NaN is", Boolean(NaN) ? "truthy" : "falsy");
 7
 8// Examples of truthy values
 9console.log("1 is", Boolean(1) ? "truthy" : "falsy");
10console.log('"hello" is', Boolean("hello") ? "truthy" : "falsy");
11console.log("[] is", Boolean([]) ? "truthy" : "falsy");
12console.log('" " (space) is', Boolean(" ") ? "truthy" : "falsy");

Conditionnelles utilisant truthy et falsy

Les concepts de truthy et falsy sont souvent utilisés dans les instructions conditionnelles et les boucles. Par exemple, dans des instructions if ou des boucles while, vous pouvez utiliser ces valeurs directement pour des évaluations conditionnelles simples.

 1// Checking if the length of the array is 0
 2let items: string[] = [];
 3
 4if (items.length) {
 5    console.log("The array is not empty");
 6} else {
 7    console.log("The array is empty");
 8}
 9
10// Checking if the input value is empty
11let input = "";
12
13if (input) {
14    console.log("Input has value");
15} else {
16    console.log("Input is empty"); // This will be executed
17}

Gestion des valeurs falsy avec ?? (opérateur de coalescence nulle) et || (OU logique)

En TypeScript, il existe plusieurs opérateurs utiles pour gérer les valeurs falsy. En particulier, l'Opérateur de Coalescence Nullish (??) et l'opérateur logique OU (||) sont couramment utilisés.

|| (OU logique)

L'opérateur logique OU est utilisé pour remplacer les valeurs falsy par une valeur par défaut. Cependant, toutes les valeurs falsy (pas uniquement null ou undefined, mais aussi 0, "", etc.) sont concernées.

1let username = "";
2let displayName = username || "Guest"; // Since username is empty, "Guest" is assigned
3
4console.log(displayName); // "Guest"

??（Nullish Coalescing）

L'Opérateur de Coalescence Nullish applique une valeur par défaut uniquement à null ou undefined, laissant les autres valeurs falsy (comme 0 ou "") inchangées.

1let username2 = "";
2let displayName2 = username2 ?? "Guest";
3// The empty string is retained
4// since username2 is not null or undefined
5
6console.log(displayName2); // ""

Pièges liés à truthy et falsy

Un point clé à surveiller en comprenant les valeurs truthy et falsy est que certaines valeurs inattendues peuvent être considérées comme falsy. Par exemple, 0 et les chaînes vides "" sont des valeurs valides, mais elles sont considérées comme falsy dans les conditions, ce qui peut entraîner des évaluations incorrectes.

1let score = 0;
2
3if (score) {
4    console.log("You have a score!"); // This will not be executed
5} else {
6    console.log("No score available"); // This will be executed
7}

Dans de tels cas, l'utilisation d'opérateurs de comparaison stricte permet de distinguer avec précision des valeurs telles que 0 et false.

1let score = 0;
2
3if (score === 0) {
4    console.log("Score is zero"); // Correctly evaluated
5}

Pièges liés à falsy et NaN

NaN nécessite un traitement particulier car il n'est égal à aucune valeur, y compris lui-même, lorsqu'on utilise des opérateurs de comparaison.

1console.log("NaN === NaN:", NaN === NaN); // false

Par conséquent, il est plus sûr d'utiliser Number.isNaN() pour détecter avec précision NaN.

 1// Bad Example
 2let value = parseInt("0");
 3if (!value) {
 4    console.log("Value is NaN"); // Incorrectly treats 0 as NaN
 5}
 6
 7// Good Example
 8let value2 = parseInt("hello");
 9if (Number.isNaN(value2)) {
10    console.log("Value is NaN"); // Correctly identifies NaN
11}

Ainsi, NaN n'est même pas égal à lui-même, donc les comparaisons avec NaN renvoient toujours false. En utilisant Number.isNaN(), vous pouvez effectuer des vérifications plus fiables.

Conclusion

Les concepts de truthy et falsy dans TypeScript sont très pratiques, mais vous devez être vigilant avec certaines valeurs, en particulier 0 et les chaînes vides. Lors de l'utilisation de ces valeurs dans des vérifications conditionnelles, utiliser une comparaison stricte (===) ou l'Opérateur de Coalescence Nullish (??) plutôt qu'une comparaison lâche (==) peut aider à éviter des comportements inattendus.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video