0Pricing
TypeScript Academy · Lezione

Optional chaining con ?.

Acceda in sicurezza a proprietà profondamente annidate che potrebbero essere null.

Optional chaining con ?. è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

L'operatore optional chaining

L'optional chaining (?.) consente di accedere in modo sicuro a una proprietà di un valore che potrebbe essere null o undefined. Se il valore è nullish, l'intera espressione restituisce undefined interrompendosi, invece di generare un'eccezione.

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

Interruzione sui valori nullish

Quando l'operando prima di ?. è null o undefined, la valutazione si interrompe immediatamente e restituisce undefined. Il resto della catena non viene mai eseguito.

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

Concatenare più livelli

Può inserire ?. in ogni passaggio incerto di un accesso annidato. Qualsiasi collegamento nullish interrompe l'intera catena, proteggendola dagli errori «cannot read property of undefined».

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

Il tipo del risultato include undefined

Poiché la catena può produrre undefined, TypeScript aggiunge undefined al tipo del risultato. Se il tipo della proprietà era string, il risultato concatenato è string | undefined.

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

Gestire il risultato undefined

Poiché il risultato può essere undefined, in genere deve controllarlo o fornire un valore alternativo. Il sistema dei tipi le ricorda di gestire il caso in cui il valore manchi.

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

Confronto con le catene &&

Prima di ?., gli sviluppatori scrivevano lunghe catene di &&: a && a.b && a.b.c. L'optional chaining esprime la stessa intenzione in modo molto più conciso e si legge dall'alto verso il basso.

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);

Perché ?. è migliore di &&

L'approccio con && tratta qualsiasi valore falsy (0, '', false) come punto di arresto, il che può essere un bug. L'optional chaining si interrompe solo con null o undefined, che di solito è ciò che serve.

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

Optional chaining su array di oggetti

L'optional chaining funziona con qualsiasi accesso a una proprietà. In combinazione con l'accesso a un elemento, consente di raggiungere in sicurezza i dati annidati in array di oggetti.

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

L'interruzione breve ferma l'intera espressione

Quando una catena si interrompe, vengono saltati anche gli accessi alle proprietà scritti dopo di essa, se privi di ?.. L'intera espressione restituisce immediatamente 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

Optional chaining con i valori restituiti dalle funzioni

Può applicare il chaining al risultato di una chiamata di funzione. Se la funzione restituisce un valore nullish, l'accesso successivo si interrompe in sicurezza.

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

Un esempio pratico con la configurazione

L'optional chaining è particolarmente utile per leggere configurazioni parziali o risposte API in cui alcuni campi annidati potrebbero mancare. Mantiene l'accesso leggibile e previene gli arresti anomali.

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

Verifica rapida

Verifichi la sua comprensione dell'optional chaining.

Riepilogo: optional chaining

Ha imparato che ?.:

  • Accede in sicurezza alle proprietà di valori che potrebbero essere null/undefined.
  • Interrompe l'intera espressione restituendo undefined quando incontra un collegamento nullish.
  • Aggiunge undefined al tipo del risultato.
  • Migliora le catene con &&, interrompendosi solo con valori nullish e non con tutti i valori falsy.

Ora analizzeremo l'operatore nullish coalescing.

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

Domande Frequenti

La lezione «Optional chaining con ?.» è gratuita?

Sì — il testo completo di «Optional chaining con ?.» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Optional chaining con ?.»?

Acceda in sicurezza a proprietà profondamente annidate che potrebbero essere null. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Optional chaining con ?.»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Optional chaining con ?.
  2. Nullish coalescing con ??
  3. Combinare ?. e ??
  4. Chiamate opzionali e accesso agli elementi
← Torna a TypeScript Academy