В объектно-ориентированном программировании часто требуется создать свойства, которые нельзя изменять после инициализации. В TypeScript для этого существует модификатор readonly.
Свойства, помеченные как readonly, могут быть записаны только в момент объявления или внутри конструктора класса. Попытка изменить их в любом другом методе или снаружи класса приведет к ошибке компиляции. Это позволяет гарантировать неизменность важных данных, таких как идентификаторы (ID) или конфигурационные константы, делая код более надежным и предсказуемым.
В этом уроке вы научитесь:
- Объявлять неизменяемые свойства в классах.
- Отличать
readonly(свойства) отconst(переменные). - Использовать этот модификатор для защиты состояния объекта.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Объявление readonly
В этом задании вам нужно дополнить код класса User, добавив модификатор `readonly` к свойству `id`, чтобы запретить его изменение после инициализации. Это ключевая концепция TypeScript для создания неизменяемых свойств в классах. Ваша задача — вставить правильный модификатор в указанное место, чтобы код соответствовал синтаксису TypeScript и логике задания.
class User {
input1S id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
}2. Изменение запрещено
В представленном фрагменте кода TypeScript есть ошибка, связанная с использованием модификатора readonly. Найдите строку, в которой происходит попытка изменить свойство, объявленное как readonly, и исправьте её, чтобы код стал корректным. Обратите внимание, что readonly свойства можно инициализировать только в конструкторе или при объявлении, а затем их значение изменять нельзя.
class UserProfile { readonly id: number; name: string; constructor(userId: number, userName: string) { this.id = userId; this.name = userName; } updateId(newId: number) { this.id = newId; // Ошибка: попытка изменить readonly свойство }}3. Конструктор и readonly
В данном задании представлен фрагмент кода TypeScript, содержащий класс с readonly-свойством. В коде есть пропуски, обозначенные как input1 и input2. Вам необходимо выбрать из выпадающего списка подходящие варианты, чтобы корректно инициализировать readonly-свойство в конструкторе и показать, где присваивание разрешено, а где нет. Обратите внимание, что readonly-свойства могут быть инициализированы только в момент объявления или внутри конструктора класса.
class Book {
readonly title: string;
constructor(newTitle: string) {
input1S
}
changeTitle(newTitle: string): void {
input2S
}
}4. Const vs Readonly
В этом задании вам предстоит сопоставить термины и понятия, связанные с модификаторами const и readonly в TypeScript. В левой колонке приведены названия конструкций и типов проверок, а в правой — их описания или характеристики. Сопоставьте каждый элемент левой колонки с соответствующим элементом правой. Обратите внимание, что в правой колонке нет лишних вариантов, но порядок элементов перемешан.
5. Неизменяемая конфигурация
Из предложенных строк соберите корректное объявление класса Config на TypeScript, который имеет публичное readonly поле apiKey типа string и конструктор, принимающий этот ключ и сохраняющий его в поле. Класс должен быть готов к использованию, но не включайте в решение строки, которые создают экземпляр класса или выполняют другие действия, не относящиеся к объявлению класса.
class Config { public readonly apiKey: string; constructor(apiKey: string) { this.apiKey = apiKey; }}const config = new Config('my-api-key');config.apiKey = 'new-key';6. Поиск защищенных полей
Внимательно изучите приведённый код класса на TypeScript. Ваша задача — найти и выделить кликом имена всех свойств (полей) этого класса, которые защищены от записи, то есть объявлены с использованием модификатора `readonly`. Не отмечайте имена методов, параметры конструктора, типы данных или свойства без модификатора `readonly`.
class UserProfile {
{{id~|~t1}}: number;
public readonly {{username~|~t2}}: string;
private {{email~|~t3}}: string;
readonly {{createdAt~|~t4}}: Date;
protected {{status~|~t5}}: boolean;
constructor(id: number, username: string, email: string) {
this.id = id;
this.username = username;
this.email = email;
this.createdAt = new Date();
this.status = true;
}
updateEmail(newEmail: string): void {
this.email = newEmail;
}
}7. Результат компиляции
Проанализируйте представленный фрагмент кода на TypeScript, в котором объявлен класс с полем, помеченным модификатором `readonly`. Обратите внимание на попытку изменения значения этого поля после создания экземпляра класса. Выберите, что произойдет при попытке компиляции и выполнения данного кода.
class User {
readonly id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
}
const user = new User(1, "Alice");
user.id = 2; // Попытка изменить readonly поле
console.log(user.id);