Awaited

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

Тренажер по TypeScript

Utility Type Awaited извлекает тип значения, на которое разрешается (resolves) переданный тип T. Тип T может быть Promise, Promise> (вложенные промисы) или даже не промисом — в последнем случае Awaited просто вернёт T.

Этот тип крайне полезен для аннотирования возвращаемых значений асинхронных функций, особенно когда есть цепочки вызовов или необходимость "распаковать" вложенные промисы. Синтаксис: type Result = Awaited>; // string.

Освоить Awaited на практике — значит писать более чистые типы в современной асинхронной разработке на TypeScript. Наш онлайн-тренажер предлагает задания для тренировки этой темы.

Список тем

1. Что вернёт Awaited?

id: 40734_awaited_01_basic

В этом задании вам нужно определить, какой тип возвращает утилитарный тип TypeScript Awaited для различных входных типов. В коде представлены четыре объявления типов с использованием Awaited. Для каждого пропуска выберите из выпадающего списка правильный результирующий тип. Обратите внимание, как Awaited обрабатывает Promise и вложенные Promise.

Нужно правильно расставить в пропуски предложенные варианты
type T1 = Awaited<Promise<number>>; // input1S
type T2 = Awaited<number>; // input2S
type T3 = Awaited<Promise<Promise<string>>>; // input3S
type T4 = Awaited<Promise<Promise<Promise<boolean>>>>; // input4S
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Разметь цепочку типов

id: 40734_awaited_02_highlight

Внимательно изучите данный фрагмент кода TypeScript и разметьте выделенные сегменты, выбрав для каждого его роль из предложенных категорий. Вам нужно определить, что является исходным типом, что является Utility Type (в данном случае Awaited), что является результирующим типом после применения Awaited, а также выделить ключевое слово. Это упражнение поможет лучше понять, как работает Utility Type Awaited для "распаковки" типов промисов.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
type OriginalType = {{Promise~|~t1}}<{{number~|~t2}}>;
type UnwrappedType = {{Awaited~|~t3}}<{{Promise~|~t4}}<{{number~|~t5}}>>;
Результирующий тип
Ключевое слово
Исходный тип
Utility Type
Сообщения
Проверить
Показать подсказку

3. Простая распаковка

id: 40734_awaited_03_give

Рассмотрите приведённый код на TypeScript, в котором используется утилитный тип Awaited для раскрытия вложенного промиса. Определите, какой тип будет присвоен псевдониму Test. Введите название типа в поле ответа. Обратите внимание, что Awaited рекурсивно раскрывает Promise до его внутреннего типа.

Что должно получиться?
type Test = Awaited<Promise<Promise<number>>>;
Сообщения
Проверить
Показать подсказку

4. Порядок \"распаковки\"

id: 40734_awaited_04_sequencing

Перед вами перемешанные шаги, описывающие процесс рекурсивного извлечения типа из Promise> с помощью утилитного типа Awaited в TypeScript. Восстановите логический порядок шагов, чтобы правильно отразить, как Awaited последовательно раскрывает вложенные Promise, пока не будет получен конечный тип.

Расставьте строки в правильном порядке
Awaited рекурсивно разворачивает внешний Promise и получает Promise<string>.
Начальный тип: Promise<Promise<string>>.
Применяем утилитный тип Awaited<T> к Promise<Promise<string>>.
Затем Awaited рекурсивно разворачивает внутренний Promise и получает string.
Процесс завершается, так как string не является Promise.
Итоговый тип — string.
Сообщения
Проверить
Показать подсказку

5. Тип после цепочки вызовов

id: 40734_awaited_05_predict

Проанализируйте приведённый код на TypeScript. В нём определены две асинхронные функции: fetchUser, возвращающая объект с полями name и age, и getUserAge, которая использует fetchUser и возвращает Promise, обёрнутый в Promise. Затем с помощью Utility Type Awaited и ReturnType определяется тип AgeType. Выберите, какой из предложенных типов будет у AgeType.

Выберите правильный вариант ответа
async function fetchUser(): Promise<{ name: string; age: number }> {
    return { name: "Alice", age: 30 };
  }

  async function getUserAge(): Promise<Promise<number>> {
    const user = await fetchUser();
    return Promise.resolve(user.age);
  }

  type AgeType = Awaited<ReturnType<typeof getUserAge>>;
Сообщения
Проверить
Показать подсказку

6. Исправь аннотацию

id: 40734_awaited_06_error

В данном фрагменте TypeScript кода есть ошибка в аннотации типа переменной, которая получает результат асинхронной функции. Переменная аннотирована как Promise, но после await она должна иметь тип значения внутри Promise. Исправьте ошибку, используя utility type Awaited, чтобы код стал корректным и тип переменной соответствовал фактическому значению.

Найдите ошибку и исправьте
async function fetchData(): Promise<string> {
  return "Hello";
}
 
async function main() {
  const data: Promise<string> = await fetchData();
  console.log(data);
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

7. Распредели по группам

id: 40734_awaited_07_sort

Перед вами список выражений с использованием utility типа `Awaited` в TypeScript. Распределите их по категориям в зависимости от типа, который получится в результате вычисления `Awaited`. Обратите внимание, что `Awaited` рекурсивно разворачивает Promise, а для непромисов возвращает переданный тип. Каждый элемент должен оказаться в одной из трёх категорий: «Результат — string», «Результат — number» или «Результат — boolean».

Перетяните элементы в соответствующие блоки
Результат — string
Результат — number
Результат — boolean
Awaited<Promise<string>>
Awaited<string>
Awaited<Promise<Promise<string>>>
Awaited<Promise<number>>
Awaited<number>
Awaited<Promise<Promise<number>>>
Awaited<Promise<boolean>>
Awaited<boolean>
Awaited<Promise<Promise<boolean>>>
Сообщения
Проверить
Показать подсказку

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

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