TypeScript Academy · Lección

ReadonlyArray y ReadonlyMap

Utilice tipos de colecciones readonly integrados.

ReadonlyArray y ReadonlyMap es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 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.

Tipos de colecciones de solo lectura

Además de los arrays, TypeScript incluye variantes de solo lectura de sus colecciones integradas: ReadonlyArray<T>, ReadonlyMap<K, V> y ReadonlySet<T>. Cada una expone únicamente las partes de su API que no modifican datos.

const arr: ReadonlyArray<number> = [1, 2, 3];
console.log(arr.length, arr.includes(2));

Repaso de ReadonlyArray

ReadonlyArray<T> permite iterar, acceder mediante índices y utilizar métodos como map y filter, pero no permite push, pop ni asignar valores mediante índices. Es la variante para arrays de la familia de solo lectura.

const tags: ReadonlyArray<string> = ['ts', 'js'];
console.log(tags.map((t) => t.toUpperCase()));
// tags.push('css'); // Error

ReadonlyMap

ReadonlyMap<K, V> permite buscar valores, iterar y comprobar claves, pero elimina set, delete y clear. Desde la perspectiva de quien la consume, el contenido del map es fijo.

const ages: ReadonlyMap<string, number> = new Map([['Ada', 30], ['Sam', 25]]);
console.log(ages.get('Ada'), ages.has('Sam'));
// ages.set('Lee', 40); // Error

Leer de un ReadonlyMap

Se conservan todas las operaciones de lectura: get, has, size, keys, values, entries e iteración. Solo desaparecen los métodos que modifican datos.

const m: ReadonlyMap<string, number> = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of m) {
  console.log(k, v);
}
console.log('size:', m.size);

ReadonlySet

ReadonlySet<T> permite comprobar pertenencia e iterar, pero elimina add, delete y clear. Úselo para conjuntos fijos de valores permitidos.

const allowed: ReadonlySet<string> = new Set(['read', 'write']);
console.log(allowed.has('read'), allowed.has('delete'));
// allowed.add('admin'); // Error

Iterar un ReadonlySet

Puede iterar un ReadonlySet y leer su size, pero no cambiar su contenido. Esto lo hace ideal para listas de permitidos y conjuntos de permisos.

const perms: ReadonlySet<string> = new Set(['view', 'edit']);
perms.forEach((p) => console.log('perm:', p));
console.log('count:', perms.size);

Pasar valores de solo lectura a funciones

Acepte un tipo de colección de solo lectura en las funciones que solo deban leer datos. Esto comunica la intención y evita que la función modifique datos propiedad de quien la llama.

function describe(set: ReadonlySet<string>): string {
  return 'has ' + set.size + ' items';
}
const s = new Set(['x', 'y']);
console.log(describe(s));

Las colecciones mutables se pueden asignar

Un Map o Set normal se puede asignar a su equivalente de solo lectura porque se están limitando capacidades, no ampliándolas. La función simplemente renuncia a los permisos de modificación.

function keys(m: ReadonlyMap<string, number>): string[] {
  return Array.from(m.keys());
}
const real = new Map([['a', 1]]);
console.log(keys(real));

API de colecciones inmutables

Los tipos de colecciones de solo lectura describen una vista inmutable. El objeto subyacente aún puede ser mutable en otro lugar; el tipo de solo lectura solo restringe lo que puede hacer esta referencia.

const backing = new Set<number>([1, 2]);
const view: ReadonlySet<number> = backing;
// view.add(3); // Error through the readonly view
backing.add(3); // but the original can still mutate
console.log(view.size);

Elegir el tipo de solo lectura adecuado

Adapte el tipo de solo lectura a su estructura de datos: ReadonlyArray para listas ordenadas, ReadonlyMap para búsquedas de clave y valor, y ReadonlySet para pertenencia de elementos únicos. Cada uno impone la inmutabilidad correspondiente a su estructura.

const roles: ReadonlySet<string> = new Set(['admin', 'user']);
const limits: ReadonlyMap<string, number> = new Map([['admin', 100]]);
console.log(roles.has('user'), limits.get('admin'));

Estado compartido más seguro

Exponer las colecciones internas como tipos de solo lectura evita que quien las llama corrompa el estado de su módulo. Puede inspeccionar los datos libremente, pero solo su código puede modificarlos.

class Registry {
  private items = new Set<string>();
  add(name: string): void { this.items.add(name); }
  get all(): ReadonlySet<string> { return this.items; }
}
const r = new Registry();
r.add('a');
console.log(r.all.has('a'));

Comprobación rápida

Compruebe cuánto entiende sobre los tipos de colecciones de solo lectura.

Repaso: colecciones de solo lectura

Ha aprendido la familia de colecciones de solo lectura:

ReadonlyArray<T>, ReadonlyMap<K, V> y ReadonlySet<T> exponen únicamente operaciones de lectura.
Los métodos que modifican datos (set, add, delete, push) se eliminan.
Las colecciones mutables se pueden asignar a sus equivalentes de solo lectura.
Son excelentes tipos para parámetros y valores devueltos, y permiten compartir el estado de forma más segura.

Por último, veremos patrones de inmutabilidad profunda.

function count(s: ReadonlySet<number>): number {
  return s.size;
}
console.log(count(new Set([1, 2, 3])));

Preguntas frecuentes

¿La lección «ReadonlyArray y ReadonlyMap» es gratis?

Sí — el texto completo de «ReadonlyArray y ReadonlyMap» 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 «ReadonlyArray y ReadonlyMap»?

Utilice tipos de colecciones readonly integrados. 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 3 de 4.

¿Cuánto tiempo toma la lección «ReadonlyArray y ReadonlyMap»?

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