Risposta.

L'Operatore di Asserzione Non-Null (!) è una sintassi speciale di TypeScript che consente di dire esplicitamente al compilatore: "So che la variabile in questo momento non è nulla o indefinita". L'operatore è stato aggiunto per risolvere problemi di tipo in scenari in cui il programmatore è sicuro dell'esistenza di un valore, ma TypeScript non può garantirlo a causa della sua analisi rigorosa.

Storia della domanda

TypeScript si occupa rigorosamente della possibilità che le variabili siano null o undefined, specialmente quando l'opzione strictNullChecks è abilitata. Per eliminare gli avvisi del compilatore in situazioni in cui il programmatore è certo della sicurezza del valore, è stata introdotta l'asserzione non-null.

Problema

TypeScript non sempre riesce a tracciare tutti i rami del codice e capire che non è necessario eseguire un controllo su null. Questo accade spesso dopo codice asincrono, nei callback e nella gestione degli elementi DOM.

Soluzione

L'Operatore di Asserzione Non-Null (!) informa il compilatore dell'assenza di null/undefined in quel punto, rimuovendo l'errore di tipo.

Esempio di codice:

function processUser(user?: {name: string}) {
  // TS darà un errore senza l'operatore: user potrebbe essere undefined
  console.log(user!.name); // L'operatore ! promette che user è definito
}

Caratteristiche chiave:

Rimuove solo l'errore di tempo di compilazione, non influisce sulla logica di runtime.
Utilizzato esclusivamente dove è garantita la non-nullità del valore.
Applicazione eccessiva o incosapevole porta a errori di runtime.

Domande insidiose.

Si può usare ! per qualsiasi valore di qualsiasi tipo? Ad esempio: let x: number = y!

L'operatore ! ha senso solo per tipi che potenzialmente contengono null/undefined secondo il parere del compilatore. Per variabili fortemente tipizzate senza nullabilità non ha effetto.

Sostituisce ! completamente il controllo su null/undefined? È necessario effettuare un controllo al runtime?

No, l'operatore ! non esegue controlli durante l'esecuzione. Aiuta solo il compilatore e se il valore reale risulta essere undefined/null, si verificherà un errore di runtime.

function foo(data?: string) {
  // potrebbe portare a un errore
  alert(data!.length);
}

Può ! salvare da errori nel codice asincrono, se la variabile originale cambia in un altro thread?

No. L'operatore ! funziona solo nel punto in cui viene applicato. Se tra il controllo e l'uso il valore diventa undefined, l'errore non può essere evitato. È sempre necessario essere certi dell'attualità della non-nullità.

Errori tipici e anti-pattern

Utilizzo di ! per "sopprimere" un errore quando non si è certi della presenza di un valore.
Applicazione indiscriminata senza reale comprensione del contesto.
Applicazione di ! in luoghi dove il tipo è richiesto o c'è una certa verifica al runtime.

Esempio dalla vita reale

Caso negativo

All'interno di un componente React, si accede al DOM tramite ref con l'operatore ! senza verifica preliminare:

const ref = useRef<HTMLDivElement>(null);
ref.current!.focus(); // se ref.current è null, si verificherà un errore di runtime

Vantaggi:

Sopprime l'errore di compilazione.

Svantaggi:

Possibile errore critico di runtime quando si accede a un elemento inesistente.

Caso positivo

Utilizzo di un controllo di esistenza prima dell'applicazione:

if (ref.current) {
  ref.current.focus();
}