Record

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

Тренажер по TypeScript

В этом уроке мы разберем один из самых полезных Utility Types в TypeScript — Record<K, T>. Он позволяет создавать типизированные объекты, где ключи относятся к определенному набору строк или чисел, а значения имеют строго заданный тип. Это отличная альтернатива написанию сложных индексных сигнатур вручную.

Синтаксис прост: первый аргумент K — это объединение ключей (например, 'cat' | 'dog'), а второй T — тип значения. Это делает код чище и безопаснее при разработке приложений. Вы научитесь быстро описывать словари, мапы и конфигурационные объекты.

  • Сокращение шаблонного кода.
  • Гарантия наличия всех ключей из Union-типа.
  • Интерактивные примеры использования.

Пройдите задания и тесты, чтобы закрепить понимание работы с объектными типами.

Список тем

1. Структура Record

id: 40726_rec_01_intro

Разметьте структуру типа Record в TypeScript. В строке кода `type Roles = Record<"admin" | "user" | "guest", boolean>;` выделите три элемента: Utility Type Record, Union-ключи и Тип значений. Для каждого сегмента укажите его категорию из доступных вариантов.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
type Roles = {{Record~|~t1}}<{{"admin" | "user" | "guest"~|~t2}}, {{boolean~|~t3}}>;
Union-ключи
Utility Type
Тип значения
Сообщения
Проверить
Показать подсказку

2. Выбор аргументов

id: 40726_rec_02_fill

Вам дан интерфейс PageInfo, описывающий информацию о странице. Используя Utility Type Record, создайте тип для словаря страниц, где ключами будут строковые идентификаторы, а значениями — объекты типа PageInfo. В коде с пропусками выберите из выпадающего списка подходящие типы для параметров дженерика Record, чтобы получить корректную типизацию словаря.

Нужно правильно расставить в пропуски предложенные варианты
interface PageInfo {
  title: string;
  url: string;
}

type Pages = Record<input1S, input2S>;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Синтаксис Record

id: 40726_rec_03_replace

В этом задании вам нужно объявить тип для словаря (объекта) с помощью utility type Record. Заполните пропуски в коде так, чтобы тип MyDictionary корректно описывал объект, где ключи — строки, а значения — числа. Обратите внимание на синтаксис Record: он принимает два аргумента-типа в дженерике.

Заполните пропуски
type MyDictionary = 
  input1S<
    string input2S number
  >;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Эквивалентные типы

id: 40726_rec_04_compare

В левой колонке приведены определения типов с использованием утилиты Record, а в правой колонке — их эквивалентные развернутые интерфейсы или типы. Сопоставьте каждое определение слева с соответствующим эквивалентным типом справа. Обратите внимание, что в правой колонке типы перемешаны, и каждый тип используется только один раз.

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
Record<string, any>
Record<'name' | 'age', string>
Record<number, boolean>
Record<'id', number>
{ name: string; age: string }
{ id: number }
{ [key: number]: boolean }
{ [key: string]: any }
Сообщения
Проверить
Показать подсказку

5. Лишнее свойство

id: 40726_rec_05_error

В данном фрагменте TypeScript-кода объект типизирован с помощью утилитарного типа Record, но в его реализации присутствует лишнее свойство, которое не соответствует объявленному типу. Найдите строку с ошибкой и исправьте её, чтобы код стал корректным. Обратите внимание, что можно либо удалить лишнее свойство из объекта, либо изменить тип, чтобы включить это свойство.

Найдите ошибку и исправьте
// Пример Record с лишним свойством
const obj: Record<'a' | 'b', number> = { a: 1, b: 2, c: 3 };
 
console.log(obj.a);
console.log(obj.b);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

6. Сборка конфигурации

id: 40726_rec_06_build

Из предложенных строк соберите корректный TypeScript-код, который определяет тип Config с помощью Record для хранения настроек в виде пар 'ключ-значение', где ключ — строка, а значение — число, а затем объявляет переменную config этого типа с двумя настройками. Одна из строк лишняя и в решение входить не должна.

Перетяните в правильном порядке строки из одного блока в другой
type Config = Record<string, number>;
const config: Config = {
    timeout: 3000,
    retries: 5
};
type Config = Record<string, string>;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40726_compiler
TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру