По умолчанию массивы и кортежи в TypeScript изменяемы (mutable). Это значит, что вы можете менять элементы по индексу или использовать методы вроде push и pop. Однако часто требуется гарантировать неизменяемость данных.
Для этого используется модификатор readonly. Синтаксис: readonly [number, string].
Альтернативный способ создания неизменяемого кортежа «на лету» — использование as 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
В TypeScript для создания неизменяемых (immutable) кортежей используется модификатор `readonly`. В данном фрагменте кода объявлен тип `Point`, представляющий координаты точки как кортеж из двух чисел. Однако, без модификатора `readonly` элементы кортежа могут быть изменены после создания, что противоречит идее неизменяемости. Добавьте пропущенное ключевое слово в объявление типа, чтобы сделать кортеж неизменяемым и предотвратить изменение его элементов.
// Объявление типа для координат точки
type Point = input1S [number, number];
const origin: Point = [0, 0];
// origin[0] = 1; // Ошибка: нельзя изменять элементы2. Попытка изменения
В этом фрагменте TypeScript-кода объявлен кортеж с модификатором readonly. Затем предпринимается попытка изменить значение первого элемента кортежа, что запрещено. Найдите строку с ошибкой и исправьте её, удалив или закомментировав.
const point: readonly [number, number] = [10, 20];point[0] = 5;console.log(point);3. Использование as const
Из предложенных строк соберите корректную TypeScript-программу, которая создаёт кортеж с помощью утверждения `as const`, определяет тип элемента этого кортежа, объявляет переменную этого типа, выводит значение переменной и длину кортежа. Лишние строки, которые приводят к ошибкам компиляции или не соответствуют задаче, в решение включать не нужно.
const colors = ['red', 'green', 'blue'] as const;type Color = typeof colors[number];const firstColor: Color = colors[0];console.log(firstColor);console.log(colors.length);colors[0] = 'yellow';const anotherColor: Color = 'purple';4. Mutable vs Immutable
Перед вами список операций, которые можно выполнить над массивом или кортежем в TypeScript. Разнесите их по двум категориям: те, которые доступны для readonly кортежей (не изменяют исходный кортеж), и те, которые запрещены (изменяют кортеж). Обратите внимание, что readonly кортежи не могут быть изменены после создания. Каждый элемент должен оказаться в одной из категорий.
tuple.push(5)tuple.pop()tuple.splice(0, 1)tuple[0] = 5tuple.map(x => x * 2)tuple.slice(0, 2)tuple.indexOf(5)tuple.join(',')5. Аргументы функции
В этом задании вам нужно выбрать правильные аннотации типов для параметров функции, чтобы гарантировать, что функция не будет изменять переданные ей аргументы. В коде TypeScript ниже два пропуска: для первого параметра (массив строк) и второго (кортеж из строки и числа). Выберите из выпадающих списков подходящие типы, используя варианты с модификатором `readonly`. Это упражнение поможет закрепить понимание работы с неизменяемыми структурами данных в TypeScript.
function processData(arr: input1S, tup: input2S): void {
// Эта функция не должна изменять arr и tup
console.log(`Длина массива: ${arr.length}`);
console.log(`Кортеж: ${tup[0]} - ${tup[1]}`);
}6. Результат компиляции
Проанализируйте приведённый фрагмент кода на TypeScript. Определите, будет ли этот код успешно скомпилирован. Выберите правильное объяснение результата компиляции, учитывая особенности работы с readonly кортежами.
const tuple: readonly [number, number, number] = [3, 1, 2];
tuple.sort();
console.log(tuple);7. Безопасное обновление
Перед вами строки TypeScript-кода, которые выполняют безопасное обновление readonly кортежа. Исходный кортеж объявлен как readonly, поэтому его нельзя изменить напрямую. Необходимо расставить строки в правильном порядке, чтобы получить новый кортеж с обновлённым значением. В результате должен получиться корректный код, который сначала деструктурирует исходный кортеж, затем изменяет одно из значений и создаёт новый readonly кортеж.
const newStr = str + "!";const original: readonly [number, string] = [1, "old"];const [num, str] = original;const updated: readonly [number, string] = [num, newStr];8. Мутирующие методы
В данном фрагменте кода TypeScript объявлен readonly кортеж. Ниже приведены вызовы различных методов для этого кортежа. Ваша задача — отметить (кликнуть) только те вызовы методов, которые вызовут ошибку компиляции из-за того, что они пытаются изменить (мутировать) readonly кортеж. Не отмечайте вызовы методов, которые не изменяют кортеж и, следовательно, разрешены для readonly.
const tuple: readonly [number, string, boolean] = [1, "hello", true];
// Вызовы методов:
{{tuple.push(4);~|~t1}}
{{tuple.splice(0, 1);~|~t2}}
{{tuple.concat([2, "world"]);~|~t3}}
{{tuple.filter(x => true);~|~t4}}
{{tuple.pop();~|~t5}}
{{tuple.reverse();~|~t6}}
{{tuple.map(x => x);~|~t7}}
{{tuple.slice(0, 2);~|~t8}}