Uniones y Estrechamiento

En el mundo real, las variables y las respuestas de las APIs no siempre tienen un único tipo fijo. TypeScript ofrece los Tipos Unión (Union Types) para gestionar la variabilidad, y el Estrechamiento de Tipos (Type Narrowing) para operar de forma segura con ellos en tiempo de ejecución.

Tipos Unión (Union Types)

Un tipo unión permite que una variable acepte valores de diferentes tipos. Se expresa mediante el símbolo de la barra vertical (|):

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

Sin embargo, cuando trabajamos con un tipo unión, no podemos llamar directamente a métodos que pertenezcan a uno solo de los tipos (por ejemplo, no podemos hacer .toUpperCase() si la variable también puede ser un number). Primero debemos "estrechar" el tipo.

Estrechamiento de Tipos (Type Narrowing)

El Type Narrowing es el proceso por el cual TypeScript analiza las estructuras de control de flujo (como if o switch) para deducir un tipo más específico para una variable en tiempo de ejecución.

Existen diferentes formas de realizar el narrowing:

1. Operador typeof

Ideal para distinguir tipos primitivos:

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. Operador in

Se utiliza para verificar la presencia de una propiedad específica en un objeto:

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
  }
}

Uniones Discriminadas (Discriminated Unions)

El patrón de las Uniones Discriminadas consiste en crear objetos que comparten una propiedad común con un valor literal único (llamado discriminador). TypeScript reconoce este discriminador y realiza el narrowing automático dentro de los bloques condicionales.

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);
  }
}

Pruébalo tú

Ejercicio 1: Unión de Tipos

Ejercicio 2: Type Narrowing Básico

Ejercicio 3: Narrowing con 'in'

Ejercicio 4: Unión Discriminada Shape