TypeScript Academy · Leçon

Combiner ?. et ??

Associer le chaînage optionnel à des valeurs par défaut judicieuses.

Combiner ?. et ?? est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Un duo idéal

Le chaînage optionnel et la coalescence des valeurs nulles sont conçus pour fonctionner ensemble. Le schéma obj?.value ?? fallback lit en toute sécurité une valeur imbriquée et fournit une valeur par défaut si elle est absente. C'est l'un des idiomes les plus utiles du TypeScript moderne.

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

Comment fonctionne ce schéma

D'abord, ?. évalue le chaînage et produit la valeur ou undefined. Ensuite, ?? vérifie ce résultat : s'il est nul ou indéfini, la valeur de repli est utilisée. Deux opérateurs, une seule expression claire.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

Le type du résultat

Le chaînage produit T | undefined ; ?? élimine undefined et réunit le type de la valeur de repli au premier type. Avec une valeur de repli correspondante, le type final est simplement T : il ne reste plus de undefined à gérer.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

Préserver les valeurs fausses valides

Comme ?? ne se déclenche que pour une valeur nulle ou indéfinie, un 0 légitime récupéré par le chaînage est conservé. La valeur de repli ne s'applique que lorsque la propriété est réellement absente.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

Accéder à une configuration imbriquée

Pour une configuration profondément imbriquée, enchaînez plusieurs étapes ?. et terminez par un seul ??. Si un élément manque, le résultat revient proprement à la valeur par défaut.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

Valeurs par défaut des réponses d'interface de programmation

Les réponses des interfaces de programmation omettent souvent les champs facultatifs. Le schéma combiné les lit avec prudence et leur substitue des valeurs par défaut pertinentes, ce qui simplifie le code en aval et évite les plantages.

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

Combiner avec les résultats de méthodes

Vous pouvez enchaîner des appels de fonctions ou de méthodes et définir une valeur par défaut pour leurs résultats. Si l'appel renvoie une valeur nulle ou indéfinie, la valeur de repli prend le relais.

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

Éviter les vérifications verbeuses

Avant l'apparition de ces opérateurs, vous auriez écrit des vérifications de valeurs nulles sur plusieurs lignes. Cet idiome combiné remplace tout un bloc par une seule expression, améliorant la lisibilité sans sacrifier la sécurité.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

Repli vers une autre recherche

La valeur placée après ?? peut elle-même être une autre recherche chaînée, ce qui vous permet d'essayer une source secondaire avant d'utiliser une dernière valeur par défaut littérale.

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

Combiner avec l'accès aux éléments

Ce schéma fonctionne également avec l'accès aux éléments d'un tableau : lisez un élément avec ?.[i], puis fournissez une valeur par défaut avec ??.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

Un lecteur de paramètres réaliste

Mettons tout cela en pratique : un lecteur de paramètres qui parcourt en toute sécurité des niveaux facultatifs et garantit une valeur utilisable. C'est du TypeScript de production que vous écrirez souvent.

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

Vérification rapide

Vérifiez votre compréhension de la combinaison de ?. et ??.

Récapitulatif : combiner ?. et ??

Vous avez appris l'idiome obj?.value ?? fallback :

?. parcourt les niveaux en toute sécurité et produit la valeur ou undefined.
?? fournit une valeur par défaut uniquement lorsque le résultat est nul ou indéfini.
Le type final ne contient plus undefined et devient souvent un simple T.
Les valeurs fausses valides comme 0 sont conservées.

Ensuite, les appels optionnels et l'accès optionnel aux éléments.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

Questions Fréquemment Posées

La leçon « Combiner ?. et ?? » est-elle gratuite ?

Oui — le texte complet de « Combiner ?. et ?? » 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 « Combiner ?. et ?? » ?

Associer le chaînage optionnel à des valeurs par défaut judicieuses. 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 3 sur 4.

Combien de temps prend la leçon « Combiner ?. et ?? » ?

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