CodeAventura
TypeScript
▸Union types y narrowing▸Union types: un tipo, múltiples opciones

Misión

Editor
// Crea una función formatearID que reciba un id: string | number
// Si es número, devuelve "#" + id
// Si es string, devuelve el id tal cual


// Prueba con ambos tipos
// console.log(formatearID(42));
// console.log(formatearID("ABC-123"));

Consola
07 / 25Union types: un tipo, múltiples opciones
Anterior

Union types: un tipo, múltiples opciones

Un valor, varios tipos posibles

A veces una variable puede ser de más de un tipo. Un ID podría ser un número (1234) o un string ("ABC-123"). Un valor de un formulario podría ser un string o null.

Para esto existen los union types:

El operador | significa "o". string | number se lee: "string o number".

Unions en parámetros de funciones

Los union types brillan en funciones que deben aceptar varios tipos:

El problema: ¿qué puedes hacer con un union?

Si el tipo es string | number, TypeScript solo te deja usar operaciones que funcionen con ambos tipos:

TypeScript te protege: .toUpperCase() solo existe en strings. Si valor fuera un número, el código explotaría. Necesitas verificar el tipo primero.

typeof al rescate

Para usar métodos específicos de un tipo, primero verifica con typeof:

Dentro del if, TypeScript "estrecha" el tipo. Esto se llama narrowing y lo veremos en profundidad en la siguiente lección.

Union con null

Un patrón muy común es representar la ausencia de un valor:

Esto es más explícito que undefined — le dice al lector "este valor puede no existir intencionalmente".

Unions en type aliases

Puedes guardar union types en type aliases para reutilizarlos:

Tu desafío 🚀

Crea una función formatearID que:

  1. Reciba un parámetro id de tipo string | number
  2. Si es número, devuelva el string "#" seguido del número (ej: "#42")
  3. Si es string, devuelva el id tal cual
  4. El tipo de retorno debe ser string

Prueba con ambos tipos e imprime los resultados.

Los union types son una de las features más poderosas de TypeScript. Te permiten modelar la realidad: a veces un dato puede ser una cosa u otra, y TypeScript te obliga a manejar ambos casos.