В современной веб-разработке работа с асинхронными операциями — это стандарт. В TypeScript типизация Promise играет ключевую роль, позволяя нам точно знать, какие данные вернутся после завершения операции. Основной синтаксис использует обобщения (generics): Promise, где T — это тип данных, которые промис вернет в случае успеха (resolve).
Если вы создаете асинхронную функцию с async, TypeScript часто может автоматически вывести тип возвращаемого значения, оборачивая его в Promise. Однако явное указание типа, например async function getData(): Promise, делает код более читаемым и защищенным от ошибок. В этом уроке мы разберем, как правильно указывать типы для промисов, как типизировать возвращаемые значения асинхронных функций и работать с результатами выполнения.
Используйте этот тренажер, чтобы закрепить навыки написания безопасного асинхронного кода.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Типизация Promise.
- Async/await с типами.
- Promise.all типизация.
- Модуль 28: Практические паттерны
1. Базовый синтаксис Promise
В этом задании вы работаете с типизацией Promise в TypeScript. Дан код создания нового промиса, который разрешается с числом. Необходимо указать правильный тип в дженерике Promise, чтобы код был типобезопасным и корректно компилировался. Заполните пропуск в дженерике, указав тип значения, с которым промис будет разрешен.
const myPromise = new Promise<input1S>((resolve) => {
resolve(42);
});2. Возвращаемый тип async функции
В этом задании вам предстоит определить правильный тип возвращаемого значения асинхронной функции. В коде определена асинхронная функция, которая возвращает строку. Используя выпадающий список, выберите правильный тип для аннотации возвращаемого значения функции. Обратите внимание, что асинхронные функции в TypeScript имеют особое поведение при возврате значений, и это отражается в их типе.
async function fetchMessage(): input1S {
return 'Hello, TypeScript!';
}
// Вызов функции
const message = await fetchMessage();
console.log(message);3. Несоответствие типов
В данном фрагменте TypeScript кода объявлен Promise с дженериком, указывающим на числовой тип, однако в функции resolve передается строковое значение, что приводит к несоответствию типов. Найдите и исправьте ошибку в строке с вызовом resolve, чтобы Promise разрешался с правильным типом, и код мог выполниться без ошибок, выводя отформатированное число в консоль.
const promise = new Promise<number>((resolve) => { resolve("hello");}); promise.then((value) => { console.log(value.toFixed(2));});4. Где указан тип данных?
В данном фрагменте кода TypeScript создаётся и используется Promise. Ваша задача — выделить часть кода, которая указывает тип данных, возвращаемых этим Promise (generic-параметр). Обратите внимание, что generic-параметр указывается в угловых скобках после ключевого слова Promise. Выберите для выделенного сегмента тип 'Generic-параметр' из предложенных вариантов.
const fetchData = (): Promise<{{string~|~t1}}> => {
return new Promise((resolve) => {
setTimeout(() => resolve('Данные загружены'), 1000);
});
};
fetchData().then((result) => console.log(result));5. Результат вызова без await
Проанализируйте фрагмент кода на TypeScript, в котором вызывается асинхронная функция без использования оператора await. Определите, какое значение будет храниться в переменной после выполнения этого кода. Обратите внимание на типы и поведение Promise в TypeScript.
async function fetchData(): Promise<string> {
return 'Данные загружены';
}
const result = fetchData();
// Что находится в переменной result?6. Сборка асинхронной функции
Из предложенных строк соберите корректную асинхронную функцию на TypeScript, которая возвращает Promise
async function check(): Promise<boolean> { return true;}console.log('Hello');let x = 5;return false;async function another() {}7. Порядок выполнения промиса
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа создаёт и обрабатывает Promise, включая асинхронную операцию и вывод результата.
function asyncDouble(x: number): Promise<number> {
return new Promise((resolve) => {
console.log('Начало асинхронной операции');
setTimeout(() => {
resolve(x * 2);
}, 1000);
});
}
asyncDouble(5).then((result) => {
console.log(`Результат: ${result}`);
});8. Цепочка промисов
Рассмотрите фрагмент кода на TypeScript, в котором создаётся Promise с начальным числовым значением, а затем выполняется цепочка асинхронных операций с использованием .then(). Каждое звено цепочки изменяет значение (умножает или складывает). Определите, какое число будет выведено в консоль после выполнения всей цепочки промисов. Введите только одно число без дополнительных символов, пробелов или текста.
const initialPromise: Promise<number> = Promise.resolve(5);
initialPromise
.then((value: number) => value * 2)
.then((value: number) => value + 10)
.then((value: number) => value - 3)
.then((result: number) => {
console.log(result);
});