Arrays, tuplas y unions

Aprende a trabajar con colecciones tipadas, estructuras de posición fija y valores que pueden pertenecer a varios tipos.

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.