Unioni e Restringimento

Nel mondo reale, le variabili e le risposte delle API non hanno sempre un singolo tipo fisso. TypeScript offre i Tipi Unione (Union Types) per gestire la variabilità, e il Restringimento dei Tipi (Type Narrowing) per operare in sicurezza su di essi a runtime.

Tipi Unione (Union Types)

Un tipo unione permette a una variabile di accettare valori di tipi differenti. Viene espresso tramite il simbolo della barra verticale (|):

let result: number | string;
result = 42; // Valido
result = 'Errore 404'; // Valido

Tuttavia, quando lavoriamo con un tipo unione, non possiamo chiamare direttamente metodi che appartengono a uno solo dei tipi (ad esempio, non possiamo fare .toUpperCase() se la variabile può anche essere un number). Dobbiamo prima "restringere" il tipo.

Restringimento dei Tipi (Type Narrowing)

Il Type Narrowing è il processo con cui TypeScript analizza le strutture di controllo del flusso (come if o switch) per dedurre un tipo più specifico per una variabile a runtime.

Esistono diversi modi per effettuare il narrowing:

1. Operatore typeof

Ideale per distinguere i tipi primitivi:

function printLength(value: string | number) {
  if (typeof value === 'string') {
    // Qui TypeScript sa che 'value' è una stringa
    console.log(value.length);
  } else {
    // Qui TypeScript sa che 'value' è un numero
    console.log(value.toFixed(2));
  }
}

2. Operatore in

Utilizzato per verificare la presenza di una proprietà specifica in un oggetto:

interface Fish {
  swim: () => void;
}
interface Bird {
  fly: () => void;
}

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim(); // Narrowing a Fish
  } else {
    animal.fly(); // Narrowing a Bird
  }
}

Unioni Discriminate (Discriminated Unions)

Il pattern delle Unioni Discriminate consiste nel creare oggetti che condividono una proprietà comune con un valore letterale univoco (chiamata discriminatore). TypeScript riconosce questo discriminatore ed effettua il narrowing automatico all'interno di blocchi condizionali.

interface SuccessResponse {
  status: 'success'; // Discriminatore letterale
  data: string;
}

interface ErrorResponse {
  status: 'error'; // Discriminatore letterale
  errorMessage: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('Dati ricevuti:', response.data);
  } else {
    console.error('Si è verificato un errore:', response.errorMessage);
  }
}

Prova tu

Esercizio 1: Unione di Tipi

Esercizio 2: Type Narrowing Base

Esercizio 3: Narrowing con 'in'

Esercizio 4: Unione Discriminata Shape