TypeScript Academy · Leçon

Coalescence des valeurs nulles avec ??

Prévoir des solutions de repli uniquement pour null et undefined, et non pour toutes les valeurs évaluées comme fausses.

Coalescence des valeurs nulles avec ?? est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

L’opérateur de coalescence des valeurs nulles

L’opérateur ?? renvoie son membre de droite uniquement lorsque le membre de gauche vaut null ou undefined. Sinon, il renvoie la valeur de gauche. C’est la manière précise de fournir des valeurs par défaut.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

Seules les valeurs nulles ou indéfinies déclenchent la valeur de secours

Le mot clé est nul ou indéfini : seuls null et undefined entraînent l’utilisation du membre de droite. Toute autre valeur — y compris les valeurs fausses — est transmise sans modification.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

Le problème avec ||

L’opérateur logique OR || utilise la valeur de secours pour toute valeur fausse : 0, '', false, NaN, ainsi que les valeurs nulles ou indéfinies. Cela provoque souvent des bogues lorsque 0 ou la chaîne vide sont des entrées valides.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

Gérer correctement les valeurs par défaut

Utilisez ?? lorsque zéro, la chaîne vide ou false sont des valeurs légitimes que vous souhaitez conserver. Réservez || aux cas où toute valeur fausse doit réellement déclencher une valeur de secours.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? avec des paramètres de fonction

Un schéma courant consiste à fournir une valeur par défaut pour un paramètre facultatif lorsqu’une valeur undefined est transmise, tout en conservant les valeurs fausses porteuses de sens.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

Le type du résultat de ??

Le type de a ?? b retire null | undefined du type de a et l’unit au type de b. Si a est de type string | null et b de type string, le résultat est de type string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

Enchaîner les valeurs par défaut

Vous pouvez enchaîner ?? pour essayer plusieurs sources dans l’ordre et passer à la suivante lorsqu’une valeur est nulle ou indéfinie. La première valeur qui ne l’est pas est retenue.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? et la précédence

Vous ne pouvez pas combiner ?? avec || ou && sans parenthèses : TypeScript l’exige pour éviter toute ambiguïté. Regroupez toujours les expressions explicitement.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

Distinguer zéro d’une valeur absente

Un besoin fréquent dans les applications réelles : une température, un score ou un solde de 0 constitue une donnée valide, tandis que undefined signifie « non fourni ». ?? maintient cette distinction ; || les confond.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? avec les propriétés d’objet

Lire une propriété facultative et lui attribuer une valeur par défaut est l’utilisation courante de ??. Cet opérateur s’associe naturellement au chaînage optionnel, que vous combinerez dans la prochaine leçon.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

Quand choisir l’un ou l’autre

Règle de décision : si 0, '' ou false sont des valeurs valides que vous devez conserver, utilisez ??. Si vous souhaitez réellement remplacer toute valeur fausse, utilisez ||. Les bogues liés aux valeurs par défaut proviennent presque toujours de l’utilisation de || par habitude.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

Vérification rapide

Vérifiez votre compréhension de la coalescence des valeurs nulles.

Récapitulatif : coalescence des valeurs nulles

Vous avez appris que ?? :

Renvoie la valeur de repli uniquement lorsque le côté gauche est null ou undefined.
Préserve les valeurs valides évaluées comme fausses, telles que 0, '' et false — contrairement à ||.
Supprime null | undefined du type de résultat.
Exige des parenthèses lorsqu’il est combiné avec || ou &&.

Ensuite, nous combinons ?. et ??.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

Questions Fréquemment Posées

La leçon « Coalescence des valeurs nulles avec ?? » est-elle gratuite ?

Oui — le texte complet de « Coalescence des valeurs nulles avec ?? » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Coalescence des valeurs nulles avec ?? » ?

Prévoir des solutions de repli uniquement pour null et undefined, et non pour toutes les valeurs évaluées comme fausses. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Coalescence des valeurs nulles avec ?? » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à TypeScript Academy