TypeScript Academy · Leçon

Chaînage optionnel avec ?.

Accéder en toute sécurité à des propriétés profondément imbriquées qui peuvent être null.

Chaînage optionnel avec ?. est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 chaînage optionnel

Le chaînage optionnel (?.) vous permet d’accéder en toute sécurité à une propriété qui peut appartenir à une valeur null ou undefined. Si la valeur est nulle ou indéfinie, toute l’expression s’arrête et renvoie undefined au lieu de lever une exception.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

Arrêt anticipé sur une valeur nulle ou indéfinie

Lorsque l’opérande précédant ?. vaut null ou undefined, l’évaluation s’arrête immédiatement et renvoie undefined. Le reste de la chaîne n’est jamais exécuté.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

Enchaîner plusieurs niveaux

Vous pouvez placer ?. à chaque étape incertaine d’un accès profond. Tout maillon nul ou indéfini interrompt toute la chaîne et vous protège contre les erreurs indiquant qu’il est impossible de lire une propriété d’une valeur indéfinie.

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

Le type du résultat inclut undefined

Comme la chaîne peut produire undefined, TypeScript ajoute undefined au type du résultat. Si le type de la propriété était string, le résultat du chaînage est string | undefined.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

Gérer le résultat undefined

Comme le résultat peut être undefined, vous devez généralement le vérifier ou fournir une valeur de secours. Le système de types vous rappelle de gérer le cas d’absence.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

Comparaison avec les chaînes &&

Avant l’arrivée de ?., les développeurs écrivaient de longues chaînes && : a && a.b && a.b.c. Le chaînage optionnel exprime la même intention de façon bien plus concise et se lit de haut en bas.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

Pourquoi ?. est préférable à &&

L’approche avec && considère toute valeur fausse (0, '', false) comme un point d’arrêt, ce qui peut constituer un bogue. Le chaînage optionnel s’arrête uniquement sur null ou undefined, ce qui correspond généralement à ce que vous souhaitez.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

Chaînage optionnel sur des tableaux d’objets

Le chaînage optionnel fonctionne avec n’importe quel accès à une propriété. Combiné à l’accès par élément, il permet d’atteindre en toute sécurité des tableaux imbriqués d’objets.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

L’arrêt anticipé interrompt toute l’expression

Une fois qu’une chaîne s’est arrêtée, même les accès aux propriétés écrits après celle-ci (sans ?.) sont ignorés. Toute l’expression est immédiatement évaluée à undefined.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

Chaînage optionnel avec les valeurs renvoyées par une fonction

Vous pouvez poursuivre le chaînage à partir du résultat d’un appel de fonction. Si la fonction renvoie une valeur nulle ou indéfinie, l’accès suivant s’arrête en toute sécurité.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

Un exemple pratique de configuration

Le chaînage optionnel est particulièrement utile pour lire une configuration partielle ou des réponses d’API dont certains champs imbriqués peuvent être absents. Il rend les accès lisibles et évite les plantages.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

Vérification rapide

Vérifiez votre compréhension du chaînage optionnel.

Récapitulatif : chaînage optionnel

Vous avez appris que ?. :

accède en toute sécurité aux propriétés de valeurs potentiellement null/undefined ;
interrompt toute l’expression et renvoie undefined lorsqu’un maillon est nul ou indéfini ;
ajoute undefined au type du résultat ;
améliore les chaînes && en s’arrêtant uniquement sur les valeurs nulles ou indéfinies, et non sur toutes les valeurs fausses.

Ensuite, l’opérateur de coalescence des valeurs nulles.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

Questions Fréquemment Posées

La leçon « Chaînage optionnel avec ?. » est-elle gratuite ?

Oui — le texte complet de « Chaînage optionnel 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 « Chaînage optionnel avec ?. » ?

Accéder en toute sécurité à des propriétés profondément imbriquées qui peuvent être null. 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 1 sur 4.

Combien de temps prend la leçon « Chaînage optionnel 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