as const — это утверждение типа в TypeScript, которое делает значения максимально узкими и неизменяемыми. Вместо string получаете конкретный литерал "hello", а массив становится readonly кортежем.
Зачем это нужно:
- Создание констант с точными типами без лишних аннотаций
- Работа с конфигурациями, где важны конкретные значения
- Получение literal types из обычных объектов
Пример: const colors = ['red', 'blue'] as const — теперь это readonly ['red', 'blue'], а не 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. Добавь as const
В данном фрагменте кода TypeScript объявлен объект конфигурации для приложения. Необходимо заполнить пропуски, чтобы код корректно компилировался и типы были максимально конкретными. Добавьте ключевое слово const и утверждение типа as const в правильных местах. В результате должен получиться иммутабельный объект с точными типами литералов.
input1S appConfig = {
appName: "MyApp",
version: "1.0.0",
debug: true,
features: ["auth", "dashboard", "settings"]
} input2S;
// После применения as const тип appConfig будет:
// {
// readonly appName: "MyApp";
// readonly version: "1.0.0";
// readonly debug: true;
// readonly features: readonly ["auth", "dashboard", "settings"];
// }2. Какой тип у переменной
Проанализируйте приведённый фрагмент кода на TypeScript. Обратите внимание на два способа объявления массива строк: обычный и с использованием утверждения константы (as const). Определите, какой тип TypeScript выведет для переменной, объявленной с помощью as const, и выберите соответствующий вариант из предложенных.
const colors1 = ['red', 'green', 'blue'];
const colors2 = ['red', 'green', 'blue'] as const;3. Литералы vs расширенные типы
Перед вами 10 примеров объявлений переменных и констант в TypeScript. Ваша задача — распределить их по двум категориям: «Литеральный тип» и «Расширенный тип». Литеральный тип (literal type) фиксирует конкретное значение и сужает тип до него, что часто достигается с помощью as const или объявлением const с примитивным литералом. Расширенный тип (widened type) — это более общий тип (например, number, string, массив без as const), который позволяет присваивать другие значения того же общего типа. Обратите внимание на использование as const и на то, объявлена ли переменная через const или let.
const x = 5 as const;let y = 5;const arr = [1, 2, 3] as const;const arr2 = [1, 2, 3];const str = 'hello' as const;let str2 = 'hello';const obj = { a: 1 } as const;const obj2 = { a: 1 };const flag = true as const;let flag2 = true;4. Почему не работает as const
В этом фрагменте TypeScript-кода используется утверждение типа as const для создания неизменяемого массива. Однако, из-за использования ключевого слова let, переменная может быть переприсвоена, что противоречит намерению сделать значение константным. Найдите и исправьте ошибку в объявлении переменной, чтобы предотвратить её переприсваивание и обеспечить корректную работу as const.
// Пример использования as const с let, что приводит к возможности переприсваиванияlet colors = ['red', 'green', 'blue'] as const;colors = ['yellow', 'purple']; // Логическая ошибка: colors должен оставаться неизменнымconsole.log(colors[0]);// После исправления, код должен использовать const вместо let5. Разметь части объявления
Разметьте части объявления TypeScript const config = { api: '/v1' } as const. Укажите для каждого выделенного фрагмента, является ли он ключевым словом объявления, именем переменной, значением объекта или утверждением типа. Это упражнение поможет закрепить понимание структуры объявлений с использованием as const.
{{const~|~t1}} {{config~|~t2}} = {{ { api: '/v1' }~|~t3 }} {{as const~|~t4}};6. Выбери правильный тип
В данном коде объект объявлен с помощью `as const`. Выберите из выпадающего списка правильные типы для каждого свойства, которые TypeScript выведет для этого объекта. Обратите внимание, что `as const` делает все свойства доступными только для чтения и сужает типы до литеральных значений. Всего нужно заполнить 3 пропуска.
const obj = {
str: 'hello',
num: 42,
arr: [1, 2, 3] as const,
} as const;
// Типы:
// str: input1S
// num: input2S
// arr: input3S7. Как TypeScript выводит тип
Проанализируйте TypeScript-код сверху и восстановите последовательность шагов, которые TypeScript выполняет при выводе типа для массива с утверждением `as const`. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить логику вывода типа от начального анализа до финального результата.
const arr = [1, 2, 3] as const;8. Собери объект с as const
Из предложенных строк соберите корректное объявление объекта на TypeScript с использованием `as const`. Объект должен содержать два свойства: name (строковое) и age (числовое). Лишние строки (не входящие в объявление объекта) в решение не включайте. Порядок свойств внутри объекта не важен.
const obj ={ name: "John", age: 30,}as const;console.log(obj);