TypeScript Academy · Lección

Propiedades readonly

Marque las propiedades de los objetos como inmutables después de su inicialización.

Propiedades readonly es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 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.

El modificador readonly

El modificador readonly marca una propiedad que se puede establecer una vez, pero nunca reasignar después. Expresa la inmutabilidad en el nivel de tipos y ayuda a evitar cambios accidentales.

interface Point {
  readonly x: number;
  readonly y: number;
}
const p: Point = { x: 1, y: 2 };
console.log(p.x, p.y);
// p.x = 5; // Error: cannot assign to readonly property

readonly en interfaces

En una interfaz, readonly documenta qué campos quedan fijados después de la creación. Los consumidores pueden leerlos libremente, pero el compilador bloquea cualquier reasignación.

interface Config {
  readonly env: string;
  retries: number; // mutable
}
const c: Config = { env: 'prod', retries: 3 };
c.retries = 5; // allowed
console.log(c.env, c.retries);

Error de compilación al reasignar

Intentar escribir en una propiedad readonly produce un error en tiempo de compilación. Esto detecta toda una categoría de errores en los que el estado compartido se modifica inesperadamente.

interface User {
  readonly id: number;
  name: string;
}
const u: User = { id: 1, name: 'Ada' };
u.name = 'Grace'; // ok
// u.id = 2; // Error
console.log(u);

readonly en propiedades de clase

Las clases también admiten readonly. Un campo readonly se puede inicializar en la declaración o dentro del constructor, pero en ningún otro lugar.

class Circle {
  readonly radius: number;
  constructor(r: number) {
    this.radius = r; // allowed in constructor
  }
}
const c = new Circle(5);
console.log(c.radius);

Establecer una sola vez en el constructor

El constructor es el único lugar fuera de la declaración donde puede asignar un campo readonly. Después de la construcción, el valor queda bloqueado durante toda la vida del objeto.

class Account {
  readonly owner: string;
  constructor(owner: string) {
    this.owner = owner;
  }
  rename() {
    // this.owner = 'x'; // Error: readonly outside constructor
  }
}
console.log(new Account('Sam').owner);

Propiedades de parámetro readonly

Las propiedades de parámetro de TypeScript permiten declarar e inicializar un campo readonly directamente en la firma del constructor, lo que reduce el código repetitivo.

class Vector {
  constructor(
    readonly x: number,
    readonly y: number
  ) {}
}
const v = new Vector(3, 4);
console.log(v.x, v.y);

readonly solo existe en tiempo de compilación

Es fundamental comprender que readonly solo existe en el sistema de tipos. Se elimina en tiempo de ejecución: JavaScript no tiene ningún concepto equivalente. Evita la reasignación en el código TypeScript, pero no en el resultado compilado al que se llegue mediante rutas sin tipos.

interface Box { readonly value: number; }
const b: Box = { value: 10 };
// At runtime b is a plain object; readonly is not enforced by JS.
console.log(b.value);

readonly frente a const

No los confunda. const impide que se reasigne una variable. readonly impide que se reasigne una propiedad. Un objeto const aún puede tener propiedades mutables, a menos que sean readonly.

const obj = { count: 0 }; // const binding
obj.count = 5; // allowed: property is mutable
console.log(obj.count);

Superficial por naturaleza

readonly es superficial: protege la propiedad en sí, no el contenido del objeto o array al que apunta. Una referencia readonly a un objeto aún permite modificar los campos de ese objeto.

interface Holder { readonly data: { n: number }; }
const h: Holder = { data: { n: 1 } };
// h.data = {...}; // Error
h.data.n = 99; // allowed: inner field is not readonly
console.log(h.data.n);

Usar readonly para APIs más seguras

Marcar como readonly los campos de los objetos devueltos indica a los consumidores que no deben modificarlos. Expresa la intención en el tipo y convierte el uso indebido en un error de compilación en lugar de un error silencioso.

interface Snapshot { readonly takenAt: number; readonly size: number; }
function snapshot(): Snapshot {
  return { takenAt: Date.now(), size: 1024 };
}
const s = snapshot();
console.log(s.size);

readonly en firmas de índice

Incluso puede hacer que las firmas de índice sean readonly, creando un tipo similar a un mapa cuyas entradas se pueden leer, pero no reasignar mediante el índice.

interface Scores {
  readonly [name: string]: number;
}
const scores: Scores = { ada: 95, sam: 88 };
console.log(scores.ada);
// scores.ada = 100; // Error

Comprobación rápida

Compruebe su comprensión de las propiedades readonly.

Repaso: propiedades readonly

Ha aprendido que readonly:

Permite establecer una propiedad una vez y después bloquea su reasignación.
Se puede establecer en la declaración o en el constructor para los campos de clase.
Solo existe en tiempo de compilación y es superficial: no congela profundamente los datos anidados.
Se diferencia de const: uno protege propiedades y el otro protege vinculaciones de variables.

A continuación, arrays y tuplas readonly.

interface Meta { readonly id: number; }
const m: Meta = { id: 42 };
console.log(m.id);

Preguntas frecuentes

¿La lección «Propiedades readonly» es gratis?

Sí — el texto completo de «Propiedades 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 «Propiedades readonly»?

Marque las propiedades de los objetos como inmutables después de su inicializació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 1 de 4.

¿Cuánto tiempo toma la lección «Propiedades 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