Generic Type Aliases

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

Тренажер по TypeScript

Обобщения (Generics) могут использоваться не только в функциях и классах, но и в Type Aliases (псевдонимах типов). Это позволяет создавать универсальные описания структур данных, которые можно переиспользовать с разными типами содержимого.

Синтаксис выглядит так: type Wrapper = { value: T };. Здесь T выступает в роли параметра, который будет заменен на конкретный тип (например, string или number) в момент использования этого алиаса.

Это особенно полезно при описании ответов от сервера, структур данных вроде списков или деревьев, где «обертка» одинакова, а данные внутри могут меняться.

Список тем

1. Объявление Generic Type

id: 40714_gen_alias_01_replace

В этом задании вам предстоит поработать с обобщёнными типами (generics) в TypeScript. Вам дан код, который описывает тип для ответа от сервера. Ваша задача — дополнить объявление типа, сделав его обобщённым (generic). Для этого необходимо добавить параметр типа в определение псевдонима типа (type alias) и использовать этот параметр для указания типа поля data. Обратите внимание, что в коде уже используется этот тип с конкретным типом User. Заполните пропуски в коде так, чтобы тип ApiResponse стал обобщённым и мог использоваться для различных типов данных.

Заполните пропуски
// Объявите обобщённый тип ApiResponse
input1S ApiResponse input2S = {
  success: boolean;
  data: input3S;
};

interface User {
  id: number;
  name: string;
}

// Использование типа с конкретным типом User
const response: ApiResponse<User> = {
  success: true,
  data: { id: 1, name: "Alice" }
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40714_gen_alias_02_select

В этом задании вам предстоит использовать generic-алиас Container для создания типизированной переменной. В коде ниже объявлен алиас Container, который представляет объект с полем value типа T. Вам нужно выбрать из выпадающих списков подходящий тип для переменной myContainer и соответствующее значение, чтобы код был корректным с точки зрения TypeScript. Обратите внимание на соответствие типа параметра generic и значения.

Нужно правильно расставить в пропуски предложенные варианты
type Container<T> = { value: T };
let myContainer: input1S = { value: input2S };
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Параметры типа

id: 40714_gen_alias_03_click

Внимательно изучите определение сложного generic-псевдонима типа (type alias) на TypeScript. Ваша задача — найти и выделить кликом все места в этом определении, где используется переменная типа T. Отметьте как объявление параметра типа T в угловых скобках, так и все его использования внутри тела псевдонима типа. Не отмечайте другие параметры типа (например, U или K), ключевые слова языка или имена свойств.

Кликните по всем фрагментам, которые подходят под условие задания.
type ApiResponse<{{T~|~t1}}> = {
  data: {{T~|~t2}};
  status: number;
  pagination?: PaginationMeta;
};

type PaginatedResponse<{{T~|~t3}}, {{U~|~decoy1}}> = {
  items: {{T~|~t4}}[];
  meta: {{U~|~decoy2}};
  getKey: <{{K~|~decoy3}} extends keyof {{T~|~t5}}>(key: {{K~|~decoy4}}) => {{T~|~t6}}[{{K~|~decoy5}}];
};
Сообщения
Проверить
Показать подсказку

4. Универсальный список

id: 40714_gen_alias_04_build

Из предложенных строк соберите корректное определение generic type alias List на TypeScript. Этот тип должен принимать один параметр типа Item и содержать два поля: массив items типа Item[] и метод count, возвращающий число. Игнорируйте лишние строки, которые не соответствуют этому определению или нарушают синтаксис. Правильное решение должно состоять из 4 строк: объявление типа, два поля и закрывающая фигурная скобка.

Перетяните в правильном порядке строки из одного блока в другой
type List<Item> = {
  items: Item[];
  count: () => number;
};
  items: Item;
  count: number;
type List = {
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Пропущенный аргумент

id: 40714_gen_alias_05_error

В этом фрагменте кода TypeScript используется generic type alias Box, который требует указания типа-аргумента. Однако при объявлении переменной допущена ошибка: тип Box используется без угловых скобок и параметра типа. Найдите и исправьте строку с ошибкой, чтобы код стал корректным и компилировался без ошибок.

Найдите ошибку и исправьте
type Box<T> = {
  value: T;
};
 
const myBox: Box = { value: 42 };
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

id: 40714_gen_alias_06_give_result

Рассмотрите приведённый фрагмент кода на TypeScript. В нём определён обобщённый тип-псевдоним Pair, который представляет собой объект с двумя свойствами: first типа A и second типа B. Затем создана переменная myPair с конкретными типами-аргументами для A и B. Определите, какой тип имеет свойство second у переменной myPair. Введите название типа в поле ответа (одно слово).

Что должно получиться?
type Pair<A, B> = { first: A, second: B };
const myPair: Pair<string, number> = { first: "hello", second: 42 };
Сообщения
Проверить
Показать подсказку

7. Сопоставление реализаций

id: 40714_gen_alias_07_compare

В левой колонке приведены определения общих псевдонимов типов (generic type aliases) на TypeScript. В правой колонке — примеры объявления переменных с использованием этих типов. Сопоставьте каждое определение с соответствующим примером использования. Обратите внимание, что в правой колонке примеры перемешаны.

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
type Box<T> = { value: T };
type Container<K, V> = { key: K; value: V };
type Wrapper<T> = T | null;
type Pair<T, U> = [T, U];
type Callback<T> = (arg: T) => void;
type Result<T, E> = { success: true; data: T } | { success: false; error: E };
type Maybe<T> = T | undefined;
type MapOf<T> = { [key: string]: T };
const result: Result<string, Error> = { success: true, data: "ok" };
const wrapped: Wrapper<number> = 42;
const container: Container<number, string> = { key: 1, value: "one" };
const maybe: Maybe<number> = undefined;
const box: Box<string> = { value: "hello" };
const callback: Callback<string> = (s) => console.log(s);
const map: MapOf<boolean> = { enabled: true, visible: false };
const pair: Pair<string, number> = ["age", 25];
Сообщения
Проверить
Показать подсказку

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

id: 40714_compiler

Добро пожаловать в мир Generic Type Aliases! В этом примере мы создаем универсальные шаблоны для контейнеров и ответов сервера. Попробуйте изменить тип данных в `Box`, добавьте свои интерфейсы или измените структуру `ApiResponse`, чтобы увидеть, как TypeScript мгновенно подсветит ошибки. Попробуйте передать в `Box<number>` строку и посмотрите на реакцию компилятора — это поможет вам лучше понять мощь статической типизации. Не бойтесь экспериментировать: создание собственных сложных типов на базе этих шаблонов — лучший способ освоить дженерики!

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