TypeScript Academy · Leçon

Appels et accès aux éléments optionnels

Utiliser ?.() et ?.[] pour appeler des méthodes et effectuer des indexations en toute sécurité.

Appels et accès aux éléments optionnels est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Au-delà de l’accès aux propriétés

Le chaînage optionnel ne se limite pas à obj?.prop. Il possède deux autres formes : les appels optionnels avec ?.() et l’accès optionnel aux éléments avec ?.[index]. Dans les deux cas, l’évaluation s’interrompt lorsque la valeur est nulle ou indéfinie, comme pour l’accès aux propriétés.

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

Appels de méthodes optionnels

Utilisez obj.method?.() pour appeler une méthode uniquement si elle existe. Si method est null ou undefined, l’appel est ignoré et l’expression produit undefined.

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

Où placer ?.

Le ?. se place juste avant les parenthèses d’appel. obj.method?.() vérifie method, et non obj. Pour protéger également obj, écrivez obj?.method?.().

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

Appel de fonctions de rappel optionnelles

Un usage très courant consiste à appeler un paramètre de fonction de rappel optionnel. Au lieu d’une vérification avec if, écrivez callback?.() pour l’appeler uniquement lorsqu’il est fourni.

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

Accès optionnel aux éléments

Pour les tableaux ou les signatures d’index qui peuvent être nuls ou indéfinis, utilisez arr?.[index]. Si arr est nul ou indéfini, l’évaluation de l’accès s’interrompt ; sinon, l’élément est lu normalement.

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

Accès aux éléments avec des clés dynamiques

L’accès optionnel aux éléments fonctionne également avec la notation entre crochets pour des clés dynamiques ou calculées sur un objet potentiellement nul ou indéfini.

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

Combiner accès aux éléments et appels

Vous pouvez combiner librement ces formes. Accédez à un tableau optionnel, puis appelez éventuellement une méthode sur l’élément : chaque ?. protège sa propre étape.

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

Chaînage optionnel avec les résultats de fonctions

Vous pouvez poursuivre le chaînage à partir de la valeur renvoyée par une fonction. Si la fonction produit une valeur nulle ou indéfinie, les appels ou accès suivants s’interrompent sans risque.

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

Le type de résultat inclut undefined

Comme pour les chaînes de propriétés, les appels optionnels et l’accès aux éléments ajoutent undefined au type de résultat. Associez-les à ?? pour fournir une valeur par défaut et éliminer undefined.

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

Protéger les gestionnaires d’événements

Dans le code de l’interface utilisateur et de la gestion des événements, les appels optionnels permettent d’appeler élégamment des gestionnaires qui ne sont peut-être pas définis. Aucune vérification d’existence verbeuse ni aucun plantage lorsque le gestionnaire est absent.

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

Exemple de répartiteur de modules d’extension

Pour tout rassembler : un répartiteur qui appelle éventuellement un point d’extension nommé d’un module dans un registre potentiellement clairsemé, et utilise un résultat par défaut lorsque rien ne traite la demande.

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

Vérification rapide

Vérifiez votre compréhension des appels optionnels et de l’accès aux éléments.

Récapitulatif : appels et accès optionnels

Vous avez découvert les autres formes du chaînage optionnel :

obj.method?.() appelle une méthode uniquement si elle existe.
arr?.[index] lit sans risque un élément d’un conteneur potentiellement nul ou indéfini.
Toutes les formes renvoient undefined après interruption de l’évaluation lorsqu’un opérande est nul ou indéfini.
Combinez-les avec ?? pour fournir une valeur par défaut.

Cours suivant : bases de readonly et de l’immuabilité.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

Questions Fréquemment Posées

La leçon « Appels et accès aux éléments optionnels » est-elle gratuite ?

Oui — le texte complet de « Appels et accès aux éléments optionnels » 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 « Appels et accès aux éléments optionnels » ?

Utiliser ?.() et ?.[] pour appeler des méthodes et effectuer des indexations en toute sécurité. 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 4 sur 4.

Combien de temps prend la leçon « Appels et accès aux éléments optionnels » ?

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