Saltar al contenido principal
Volver atrás

TypeScript #4: Arrays y Tuplas

#typescript #arrays #tuples
Listas de cosas y la magia de las Tuplas (o por qué useState devuelve un array).

En la parte anterior vimos Objetos. Ahora, ¿qué pasa si tenemos muchos objetos? Necesitamos una lista.

Arrays []

Hay dos formas de definir un array en TypeScript. Ambas son idénticas, es cuestión de gustos.

typescript 
// Opción A: Tipo[] (La más común)
const skills: string[] = ["React", "Astro", "TypeScript"];

// Opción B: Array<Tipo> (Sintaxis Genérica)
const years: Array<number> = [2020, 2021, 2022];

// Array de Objetos (usando la interfaz de la parte anterior)
interface Usuario {
  name: string;
  age: number;
}

const users: Usuario[] = [
  { name: "Alice", age: 30 },
  { name: "Pepe", age: 25 }
];

Si intentamos meter un número en nuestro array de skills (que es de strings), TS gritará.

Tuplas: Arrays con reglas estrictas

A veces sabemos exactamente cuántos elementos tiene un array y de qué tipo son en cada posición. Eso es una Tupla.

El ejemplo más famoso es el hook useState de React:

tsx 
// useState devuelve una tupla: [valor, funcion]
// posición 0 siempre es el estado (string)
// posición 1 siempre es el setter (función)
const [name, setName] = useState("Alice");

En TypeScript se define así:

typescript 
// Tupla: [string, number]
// El primero DEBE ser string, el segundo DEBE ser number.
let role: [string, number] = ["admin", 1];

role = ["user", 2]; // ✅ Bien
role = [1, "admin"]; // ❌ Mal (Orden incorrecto)
role = ["guest", 3, "extra"]; // ❌ Mal (Demasiados elementos)

Para ser más claros, aquí tienes una comparación entre arrays y tuplas:

typescript 
// --- ARRAYS  ---
// Da lo mismo el orden de los datos
const miArray1: (string | number)[] = ["TextoArray1", 1]; ✅
const miArray2: (string | number)[] = [5, "TextoArray2"]; ✅

// --- TUPLAS ---
// Le decimos a TS: "Esto es fijo, el primero es string, el segundo number"
const miTupla1: [string, number] = ["TextoTupla1", 1]; ✅
const miTupla2: [string, number] = [5, "TextoTupla2"]; ❌

¿Para qué sirven las Tuplas?

Son útiles cuando queremos devolver múltiples valores de una función sin crear un objeto.

  • Coordenadas: [x, y] -> [number, number]
  • Rangos: [inicio, fin] -> [number, number]
  • Estados: [loading, error, data] -> [boolean, Error | null, any]

Arrays de Lectura (ReadonlyArray)

Al igual que con los objetos, podemos hacer arrays inmutables.

typescript 
const todoList: readonly string[] = ["Comprar pan"];

todoList.push("Leche"); // ❌ Error: Property 'push' does not exist on type 'readonly string[]'.

¡Genial para programación funcional y evitar efectos secundarios!

¡Probémoslo!

Vamos a ensuciarnos las manos. Tienes dos retos abajo: uno para Arrays y otro para Tuplas. TypeScript te avisará de los errores mientras escribes, y al darle a “Run”, validaremos si cumple los requisitos.

Ejercicio 1: Arrays

Crea un array llamado paises que contenga al menos 3 nombres de países (strings). Intenta añadir un número al array para ver cómo se queja TypeScript.

Ejercicio 2: Tuplas

Crea una tupla estricta llamada usuario. Debe tener exactamente 3 elementos en este orden:

  1. nombre (string)
  2. edad (number)
  3. esAdmin (boolean)

En la Parte 5, las cosas se ponen serias. Dejamos lo básico y entramos en la magia de TypeScript: aprenderemos a que TS escriba los tipos por nosotros usando typeof y keyof.