Arrays, tuplas y unions
No todos los datos tienen una forma simple. A veces manejas listas, otras veces pares de valores fijos y otras veces datos que pueden venir en varios formatos.
TypeScript cubre todo eso.
Arrays
const precios: number[] = [10, 20, 30];
const etiquetas: string[] = ['nuevo', 'oferta', 'top'];
El array solo acepta elementos de ese tipo.
precios.push(40); // bien
// precios.push('50'); // error
Arrays de objetos
type Producto = {
id: number;
nombre: string;
};
const productos: Producto[] = [
{ id: 1, nombre: 'Teclado' },
{ id: 2, nombre: 'Ratón' },
];
Muy habitual en listas, resultados de API y estados de UI.
Tuplas
Una tupla define una longitud y un orden concretos:
const coordenada: [number, number] = [40.4168, -3.7038];
const respuesta: [number, string] = [200, 'OK'];
No es lo mismo que Array<number | string>. La tupla dice qué va en cada posición.
Union types
Un union type permite varios tipos posibles:
let id: number | string;
id = 10;
id = 'abc-123';
Muy útil cuando una API o componente acepta más de una forma válida.
Unions en objetos
type Resultado =
| { ok: true; data: string[] }
| { ok: false; error: string };
Esto es mejor que devolver cosas ambiguas como string[] | null, porque el objeto te da contexto.
Tipos literales
let rol: 'admin' | 'editor' | 'user';
rol = 'admin';
// rol = 'superadmin'; // error
Es una forma muy útil de limitar estados posibles.
Un patrón muy común
type EstadoCarga = 'idle' | 'loading' | 'success' | 'error';
let estado: EstadoCarga = 'idle';
Esto evita strings arbitrarios repartidos por la app.
Idea práctica
- usa arrays para listas homogéneas
- usa tuplas para estructuras cortas y posicionales
- usa unions para describir varias formas válidas
En la siguiente lección vamos a ordenar mejor esos contratos con interface, type y enum.