0Pricing
TypeScript Academy · Lezione

Chiamate opzionali e accesso agli elementi

Utilizzi ?.() e ?.[] per chiamare metodi e accedere agli indici in sicurezza.

Chiamate opzionali e accesso agli elementi è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Oltre l'accesso alle proprietà

Il concatenamento opzionale non è limitato a obj?.prop. Ha altre due forme: le chiamate opzionali con ?.() e l'accesso opzionale agli elementi con ?.[index]. Entrambe interrompono la valutazione in presenza di un valore nullish, proprio come l'accesso alle proprietà.

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

Chiamate opzionali di metodi

Utilizzi obj.method?.() per chiamare un metodo solo se esiste. Se method è null o undefined, la chiamata viene ignorata e l'espressione restituisce undefined.

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

Dove inserire ?.

?. va inserito subito prima delle parentesi della chiamata. obj.method?.() verifica method, non obj. Per proteggere anche obj, scriva obj?.method?.().

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

Chiamata di callback opzionali

Un uso molto comune consiste nell'invocare un parametro callback opzionale. Invece di un controllo con if, scriva callback?.() per chiamarlo solo quando è stato fornito.

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

Accesso opzionale agli elementi

Per gli array o le firme di indice che potrebbero essere nullish, utilizzi arr?.[index]. Se arr è nullish, l'accesso interrompe la valutazione; altrimenti legge normalmente l'elemento.

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

Accesso agli elementi con chiavi dinamiche

L'accesso opzionale agli elementi funziona anche con la notazione tra parentesi quadre per chiavi dinamiche o calcolate di un oggetto che potrebbe essere nullish.

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

Combinare accesso agli elementi e chiamate

Può combinare liberamente le diverse forme. Può accedere a un array opzionale e poi chiamare facoltativamente un metodo sull'elemento: ogni ?. protegge il proprio passaggio.

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

Concatenamento opzionale sui risultati delle funzioni

Può concatenare l'accesso al valore restituito da una funzione. Se la funzione restituisce un valore nullish, le chiamate o gli accessi successivi interrompono la valutazione in modo sicuro.

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

Il tipo del risultato include undefined

Come nelle catene di accesso alle proprietà, le chiamate opzionali e l'accesso agli elementi aggiungono undefined al tipo del risultato. Le combini con ?? per fornire un valore predefinito e rimuovere undefined.

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

Proteggere i gestori degli eventi

Nel codice dell'interfaccia utente e degli eventi, le chiamate opzionali consentono di invocare elegantemente i gestori che potrebbero non essere impostati. Nessun controllo prolisso dell'esistenza e nessun arresto anomalo quando il gestore è assente.

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

Esempio di dispatcher per plugin

Mettiamo insieme i concetti: un dispatcher che invoca facoltativamente un hook di un plugin identificato da un nome, all'interno di un registro che potrebbe contenere elementi mancanti, e usa un valore predefinito quando nessun componente gestisce l'operazione.

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

Verifica rapida

Verifichi la Sua comprensione delle chiamate opzionali e dell'accesso agli elementi.

Riepilogo: chiamate e accessi opzionali

Ha imparato le altre forme del concatenamento opzionale:

  • obj.method?.() chiama un metodo solo se esiste.
  • arr?.[index] legge in modo sicuro un elemento da un contenitore che potrebbe essere nullish.
  • Tutte le forme restituiscono undefined interrompendo la valutazione quando l'operando è nullish.
  • Può combinarle con ?? per usare un valore predefinito.

Prossimo corso: readonly e nozioni fondamentali sull'immutabilità.

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

Domande Frequenti

La lezione «Chiamate opzionali e accesso agli elementi» è gratuita?

Sì — il testo completo di «Chiamate opzionali e accesso agli elementi» è 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 «Chiamate opzionali e accesso agli elementi»?

Utilizzi ?.() e ?.[] per chiamare metodi e accedere agli indici in sicurezza. 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 4 di 4.

Quanto tempo richiede la lezione «Chiamate opzionali e accesso agli elementi»?

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