TypeScript Academy · Lección

Arrays y tuplas readonly

Proteja arrays y tuplas frente a los métodos de mutación.

Arrays y tuplas readonly es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Arrays de solo lectura

Un array de solo lectura es un array del que se puede leer, pero que no se puede modificar. Escríbalo como readonly number[] o, de forma equivalente, como ReadonlyArray<number>. El tipo de los elementos se mantiene; solo se bloquea la mutación.

const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonly

El tipo ReadonlyArray

ReadonlyArray<T> es la forma genérica, con el mismo significado que readonly T[]. Use la que resulte más clara; son intercambiables.

const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));

No hay métodos mutantes

Los arrays de solo lectura no incluyen métodos mutantes. push, pop, splice, sort y reverse no están disponibles: el tipo literalmente no los tiene.

const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);

Los métodos que no mutan siguen funcionando

Los métodos que devuelven un valor nuevo en lugar de mutar, como map, filter, concat y slice, siguen estando disponibles. Producen arrays nuevos y dejan intacto el original.

const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchanged

Arrays de solo lectura como parámetros

Aceptar readonly T[] en una función indica que no mutará el array del llamador. Documenta la intención y permite que el compilador haga cumplir esa promesa.

function sum(values: readonly number[]): number {
  return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));

Los arrays mutables se pueden asignar a los de solo lectura

Un number[] normal se puede asignar a un parámetro readonly number[]: solo está prometiendo que no lo mutará. No se permite lo contrario.

function total(v: readonly number[]): number {
  return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // ok

Tuplas de solo lectura

Las tuplas también pueden ser readonly: readonly [string, number]. Los tipos y el orden de los elementos son fijos, y no se pueden reasignar las posiciones individuales.

const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tuple

Las tuplas readonly bloquean la mutación

Al igual que los arrays readonly, las tuplas readonly eliminan los métodos mutantes y rechazan las asignaciones mediante índices. Son perfectas para registros de estructura fija, como pares de coordenadas.

const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);

Aserción const frente al tipo readonly

Las dos formas de obtener arrays readonly se diferencian sutilmente. Una anotación readonly number[] mantiene el tipo general de los elementos. as const va más allá: crea una tupla readonly de tipos literales.

const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const;            // readonly [1, 2, 3]
console.log(a[0], b[0]);

Cómo elegir entre ambas

Use una anotación readonly T[] cuando quiera inmutabilidad, pero tipos generales para los elementos. Use as const cuando también necesite los valores literales exactos, por ejemplo, para derivar una unión.

const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);

Inmutabilidad para datos compartidos

Los arrays y las tuplas readonly protegen las constantes compartidas y las listas de configuración frente a mutaciones accidentales, lo que hace imposibles en tiempo de compilación los errores causados por modificaciones inesperadas.

const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
  return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));

Comprobación rápida

Compruebe su comprensión de los arrays y las tuplas readonly.

Repaso: arrays y tuplas readonly

Ha aprendido que:

readonly T[] / ReadonlyArray<T> bloquea la mutación, pero permite leer y usar métodos que no mutan.
Los métodos mutantes como push y splice se eliminan del tipo.
Las tuplas readonly fijan tanto la longitud como los tipos de los elementos.
as const va más allá y produce tuplas readonly de tipos literales.

A continuación, los tipos de colecciones readonly.

const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);

Preguntas frecuentes

¿La lección «Arrays y tuplas readonly» es gratis?

Sí — el texto completo de «Arrays y tuplas readonly» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Arrays y tuplas readonly»?

Proteja arrays y tuplas frente a los métodos de mutación. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Arrays y tuplas readonly»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a TypeScript Academy