Key Remapping (as)

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

Тренажер по TypeScript

Mapped Types (сопоставленные типы) позволяют создавать новые объектные типы на основе старых. Но что, если мы хотим не только изменить типы значений, но и переименовать ключи? Здесь на помощь приходит переназначение ключей (Key Remapping) с помощью ключевого слова as.

Синтаксис: [K in keyof T as NewKeyType]: T[K].

Чаще всего это используется вместе с шаблонными литералами (Template Literal Types) для автоматической генерации геттеров, сеттеров или переименования полей (например, добавление префикса get...). Это продвинутая техника, которая делает типизацию невероятно гибкой и мощной.

Список тем

1. Ключевое слово as

id: 40749_remap_01_replace

В TypeScript для переименования ключей в mapped types используется ключевое слово `as`. В этом задании вам нужно дополнить код, который создает новый тип путём переименования ключей исходного типа. В выражении внутри квадратных скобок пропущены ключевые элементы синтаксиса. Вставьте пропущенные элементы, чтобы mapped type корректно определялся и переименовывал ключи, добавляя к ним префикс 'new_'. Обратите внимание на порядок пропусков: сначала оператор для перебора ключей, затем ключевое слово для их переименования.

Заполните пропуски
type Original = { a: number; b: string; };

type Renamed = {
  [K input1S keyof Original input2S `new_${K}`]: Original[K]
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Логика переименования

id: 40749_remap_02_analyze

Проанализируйте TypeScript-код сверху и восстановите последовательность шагов, которые выполняет компилятор TypeScript при создании типа Getters с использованием key remapping (as). Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить логику преобразования ключей исходного типа в ключи нового типа.

type Person = {
  name: string;
  age: number;
  location: string;
};

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type PersonGetters = Getters<Person>;

// Результирующий тип PersonGetters будет:
// {
//   getName: () => string;
//   getAge: () => number;
//   getLocation: () => string;
// }
Расположите элементы в логичном порядке
Присваиваем новому ключу тип функции, возвращающей значение типа T[K]
Применяем встроенный тип Capitalize к строковому представлению ключа
Добавляем префикс 'get' к результату, формируя новое имя ключа
Перебираем каждый ключ K из типа Person (in keyof T) в mapped type
Приводим ключ K к строковому типу через пересечение string & K
Начинаем с исходного типа Person с ключами: name, age, location
Сообщения
Проверить
Показать подсказку

3. Синтаксическая ошибка

id: 40749_remap_04_error

В этом фрагменте TypeScript-кода используется mapped type с переназначением ключей (key remapping), но допущена синтаксическая ошибка. В конструкции `[K in keyof T as ...]` пропущена часть синтаксиса или неверно использован Template Literal. Найдите и исправьте строку с ошибкой, чтобы тип корректно преобразовывал ключи объекта.

Найдите ошибку и исправьте
type User = {
  id: number;
  name: string;
};
 
type UserWithPrefix = {
  [K in keyof User as `prefix_${K}`]: User[K];
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Результат маппинга

id: 40749_remap_05_predict

Проанализируйте приведённый код TypeScript, использующий маппинг типов (Mapped Types) с ключевым словом `as` для преобразования ключей. Определите, какой ключ будет получен в итоговом типе для исходного поля `name`. Выберите один правильный вариант из предложенных.

Выберите правильный вариант ответа
type Original = { name: string; age: number };

type Getters = {
  [K in keyof Original as `get${Capitalize<string & K>}`]: () => Original[K];
};

// Какой ключ будет у поля 'name' в типе Getters?
Сообщения
Проверить
Показать подсказку

5. Исключение ключей

id: 40749_remap_06_build

Соберите из предложенных строк корректный TypeScript-код, который определяет тип ProductWithoutId, исключая ключ 'id' из исходного типа Product с помощью ключевого слова 'as'. Используйте mapped types и конструкцию 'as Exclude'. Одна строка является лишней и в решение входить не должна.

Перетяните в правильном порядке строки из одного блока в другой
type Product = {
  id: string;
  name: string;
  price: number;
};
type ProductWithoutId = {
  [K in keyof Product as Exclude<K, 'id'>]: Product[K];
};
  id: string; // Лишняя строка, не должна быть в новом типе
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

6. Части выражения

id: 40749_remap_07_click

Внимательно изучите приведённый ниже код TypeScript, содержащий определение Mapped Type с использованием ключевого слова `as` для трансформации ключей. Ваша задача — отметить (кликнуть) три элемента: переменную итерации (K), выражение трансформации ключа (часть после `as`) и тип значения в результирующем объекте. Не отмечайте другие части кода, такие как имена типов, фигурные скобки, операторы или комментарии.

Кликните по всем фрагментам, которые подходят под условие задания.
type {{Getters~|~t0}}<T> = {
  [{{K~|~t1}} in keyof T as {{`get${Capitalize<string & K>}`~|~t2}}]: {{() => T[K]~|~t3}};
};

// Пример использования
type User = { name: string; age: number };
type UserGetters = Getters<User>;
// Результат: { getName: () => string; getAge: () => number }
Сообщения
Проверить
Показать подсказку

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

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