as const утверждение [Модуль 9: Литеральные типы]: Тренажер по TypeScript

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

Иногда нам нужно зафиксировать объект или массив так, чтобы он стал полностью неизменяемым (readonly), а все его строковые свойства превратились в литеральные типы. Для этого в TypeScript используется утверждение as const.

Если написать const config = { method: 'POST' } as const;, то поле method будет иметь тип не просто string, а 'POST', и сам объект нельзя будет изменить. Это превращает данные в глубокие константы, что крайне полезно при определении конфигураций или действий в Redux.

В этом уроке мы разберем, как работает эта конструкция. Вы увидите разницу между обычным const (который защищает только ссылку на переменную) и as const (который замораживает структуру и типы значений). Примеры кода наглядно покажут преимущества этого подхода.

Список тем

Модуль 1: Введение в TypeScript
- Аннотация типа переменной.
- Автоматический вывод типов (Type Inference).
- Ошибки типизации при компиляции.
Модуль 2: Примитивные типы
- Тип string.
- Тип number.
- Тип boolean.
- Типы null и undefined.
- Тип symbol.
- Тип bigint.
Модуль 3: Специальные типы
- Тип any.
- Тип unknown.
- Тип void.
- Тип never.
- Разница между any и unknown.
Модуль 4: Массивы
- Типизация массивов (Type[]).
- Типизация массивов (Array).
- Массивы с несколькими типами.
- Readonly массивы.
Модуль 5: Кортежи (Tuples)
- Объявление кортежей.
- Опциональные элементы в кортежах.
- Rest элементы в кортежах.
- Readonly кортежи.
Модуль 6: Объекты
- Аннотация типа объекта.
- Опциональные свойства (?).
- Readonly свойства.
- Index Signatures.
- Вложенные объекты.
Модуль 7: Функции
- Типизация параметров функции.
- Типизация возвращаемого значения.
- Опциональные параметры.
- Параметры по умолчанию.
- Rest параметры.
- Типизация стрелочных функций.
- Тип Function.
- Callback функции.
Модуль 8: Union типы
- Объявление Union типов.
- Union с примитивами.
- Union с null и undefined.
- Сужение Union типов (Narrowing).
Модуль 9: Литеральные типы
- String Literal Types.
- Number Literal Types.
- Boolean Literal Types.
- Литеральные Union типы.
- as const утверждение.
Модуль 10: Type Aliases
- Создание Type Alias.
- Type Alias для объектов.
- Type Alias для Union типов.
- Type Alias для функций.
- Пересечение типов (Intersection).
Модуль 11: Интерфейсы
- Объявление интерфейса.
- Опциональные свойства в интерфейсах.
- Readonly свойства в интерфейсах.
- Расширение интерфейсов (extends).
- Множественное наследование интерфейсов.
- Интерфейсы для функций.
- Declaration Merging.
- Interface vs Type Alias.
Модуль 12: Type Guards и Narrowing
- typeof guard.
- Truthiness narrowing.
- Equality narrowing.
- in operator narrowing.
- instanceof guard.
- Пользовательские Type Guards (is).
Модуль 13: Enums
- Числовые Enums.
- Строковые Enums.
- Гетерогенные Enums.
- const Enums.
- Enum как тип.
Модуль 14: Классы
- Типизация свойств класса.
- Модификатор public.
- Модификатор private.
- Модификатор protected.
- Модификатор readonly в классах.
- Сокращенная инициализация в конструкторе.
- Реализация интерфейсов (implements).
- Абстрактные классы.
- Static свойства и методы.
- Getters и Setters.
Модуль 15: Generics — основы
- Введение в Generics.
- Generic функции.
- Несколько типовых параметров.
- Generic интерфейсы.
- Generic Type Aliases.
- Generic классы.
Модуль 16: Generics — ограничения
- Generic Constraints (extends).
- Использование keyof с Generics.
- Значения по умолчанию для Generic.
Модуль 17: Utility Types — базовые
- Partial.
- Required.
- Readonly.
- Pick.
- Omit.
- Record.
Модуль 18: Utility Types — работа с Union
- Exclude.
- Extract.
- NonNullable.
Модуль 19: Utility Types — функции
- ReturnType.
- Parameters.
- Awaited.
Модуль 20: Type Assertions
- Утверждение типа (as).
- Угловые скобки ().
- Non-null assertion (!).
- as const.
- Двойное утверждение (as unknown as T).
Модуль 21: Keyof и Typeof операторы
- Оператор keyof.
- Оператор typeof в типах.
- Комбинация keyof typeof.
- Indexed Access Types.
Модуль 22: Mapped Types
- Основы Mapped Types.
- Модификаторы в Mapped Types (+, -).
- Key Remapping (as).
Модуль 23: Conditional Types
- Основы Conditional Types.
- Distributive Conditional Types.
- Ключевое слово infer.
Модуль 24: Discriminated Unions
- Паттерн Discriminated Union.
- Exhaustiveness checking.
- Switch с Discriminated Unions.
Модуль 25: Модули и типы
- Export типов и интерфейсов.
- Import типов.
- import type синтаксис.
- Re-export типов.
Модуль 26: Declaration Files
- Что такое .d.ts файлы.
- Declare keyword.
- @types пакеты.
Модуль 27: Типизация асинхронного кода
- Типизация Promise.
- Async/await с типами.
- Promise.all типизация.
Модуль 28: Практические паттерны
- Типизация событий DOM.
- Типизация fetch запросов.
- Типизация JSON данных.
- Типизация localStorage.

1. Тип свойства

id: 40669_ts_const_predict_02

Проанализируйте представленный фрагмент кода TypeScript, в котором объект объявлен с использованием утверждения `as const`. Определите, какой конкретный тип будет присвоен числовому свойству этого объекта. Выберите правильный вариант из предложенных ниже.

Выберите правильный вариант ответа

const serverConfig = {
  port: 8080,
  hostname: 'localhost',
  sslEnabled: true
} as const;

// Какой тип будет у свойства port?

8080

number

readonly number

8080 | number

Сообщения

Проверить

Показать подсказку

2. Const vs as const

id: 40669_ts_const_compare_04

В левой колонке приведены объявления переменных на TypeScript, а в правой — описания их типов и изменяемости. Сопоставьте каждое объявление с соответствующим описанием. Обратите внимание на использование утверждения `as const` и его влияние на вывод типов и возможность изменений.

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру

const obj = { a: 1, b: 2 };

const obj = { a: 1, b: 2 } as const;

const arr = [1, 2, 3];

const arr = [1, 2, 3] as const;

const nested = { a: { b: 1 } };

const nested = { a: { b: 1 } } as const;

Массив чисел (тип: number[]), элементы можно изменять

Объект с readonly свойствами и литеральными типами (тип: { readonly a: 1, readonly b: 2 })

Объект с изменяемыми свойствами (тип: { a: number, b: number })

Вложенный объект, все уровни readonly (тип: { readonly a: { readonly b: 1 } })

Кортеж readonly с литеральными типами (тип: readonly [1, 2, 3])

Вложенный объект, внутренний объект изменяем (тип: { a: { b: number } })

Сообщения

Проверить

Показать подсказку

3. Использование в массиве

id: 40669_ts_const_select_fill_05

В данном задании представлен фрагмент кода TypeScript, в котором массив объектов объявлен с использованием утверждения `as const`. Это приводит к тому, что типы элементов массива и их полей становятся литеральными и доступными только для чтения. Вам необходимо заполнить пропуски, выбрав правильные типы для переменных, которые выводятся из этого массива. Обратите внимание, что `as const` сужает типы до конкретных значений, а не общих примитивов.

Нужно правильно расставить в пропуски предложенные варианты

const books = [
  { title: "1984", author: "George Orwell", year: 1949 },
  { title: "Brave New World", author: "Aldous Huxley", year: 1932 }
] as const;

const firstBook: input1S = books[0];
const firstBookTitle: input2S = books[0].title;

console.log(firstBook);
console.log(firstBookTitle);

Сообщения

Проверить

Показать решение на 3 сек.

Показать подсказку

4. Создание readonly кортежа

id: 40669_ts_const_build_06

Из предложенных строк соберите корректный код на TypeScript, который создаёт переменную colors как readonly кортеж (readonly tuple) с помощью утверждения as const. Кортеж должен содержать три строковых значения: 'red', 'green', 'blue'. Игнорируйте лишние строки, которые не соответствуют заданию или нарушают синтаксис.

Перетяните в правильном порядке строки из одного блока в другой

const colors = [

'red',

'green',

'blue'

] as const;

let colors = [

as const

];

'yellow'

Результат

Переменная colors становится readonly кортежем типа readonly ["red", "green", "blue"].

Сообщения

Проверить

Показать решение на 3 сек.

Показать подсказку

5. Readonly поля

id: 40669_ts_const_click_07

Перед вами фрагмент кода на TypeScript, в котором объект объявлен с использованием утверждения `as const`. Внимательно изучите код. Ваша задача — отметить (кликнуть) все ключи (имена) свойств этого объекта, которые становятся доступными только для чтения (readonly) после применения `as const`. Не отмечайте значения свойств, имя переменной, ключевое слово `as const`, фигурные скобки, запятые или другие элементы синтаксиса.

Кликните по всем фрагментам, которые подходят под условие задания.

const {{config~|~t0}} = {
  {{apiUrl~|~t1}}: {{'https://api.example.com'~|~t4}},
  {{maxRetries~|~t2}}: {{3~|~t5}},
  {{timeout~|~t3}}: {{5000~|~t6}},
  {{debug~|~t7}}: {{false~|~t8}}
} {{as const~|~t9}};

Сообщения

Проверить

Показать подсказку

as const утверждение

1. Тип свойства

2. Const vs as const

3. Использование в массиве

4. Создание readonly кортежа

5. Readonly поля

TypeScript: компиляция и запуск