Combinare ?. e ??
Affianchi l’optional chaining a valori predefiniti sensati.
Combinare ?. e ?? è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Un'accoppiata perfetta
L'optional chaining e il nullish coalescing sono progettati per funzionare insieme. Il pattern obj?.value ?? fallback legge in sicurezza un valore annidato e fornisce un valore predefinito se manca. È uno degli idiomi più utili del TypeScript moderno.
type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);Come funziona questo pattern
Prima ?. valuta la catena e restituisce il valore oppure undefined. Poi ?? controlla il risultato: se è nullish, viene utilizzato il fallback. Due operatori, un'unica espressione chiara.
type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);Il tipo del risultato
La catena produce T | undefined; ?? rimuove undefined e unisce il tipo del fallback. Con un fallback compatibile, il tipo finale è semplicemente T: non rimane alcun undefined da gestire.
type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmeticPreservare i valori falsy validi
Poiché ?? si attiva solo con valori nullish, un valore 0 valido recuperato tramite la catena viene preservato. Il fallback si applica solo quando la proprietà manca realmente.
type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50Accesso a configurazioni annidate
Per configurazioni profondamente annidate, concateni più passaggi ?. e concluda con un singolo ??. Se manca un collegamento qualsiasi, viene utilizzato senza problemi il valore predefinito.
type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);Valori predefiniti nelle risposte API
Spesso le risposte API omettono i campi opzionali. Il pattern combinato li legge in modo difensivo e inserisce valori predefiniti sensati, mantenendo semplice il codice successivo e prevenendo gli arresti anomali.
type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);Combinare con i risultati dei metodi
È possibile concatenare chiamate a funzioni o metodi e assegnare valori predefiniti ai loro risultati. Se la chiamata restituisce un valore nullish, subentra il fallback.
type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);Evitare controlli prolissi
Prima di questi operatori, si sarebbero scritti controlli null su più righe. L'idioma combinato sostituisce un intero blocco con una singola espressione, migliorando la leggibilità senza rinunciare alla sicurezza.
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);Usare un altro recupero come fallback
Il fallback dopo ?? può essere a sua volta un'altra ricerca concatenata, consentendo di provare una fonte secondaria prima di ricorrere a un valore letterale predefinito.
type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);Combinare con l'accesso agli elementi
Il pattern funziona anche con l'accesso agli elementi di un array: legga un elemento tramite ?.[i] e gli assegni un valore predefinito con ??.
type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);Un lettore di impostazioni realistico
Unendo tutti gli elementi, si ottiene un lettore di impostazioni che attraversa in sicurezza livelli opzionali e garantisce un valore utilizzabile. Questo è codice TypeScript da produzione che scriverà spesso.
type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));Verifica rapida
Verifichi la Sua comprensione della combinazione di ?. e ??.
Riepilogo: combinare ?. e ??
Ha imparato l'idioma obj?.value ?? fallback:
?.scende nella struttura in sicurezza e restituisce il valore oppureundefined.??fornisce un valore predefinito solo quando il risultato è nullish.- Il tipo finale non include più
undefinede spesso diventa un sempliceT. - I valori falsy validi, come
0, vengono preservati.
Ora vedrà le chiamate opzionali e l'accesso opzionale agli elementi.
type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);Domande Frequenti
La lezione «Combinare ?. e ??» è gratuita?
Sì — il testo completo di «Combinare ?. e ??» è 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 «Combinare ?. e ??»?
Affianchi l’optional chaining a valori predefiniti sensati. 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 3 di 4.
Quanto tempo richiede la lezione «Combinare ?. e ??»?
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
- Optional chaining con ?.
- Nullish coalescing con ??
- Combinare ?. e ??
- Chiamate opzionali e accesso agli elementi