Risposta.

Storia della questione

In JavaScript, l'operatore typeof viene utilizzato per controllare il tipo di valori primitivi durante l'esecuzione. TypeScript estende questo meccanismo e lo rende parte del sistema di restringimento dei tipi (type narrowing) tramite le guardie di tipo (type guards). TypeScript utilizza il risultato dell'operatore typeof per chiarire il tipo di una variabile all'interno di un blocco di codice, consentendo di descrivere in modo più preciso la logica di funzionamento della funzione, specialmente quando si lavora con i tipi unione.

Problema

In JavaScript normale, dopo aver controllato il tipo di un valore con typeof, non c'è alcuna garanzia di tipo — il programmatore deve ricordare cosa succede in quale parte del codice. Tuttavia, in TypeScript la situazione si complica a causa della presenza di diversi tipi e tipi unione, e senza un corretto restringimento dei tipi è facile commettere un errore, ad esempio accedere a un metodo non esistente. Inoltre, l'operatore ha limitazioni specifiche: "vede" solo tipi primitivi di base, ad esempio, per array e oggetti restituirà 'object'.

Soluzione

TypeScript consente di combinare l'operatore typeof con un'analisi dei tipi personalizzata per restringere il tipo di una variabile all'interno di un blocco di codice. Questo aumenta automaticamente la sicurezza: il compilatore sa con quale tipo di codice sta lavorando e suggerisce le proprietà e i metodi possibili.

Esempio di codice:

function printId(id: number | string) {
  if (typeof id === 'string') {
    // In questo ramo id: string
    console.log(id.toUpperCase());
  } else {
    // In questo ramo id: number
    console.log(id.toFixed(2));
  }
}

Caratteristiche chiave:

• Funziona solo con primitivi: 'string', 'number', 'boolean', 'symbol', 'undefined', 'object', 'function', 'bigint'.
• Aiuta TypeScript a restringere un tipo unione a un primitivo specifico all'interno di un blocco di codice.
• Non distingue array e oggetti, restituisce sempre 'object' per entrambi.

Domande trappola.

L'operatore typeof può determinare un array?

No, typeof restituirà lo stesso valore per un array e un oggetto — 'object'. Per identificare gli array è meglio utilizzare il metodo Array.isArray().

Esempio di codice:

const arr = [1, 2, 3];
console.log(typeof arr); // 'object'
console.log(Array.isArray(arr)); // true

Si può usare typeof per distinguere null e oggetto?

No, typeof null restituisce 'object', è una peculiarità storica di JavaScript.

Esempio di codice:

console.log(typeof null); // 'object'

Si può usare typeof per controllare una classe personalizzata?

No, per le istanze delle classi typeof restituirà anch'esso 'object'. A questo scopo si utilizzano l'operatore instanceof o funzioni guardia di tipo personalizzate.

Esempio di codice:

class User {}
const u = new User();
console.log(typeof u); // 'object'
console.log(u instanceof User); // true

Errori di tipo e anti-patterns

• Utilizzare typeof per controllare strutture dati complesse (ad esempio, array, null, oggetti).
• Trascurare l'uso degli operatori instanceof e Array.isArray() per un più preciso restringimento del tipo.
• Controllare i tipi solo a livello di runtime, ignorando il controllo statico.

Esempio dalla vita reale

Caso negativo

Un programmatore ha scritto una funzione in cui voleva controllare se il value fosse un array tramite typeof, e in base al risultato chiamare metodi diversi.

Vantaggi:

• Codice scritto in modo semplice.
• Non richiede funzioni aggiuntive.

Svantaggi:

• La funzione si rompe quando si passa un array: l'array viene percepito come oggetto, errori a runtime.

Caso positivo

Utilizzo di Array.isArray e combinazione con le guardie di tipo.

Vantaggi:

• Tipizzazione statica sicura.
• Assenza di errori con tipi di oggetti rispetto agli array.

Svantaggi:

• Bisogna ricordare i diversi strumenti di guardia di tipo.