Null e undefined in Typescript

Un’altra combinazione frequentissima avviene tra i tipi null e undefined e altri tipi, a indicare che un dato potrebbe essere valorizzato oppure mancante. Prendiamo l’API standard del localStorage, disponibile in tutti i browser: 

localStorage.getItem("key"); // getItem(): string | null

In questo caso, getItem restituisce un valore stringa oppure niente, e niente è rappresentato dal valore null. Anche undefined serve spesso lo stesso scopo, e spesso la differenza tra i due è meramente convenzionale, vedendo in null un valore nullo assegnato, mentre in undefined un valore nullo derivante da una mancata assegnazione di una variabile. Per quello che interessa ai fini pratici, questi due valori presentano caratteristiche analoghe, e infatti TypeScript ci permette di adottare per entrambi una speciale asserzione di non-nullità. 

Immaginiamo di essere certi di aver valorizzato la chiave key nel localStorage con una stringa, e di volerne ricavare la lunghezza: 

const value = localStorage.getItem("key"); // value: string | null const len = value.length; // 'value' is possibly 'null'

Qui TypeScript non è certo di poter leggere la proprietà length su value, e in base alle nostre impostazioni di strictness, il type checker protesterà: se dovessimo sbagliarci sulla presenza della chiave key, incapperemmo in un errore a runtime, e il lavoro di TypeScript è proprio quello di prevenire questo tipo di situazioni.

Possiamo gestire questa casistica in due modi. 

Se vogliamo agire in modo prudente, ci basterà tentare la navigazione verso la proprietà length con l’operatore di navigazione sicura ?.. Questo operatore è nativamente valido in JavaScript ed essenzialmente restituirà il valore di length se possibile, altrimenti undefined: 

const value = localStorage.getItem("key"); // value: string | null const len = value?.length; // len: number | undefined

Se invece siamo assolutamente certi della presenza di key sul localStorage, e se siamo disposti a far scoppiare il nostro programma in caso di errore, possiamo usare l’operatore di asserzione di non-nullità ! (spesso chiamato bang): 

const value = localStorage.getItem("key"); // value: string | null const len = value!.length; // len: number

In questo caso non stiamo in nessun modo modificando la logica di navigazione (infatti ! esiste solo per TypeScript e viene rimosso nel passaggio a JavaScript); stiamo soltanto asserendo che value sia di un tipo alternativo a null o undefined, quindi in questo caso string. In altre parole, l’uso di ! qui equivale a scrivere: 

const value = localStorage.getItem("key"); // value: string | null const len = (value as string).length; // len: number