¿Ya dominas lo básico? Un curso estructurado de TypeScript es la vía rápida para dar el salto.
Ver cursos de TypeScript en UdemyEnlace de afiliado. No te cuesta nada extra.
- 01Preparar el entorno (lo que necesitas)
- 02Tu primera salida (console.log)
- 03Variables y anotaciones de tipo (number/string/boolean)
- 04Tipos de array
- 05Tipos en funciones (parámetros y valor devuelto)
- 06Parámetros opcionales y valores por defecto
- 07Interfaces (interface)
- 08Propiedades opcionales (?)
- 09Alias de tipo (type)
- 10Tipos unión
- 11Tipos literales
- 12enum (tipos enumerados)
- 13Clases y tipos
- 14Herencia (extends) e implementar una interfaz (implements)
- 15Genéricos (<T>)
- 16Tipos tupla
- 17Los tipos any y unknown
- 18Aserciones de tipo (as)
- 19El modificador readonly
- 20[Aplicado] Construye un mini sistema de inventario
Tipos unión
En esta lección permitirás que un valor sea de uno u otro tipo, y tratarás cada caso por separado.
La barra vertical construye una unión: number | string significa «un número o un texto». Para usarlo con seguridad hay que averiguar cuál es, y ahí entra typeof: dentro de ese if, TypeScript sabe el tipo concreto y te ofrece sus métodos.
El código de ejemplo formatea un identificador: si es número lo rellena con ceros, y si es texto lo pasa a mayúsculas. Ese estrechamiento del tipo dentro de cada rama es la clave.
El error clásico es llamar a un método antes de comprobar el tipo, como usar .toUpperCase() sobre algo que podría ser número. El compilador lo rechaza, y con razón.
En el trabajo real, las uniones representan bien los estados de la vida real: un campo que puede venir vacío, una respuesta que puede ser éxito o error, un identificador que a veces es numérico y a veces textual.
🧪 Este sitio no puede compilar ni ejecutar TypeScript directamente, así que comprueba al instante si lo que escribiste coincide con el código de referencia (la corrección ocurre por completo en tu navegador; no se envía nada a ningún servidor).