TypeScript Academy · Урок

Свойства readonly

Помечайте свойства объектов как неизменяемые после инициализации

«Свойства readonly» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Модификатор только для чтения

Модификатор readonly помечает свойство, которому можно присвоить значение один раз, но нельзя переназначить его впоследствии. Он выражает неизменяемость на уровне типов и помогает предотвратить случайные изменения.

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 документирует поля, которые нельзя изменять после создания. Код, использующий интерфейс, может свободно считывать их, но компилятор заблокирует любое переназначение.

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);

Ошибка компиляции при переназначении

Попытка записать значение в свойство readonly приводит к ошибке времени компиляции. Это выявляет целую категорию ошибок, при которых общее состояние неожиданно изменяется.

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. Поле только для чтения можно инициализировать при объявлении или внутри конструктора, но больше нигде.

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

Однократная установка в конструкторе

Конструктор — единственное место за пределами объявления, где можно присвоить значение полю только для чтения. После создания объекта это значение заблокировано на всё время существования объекта.

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);

Свойства-параметры только для чтения

Свойства-параметры TypeScript позволяют объявить и инициализировать поле только для чтения непосредственно в сигнатуре конструктора, уменьшая объём шаблонного кода.

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

Только для чтения действует лишь во время компиляции

Важно понимать, что readonly существует только в системе типов. Во время выполнения он удаляется — в JavaScript нет такого понятия. Он предотвращает переназначение в коде TypeScript, но не в скомпилированном результате, к которому обращаются через пути без типизации.

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);

Только для чтения и константа

Не путайте эти понятия. const не позволяет переназначить переменную. readonly не позволяет переназначить свойство. У объекта, объявленного с помощью const, всё ещё могут быть изменяемые свойства, если они не помечены как readonly.

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

По своей природе — поверхностный

readonly является поверхностным: он защищает само свойство, но не содержимое объекта или массива, на который оно ссылается. Ссылка только для чтения на объект всё ещё позволяет изменять поля этого объекта.

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);

Использование только для чтения для более безопасных программных интерфейсов

Пометка полей возвращаемых объектов как readonly сообщает вызывающему коду, что изменять их не следует. Намерение фиксируется в типе, поэтому неправильное использование становится ошибкой компиляции, а не незаметной ошибкой.

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

Только для чтения в индексных сигнатурах

Индексные сигнатуры тоже можно сделать доступными только для чтения, создав тип, похожий на словарь: его записи можно считывать, но нельзя переназначать через индекс.

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

Быстрая проверка

Проверьте, насколько хорошо Вы поняли свойства только для чтения.

Итоги: свойства только для чтения

Вы узнали, что readonly:

Позволяет установить свойство один раз, а затем блокирует его переназначение.
Для полей класса может быть задан при объявлении или в конструкторе.
Работает только во время компиляции и является поверхностным — он не замораживает вложенные данные полностью.
Отличается от const: один защищает свойства, а другой — привязки переменных.

Далее — массивы и кортежи только для чтения.

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

Часто задаваемые вопросы

Урок «Свойства readonly» бесплатный?

Да — полный текст урока «Свойства readonly» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Свойства readonly»?

Помечайте свойства объектов как неизменяемые после инициализации Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Свойства readonly»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к TypeScript Academy