Promise.all типизация

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

Тренажер по TypeScript

Метод Promise.all позволяет запускать несколько асинхронных операций параллельно и ждать их завершения. В TypeScript типизация этого метода особенно интересна: он возвращает промис, который разрешается в кортеж (tuple) результатов, сохраняя порядок переданных промисов, даже если они завершились в разное время.

Если вы передаете массив [Promise<string>, Promise<number>], то результатом будет тип [string, number]. Это позволяет безопасно использовать деструктуризацию. В этом блоке задач вы научитесь правильно описывать типы для массивов промисов и обрабатывать агрегированный результат. Это важный навык для разработки производительных приложений, где нужно делать несколько запросов к API одновременно.

Список тем

1. Тип результата Promise.all

id: 40770_ts_promise_all_01_return_type

В данном задании требуется разметить сегменты TypeScript кода, содержащего вызов Promise.all. Определите для каждого выделенного фрагмента, является ли он типом переменной, промисом (объектом Promise), значением (результатом) промиса или оператором (ключевым словом). Это упражнение поможет разобраться в типизации асинхронного кода и понять, как TypeScript определяет тип результата Promise.all.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
const {{results~|~t1}}: {{Promise~|~t2}}<[{{string~|~t3}}, {{number~|~t4}}]> = {{await~|~t5}} {{Promise~|~t6}}.{{all~|~t7}}([
  {{fetchData()~|~t8}},
  {{fetchUser()~|~t9}}
]);
Значение промиса
Метод
Ключевое слово Promise
Тип (аннотация)
Имя переменной
Оператор (ключевое слово)
Сообщения
Проверить
Показать подсказку

2. Заполнение кортежа

id: 40770_ts_promise_all_02_tuple_fill

В этом задании вам нужно правильно указать типы элементов кортежа, который возвращает функция Promise.all. Имеется два промиса: один разрешается строкой, другой — числом. Дополните код, указав типы для элементов кортежа в дженерике Promise.all, чтобы TypeScript мог корректно вывести тип переменной result.

Заполните пропуски
const promise1 = Promise.resolve('Hello');
const promise2 = Promise.resolve(42);

const result: Promise<[input1S, input2S]> = Promise.all([promise1, promise2]);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Параллельный запуск

id: 40770_ts_promise_all_03_logic_order

Перед вами строки TypeScript-кода, которые демонстрируют использование Promise.all для параллельного выполнения нескольких промисов. Строки перемешаны. Восстановите правильную последовательность, чтобы получилась корректная асинхронная функция, создающая массив промисов, вызывающая Promise.all, ожидающая результаты с помощью await и возвращающая их сумму. Обратите внимание на типизацию массива промисов и результата.

Расставьте строки в правильном порядке
  const sum = results.reduce((a, b) => a + b, 0);
    Promise.resolve(20),
  const results = await Promise.all(promises);
}
async function processParallel(): Promise<number> {
  const promises: Promise<number>[] = [
  return sum;
    Promise.resolve(10),
  ];
Сообщения
Проверить
Показать подсказку

4. Деструктуризация результата

id: 40770_ts_promise_all_04_destructure

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

Нужно правильно расставить в пропуски предложенные варианты
async function processData() {
  const fetchText: Promise<string> = Promise.resolve('Hello, TypeScript!');
  const fetchCount: Promise<number> = Promise.resolve(42);

  const [text, count]: [input1S, input2S] = await Promise.all([fetchText, fetchCount]);
  
  console.log(`Text: ${text}, Count: ${count}`);
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Массив или Кортеж?

id: 40770_ts_promise_all_05_predict_array

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

Выберите правильный вариант ответа
const promises: Promise<number>[] = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3)
];

const result = Promise.all(promises);
// Какой тип будет у переменной result?
Сообщения
Проверить
Показать подсказку

6. Ошибка порядка типов

id: 40770_ts_promise_all_06_fix_mixed

В этом фрагменте TypeScript-кода допущена ошибка типизации при использовании Promise.all. Функция возвращает кортеж с результатами промисов, но порядок типов в аннотации не соответствует фактическому порядку разрешения промисов. Исправьте строку с объявлением переменной, чтобы типы соответствовали возвращаемым значениям промисов.

Найдите ошибку и исправьте
async function fetchData() {
  const promise1: Promise<string> = Promise.resolve('success');
  const promise2: Promise<number> = Promise.resolve(42);
  const [result1, result2]: [number, string] = await Promise.all([promise1, promise2]);
  console.log(result1, result2);
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

7. Логика работы Promise.all

id: 40770_ts_promise_all_07_analyze_flow

Проанализируйте TypeScript-код сверху и расставьте шаги снизу в правильном порядке, чтобы получилась логика выполнения программы. В коде используется Promise.all, один из промисов завершается ошибкой. Восстановите хронологию событий: от запуска Promise.all до обработки ошибки в блоке catch.

// Создаем три промиса с разным временем выполнения и результатом
const promise1 = Promise.resolve(42);
const promise2 = new Promise<string>((resolve) => {
  setTimeout(() => resolve('done'), 100);
});
const promise3 = Promise.reject(new Error('Something went wrong'));

// Запускаем Promise.all с этими промисами
Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log('Results:', results);
  })
  .catch((error) => {
    console.error('Error caught:', error.message);
  });
Расположите элементы в логичном порядке
Запускается Promise.all с массивом созданных промисов
promise3 немедленно отклоняется с ошибкой 'Something went wrong'
Обработчик then не выполняется, так как Promise.all отклонен
Promise.all начинает ожидать завершения всех переданных промисов
Выполняется обработчик catch, выводящий сообщение об ошибке в консоль
Promise.all немедленно отклоняется с ошибкой от promise3, не дожидаясь завершения promise2
Создаются три промиса: promise1 (немедленный успех), promise2 (успех с задержкой), promise3 (немедленная ошибка)
Сообщения
Проверить
Показать подсказку

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

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