TypeScript #2: Tipos Literales y Uniones

En la Parte 1 vimos que const crea tipos literales. Si escribimos const rol = "admin", para TypeScript rol no es un simple string, sino que es específicamente "admin".

Hoy vamos a ver cómo usar eso para crear código a prueba de balas.

String vs. String Literal

Imaginemos que tenemos una función para pintar un botón.

function pintarBoton(color: string) {
  if (color === 'tojo') { // ❌ Ups, error de dedo ("tojo" en vez de "rojo")
      return '🔴';
  }
  return '🔵';
}

pintarBoton("azul"); // ✅ Bien
pintarBoton("patata 🥔"); // ✅ Bien (pero no debería, ¡patata no es un color!)

function pintarBoton(color: string) {
  if (color === 'tojo') { // ❌ Ups, error de dedo ("tojo" en vez de "rojo")
      return '🔴';
  }
  return '🔵';
}

pintarBoton("azul"); // ✅ Bien
pintarBoton("patata 🥔"); // ✅ Bien (pero no debería, ¡patata no es un color!)

El problema aquí es que string es demasiado amplio. Admite “azul”, “rojo”, y también “patata 🥔” o “asdfg”.

La Unión de Tipos

Aquí es donde entra el operador | (pipe). Se lee como “O”. Podemos decirle a TypeScript: “El color solo puede ser ‘rojo’ O ‘azul’ O ‘verde’”.

type ColorBoton = "rojo" | "azul" | "verde";

function pintarBoton(color: ColorBoton) {
  // ...
}

pintarBoton("rojo");   // ✅ Perfecto
pintarBoton("verde");  // ✅ Perfecto
pintarBoton("patata 🥔");
// ❌ Error: Argument of type '"patata 🥔"' is not assignable to parameter of type 'ColorBoton'.

type ColorBoton = "rojo" | "azul" | "verde";

function pintarBoton(color: ColorBoton) {
  // ...
}

pintarBoton("rojo");   // ✅ Perfecto
pintarBoton("verde");  // ✅ Perfecto
pintarBoton("patata 🥔");
// ❌ Error: Argument of type '"patata 🥔"' is not assignable to parameter of type 'ColorBoton'.

¡Bum! 💥 Acabamos de eliminar una categoría entera de bugs. Ya nadie puede pasar una cadena incorrecta a nuestra función.

El Autocompletado (IntelliSense)

Lo mejor de esto no es solo la seguridad, es la experiencia de desarrollo.

Vamos a probarlo: Entre las comillas, pulsamos Ctrl + Espacio en cada una. En la primera no hay sugerencias (es un string genérico). En la segunda el editor te sugiere las opciones válidas.

No tenemos que ir a la documentación para saber qué valores aceptaba. El propio tipo nos dice qué valores acepta.

Uniones Mixtas

Podemos mezclar tipos si queremos (aunque usémoslo con cabeza):

// Un ID puede ser un número (ID de base de datos) o un string (UUID)
type ID = number | string;

function buscarUsuario(id: ID) {
  console.log("Buscando usuario con ID:", id);
}

buscarUsuario(123); // ✅
buscarUsuario("abc-123"); // ✅

// Un ID puede ser un número (ID de base de datos) o un string (UUID)
type ID = number | string;

function buscarUsuario(id: ID) {
  console.log("Buscando usuario con ID:", id);
}

buscarUsuario(123); // ✅
buscarUsuario("abc-123"); // ✅

Resumen

• Tipos Literales: Valores exactos ("rojo", 1).
• Uniones (|): Combinar tipos (A | B significa A o B).
• Usémoslo para evitar “Magic Strings” y ganar autocompletado gratis.

En la próxima parte veremos cómo Tipar Objetos e Interfaces para dejar de pasar objetos anónimos sin control por nuestra aplicación.