Массивы и кортежи readonly
Защищайте массивы и кортежи от методов, изменяющих их содержимое
«Массивы и кортежи readonly» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.
Массивы только для чтения
Массив только для чтения можно считывать, но нельзя изменять. Запишите его как readonly number[] или эквивалентно как ReadonlyArray<number>. Тип элементов остаётся прежним, блокируется только изменение.
const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonlyТип ReadonlyArray
ReadonlyArray<T> — это обобщённая форма, по смыслу полностью совпадающая с readonly T[]. Используйте ту запись, которая лучше читается: они взаимозаменяемы.
const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));Отсутствие изменяющих методов
В массивах только для чтения полностью отсутствуют методы, изменяющие массив. Методы push, pop, splice, sort и reverse недоступны — у этого типа их буквально нет.
const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);Неизменяющие методы по-прежнему работают
Методы, которые возвращают новое значение, а не изменяют массив, — map, filter, concat и slice — по-прежнему доступны. Они создают новые массивы, оставляя исходный без изменений.
const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchangedМассивы только для чтения в параметрах
Приём readonly T[] в качестве параметра функции означает, что Вы не будете изменять массив вызывающего кода. Это документирует намерение и позволяет компилятору проверить соблюдение обещания.
function sum(values: readonly number[]): number {
return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));Изменяемые массивы совместимы с массивами только для чтения
Обычный number[] можно передать параметру типа readonly number[] — Вы всего лишь обещаете не изменять этот массив. Обратное преобразование не разрешено.
function total(v: readonly number[]): number {
return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // okКортежи только для чтения
Кортежи тоже могут быть доступны только для чтения: readonly [string, number]. Типы и порядок элементов фиксированы, а отдельные позиции нельзя переназначить.
const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tupleКортежи только для чтения блокируют изменения
Как и массивы только для чтения, кортежи только для чтения не поддерживают изменяющие методы и запрещают присваивание по индексу. Они идеально подходят для записей фиксированной формы, например пар координат.
const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);Утверждение константности и тип только для чтения
Два способа получить массивы только для чтения немного различаются. Аннотация readonly number[] сохраняет общий тип элементов. Конструкция as const идёт дальше: она создаёт кортеж только для чтения с типами литералов.
const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const; // readonly [1, 2, 3]
console.log(a[0], b[0]);Как выбрать между ними
Используйте аннотацию readonly T[], когда нужна неизменяемость, но типы элементов должны оставаться общими. Используйте as const, когда нужны также точные значения литералов, например для получения объединения типов.
const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);Неизменяемость общих данных
Массивы и кортежи только для чтения защищают общие константы и списки конфигурации от случайных изменений, делая ошибки из-за неожиданной модификации невозможными уже на этапе компиляции.
const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));Быстрая проверка
Проверьте, насколько хорошо Вы поняли массивы и кортежи только для чтения.
Итоги: массивы и кортежи только для чтения
Вы узнали, что:
readonly T[]/ReadonlyArray<T>блокирует изменения, но позволяет считывать данные и использовать неизменяющие методы.- Изменяющие методы, такие как
push/splice, удаляются из типа. - Кортежи только для чтения фиксируют и длину, и типы элементов.
as constидёт дальше, создавая кортежи только для чтения с типами литералов.
Далее — типы коллекций только для чтения.
const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);Часто задаваемые вопросы
Урок «Массивы и кортежи readonly» бесплатный?
Да — полный текст урока «Массивы и кортежи readonly» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Массивы и кортежи readonly»?
Защищайте массивы и кортежи от методов, изменяющих их содержимое Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Массивы и кортежи readonly»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Свойства readonly
- Массивы и кортежи readonly
- ReadonlyArray и ReadonlyMap
- Шаблоны глубокой неизменяемости