Guardie di Tipo

Il restringimento dei tipi (Type Narrowing) è uno dei concetti più importanti in TypeScript. Spesso, però, le guardie di tipo standard come typeof o instanceof non sono sufficienti per oggetti personalizzati complessi. È qui che entrano in gioco le Guardie di Tipo Personalizzate (Custom Type Guards).

Guardie di Tipo Standard

Iniziamo riepilogando come TypeScript restringe i tipi usando gli operatori standard di JavaScript:

function processInput(val: string | number) {
  if (typeof val === 'string') {
    // Qui 'val' è di tipo string
    console.log(val.toUpperCase());
  } else {
    // Qui 'val' è di tipo number
    console.log(val.toFixed(2));
  }
}

Guardie di Tipo Personalizzate (is operator)

Per definire una guardia di tipo personalizzata, creiamo una funzione che restituisce un predicato di tipo nel formato parameterName is Type al posto del tipo di ritorno booleano standard.

La funzione deve restituire un booleano (true o false). Se restituisce true, TypeScript saprà che il parametro passato è del tipo specificato.

interface Cat {
  name: string;
  meow(): void;
}

interface Dog {
  name: string;
  bark(): void;
}

// Questa è una guardia di tipo personalizzata
function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

function makeNoise(pet: Cat | Dog) {
  if (isCat(pet)) {
    // Qui TypeScript sa che 'pet' è un Cat
    pet.meow();
  } else {
    // Qui TypeScript sa che 'pet' è un Dog
    pet.bark();
  }
}

Sicurezza e Casting (as vs Type Guards)

Il type casting (es. val as Cat) forza il compilatore a fidarsi dello sviluppatore, senza alcuna verifica reale a runtime. Se l'oggetto a runtime non rispetta le aspettative, il codice fallirà silenziosamente o lancerà eccezioni.

Le guardie di tipo personalizzate permettono invece di eseguire un controllo robusto e dinamico a runtime, informando in modo sicuro e preciso il compilatore di TypeScript sul reale tipo della variabile:

function processInput(input: unknown) {
  // casting insicuro: potrebbe rompersi se input non ha il metodo split
  // const str = input as string;
  // console.log(str.split(' '));

  // guardia sicura
  if (isString(input)) {
    console.log(input.split(' ')); // Sicuro al 100%!
  }
}

Prova tu

Esercizio 1: Guardia di Tipo per Stringhe

Esercizio 2: Guardia di Tipo per Utente Premium

Esercizio 3: Verifica Oggetto Errore Personalizzato

Esercizio 4: Guardia di Tipo Admin