Интерфейсы в TypeScript позволяют не только описывать структуру объектов, но и защищать их свойства от изменений. Для этого используется модификатор readonly.
Если свойство помечено как readonly, его можно установить только один раз — при создании объекта. Любая попытка присвоить этому свойству новое значение позже приведет к ошибке компиляции. Это ключевой инструмент для создания неизменяемых (immutable) структур данных и повышения предсказуемости кода.
Пример:
interface User {
readonly id: number;
name: string;
}
const user: User = { id: 1, name: "Alice" };
// user.id = 2; // Ошибка!
В этом уроке мы научимся правильно применять readonly для защиты данных.
- Модуль 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. Добавление модификатора
В этом задании вам нужно дополнить определение интерфейса на TypeScript, добавив модификатор, который запретит изменение свойства после его инициализации. В предоставленном коде интерфейс описывает объект пользователя, но в его определении отсутствует ключевое слово, делающее свойство ID неизменяемым. Ваша задача — вставить этот модификатор в отмеченное место, чтобы код соответствовал требованиям к неизменяемым свойствам в TypeScript.
interface User {
input1S ID: number;
name: string;
email: string;
}
const admin: User = { ID: 1, name: "Alice", email: "alice@example.com" };
// После корректировки интерфейса эта строка вызовет ошибку компиляции:
// admin.ID = 2;2. Изменяемое и неизменяемое
В данном задании представлен интерфейс TypeScript с несколькими свойствами. Разметьте каждое свойство как 'Readonly' (только для чтения) или 'Mutable' (изменяемое) в зависимости от наличия модификатора readonly. Обратите внимание, что свойства без модификатора readonly являются изменяемыми по умолчанию.
interface User {
{{readonly~|~t1}} {{id~|~t2}}: {{number~|~t3}};
{{name~|~t4}}: string;
{{readonly~|~t5}} {{email~|~t6}}: string;
{{age~|~t7}}?: number;
{{readonly~|~t8}} {{createdAt~|~t9}}: Date;
}3. Попытка записи
В этом фрагменте TypeScript-кода определён интерфейс с readonly-свойством и создан объект этого типа. Затем предпринимаются попытки изменить значения свойств объекта. Найдите строку, где происходит попытка записи в readonly-свойство, и исправьте её, чтобы код стал корректным. Обратите внимание, что readonly-свойства можно инициализировать только при создании объекта, но не изменять после.
interface User { readonly id: number; name: string; age: number;} const user: User = { id: 1, name: 'Alice', age: 25 };user.name = 'Bob';user.id = 2;user.age = 26;4. Действия с объектом
Перед вами список операций с объектом, имеющим readonly-свойства в TypeScript. Распределите каждую операцию в одну из двух категорий: 'Разрешено' (для readonly свойства) и 'Запрещено' (для readonly свойства). Учтите, что readonly свойства можно только читать, но не изменять после инициализации объекта. Всего нужно распределить 8 элементов.
let value = obj.prop;obj.prop = 10;console.log(obj.prop);obj['prop'] = 'new';let x = obj['prop'];delete obj.prop;return obj.prop;obj.prop += 5;5. Создание защищенного интерфейса
Из предложенных строк соберите корректное определение интерфейса TypeScript с именем Point. Интерфейс должен содержать два свойства: x и y, оба должны быть доступны только для чтения (readonly) и иметь тип number. В решении не должно быть лишних строк, которые не соответствуют этому определению.
interface Point { readonly x: number; readonly y: number;} x: number; y: number;interface Point2 { readonly x: string;6. Const vs Readonly
В этом задании вам предстоит заполнить пропуски в коде TypeScript, выбирая между ключевыми словами 'const' и 'readonly'. Обратите внимание на контекст: 'const' используется для объявления переменных, которые не могут быть переприсвоены, а 'readonly' — для свойств интерфейсов, которые нельзя изменять после инициализации. Выберите подходящий вариант из выпадающего списка для каждого пропуска, чтобы код стал корректным и соответствовал принципам неизменяемости.
interface UserProfile {
input1S username: string;
input2S email: string;
}
input3S admin: UserProfile = { username: "admin", email: "admin@example.com" };
interface AppConfig {
input4S apiEndpoint: string;
input5S maxRetries: number;
}
input6S config: AppConfig = { apiEndpoint: "https://api.example.com", maxRetries: 3 };
// Попытка изменить значения (вызовет ошибки компиляции, если правильно использованы const и readonly)
// admin.username = "newadmin"; // Ошибка: свойство 'username' доступно только для чтения
// config = { apiEndpoint: "https://new.example.com", maxRetries: 5 }; // Ошибка: переменная 'config' является константой