0Pricing
TypeScript Academy · Lezione

Nullish coalescing con ??

Fornisca valori alternativi solo per null e undefined, non per tutti i valori falsy.

Nullish coalescing con ?? è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 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 nullish coalescing

L'operatore ?? restituisce il membro a destra solo quando il membro a sinistra è null o undefined. Altrimenti restituisce il valore a sinistra. È il modo preciso per fornire valori predefiniti.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

Solo i valori nullish attivano il fallback

La parola chiave è nullish: solo null e undefined fanno sì che venga usato il membro a destra. Ogni altro valore, inclusi quelli falsy, passa invariato.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

Il problema di ||

L'OR logico || usa il fallback per qualsiasi valore falsy: 0, '', false, NaN, oltre ai valori nullish. Questo causa spesso bug quando 0 o una stringa vuota sono input validi.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

Valori predefiniti corretti

Usi ?? quando zero, la stringa vuota o false sono valori legittimi che desidera conservare. Riservi || ai casi in cui qualsiasi valore falsy debba davvero attivare il fallback.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? con i parametri delle funzioni

Un modello comune consiste nel fornire un valore predefinito per un parametro opzionale quando viene passato undefined, preservando al contempo gli input falsy significativi.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

Il tipo del risultato di ??

Il tipo di a ?? b rimuove null | undefined dal tipo di a e lo combina con il tipo di b. Se a è string | null e b è string, il risultato è string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

Concatenare valori predefiniti

Può concatenare più operatori ?? per provare diverse origini in ordine, passando alla successiva quando un valore è nullish. Vince il primo valore non nullish.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? e la precedenza

Non può combinare ?? con || o && senza parentesi: TypeScript le richiede per evitare ambiguità. Raggruppi sempre le espressioni in modo esplicito.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

Distinguere zero da un valore mancante

Un'esigenza frequente nel mondo reale: una temperatura, un punteggio o un saldo pari a 0 rappresenta un dato valido, mentre undefined significa «non fornito». ?? mantiene distinti questi casi; || li confonde.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? con le proprietà degli oggetti

Leggere una proprietà opzionale e assegnarle un valore predefinito è l'uso quotidiano di ??. Si abbina naturalmente all'optional chaining, che combinerà nella prossima lezione.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

Quale scegliere

Regola decisionale: se 0, '' o false sono valori validi che deve preservare, usi ??. Se desidera davvero sostituire qualsiasi valore falsy, usi ||. I bug nei valori predefiniti derivano quasi sempre dall'uso di || per abitudine.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

Verifica rapida

Verifichi la Sua comprensione della coalescenza nullish.

Riepilogo: coalescenza nullish

Ha imparato che ??:

  • restituisce il valore di fallback solo quando il lato sinistro è null o undefined.
  • preserva i valori falsy validi come 0, '' e false, a differenza di ||.
  • rimuove null | undefined dal tipo del risultato.
  • richiede le parentesi quando viene combinato con || o &&.

Ora combiniamo ?. e ??.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

Domande Frequenti

La lezione «Nullish coalescing con ??» è gratuita?

Sì — il testo completo di «Nullish coalescing 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 «Nullish coalescing con ??»?

Fornisca valori alternativi solo per null e undefined, non per tutti i valori falsy. 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 2 di 4.

Quanto tempo richiede la lezione «Nullish coalescing 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