Асинхронность — важнейшая часть современного веба. В этом уроке мы научимся правильно типизировать async/await в TypeScript. Вы узнаете, почему любая асинхронная функция возвращает Promise<T>, и как правильно указывать типы возвращаемых значений.
Мы разберем:
- Синтаксис
async functionи типизацию результата. - Как TypeScript понимает тип переменной после
await. - Обработку ошибок в асинхронном коде.
Этот интерактивный урок содержит задачи на исправление типов, написание сигнатур и предсказание поведения кода. Идеально для подготовки к реальной разработке, где работа с API встречается постоянно.
- Модуль 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
В этом задании необходимо дополнить объявление асинхронной функции, указав корректный тип возвращаемого значения. Функция возвращает промис, который разрешается строкой. Заполните пропуски в коде на TypeScript так, чтобы тип возврата соответствовал логике функции и код компилировался без ошибок.
async function greet(): input1S<input2S> {
return "Hello, World!";
}
greet().then(console.log);2. Где Promise?
Внимательно изучите приведенный фрагмент кода на TypeScript. Ваша задача — найти и отметить все объявления функций, которые возвращают Promise. Обратите внимание, что функции могут возвращать Promise как явно (например, с возвращаемым типом Promise) или неявно (например, с ключевым словом async). Не отмечайте синхронные функции, вызовы функций или другие элементы кода, такие как переменные или литералы. Кликните по тем фрагментам кода, которые соответствуют объявлениям функций, возвращающих Promise.
// Пример кода с асинхронными функциями
async function {{getData~|~t1}}() { return await fetch('/data'); }
function {{syncFunc~|~t4}}() { return 42; }
const {{asyncArrow~|~t2}} = async () => { console.log('loading'); };
function {{returnsPromise~|~t3}}(): Promise { return Promise.resolve(); }
const {{notAsync~|~t5}} = () => 'hello';
{{getData~|~t6}}().then(console.log);
{{syncFunc~|~t7}}();
{{asyncArrow~|~t8}}();
{{returnsPromise~|~t9}}().then(() => {});
{{notAsync~|~t10}}(); 3. Развернутые типы
В асинхронных функциях TypeScript переменные до использования оператора await имеют тип Promise
const user: Promise<User> = fetchUser();const user: User = await fetchUser();const count: Promise<number> = getCount();const count: number = await getCount();const isActive: Promise<boolean> = checkStatus();const isActive: boolean = await checkStatus();4. Асинхронный запрос
Из предложенных строк соберите корректную TypeScript-функцию, которая асинхронно получает данные с удалённого сервера, парсит JSON и возвращает типизированный объект. Функция должна использовать async/await, проверять статус ответа и возвращать данные с определённым типом. Некоторые строки лишние и не должны входить в решение.
type Todo = { id: number; title: string };async function fetchData(): Promise<Todo> { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); if (!response.ok) throw new Error('Network response was not ok'); const data = await response.json(); return data;} console.log(data); const data = response.json(); return response;async function fetchData() {5. Порядок выполнения
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения асинхронной функции. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа выполняет код с использованием async/await, включая приостановку, выполнение промисов и возобновление.
async function fetchData(id: number): Promise<string> {
return new Promise(resolve => {
setTimeout(() => resolve(`Data ${id}`), 100);
});
}
async function process() {
console.log('Старт функции process');
const result1 = await fetchData(1);
console.log(result1);
const result2 = await fetchData(2);
console.log(result2);
console.log('Завершение функции process');
}
// Явный вызов функции с входными данными
process();6. Забытый await
В этом фрагменте TypeScript-кода допущена ошибка: при вызове асинхронной функции забыли использовать оператор `await`. Из-за этого переменная получает значение типа `Promise
async function fetchData(): Promise<string> { return "Hello, TypeScript!";} async function process() { const data = fetchData(); // Ошибка: забыт await console.log(data.length);} process();7. Тип результата
Рассмотрите фрагмент TypeScript-кода, в котором объявлена асинхронная функция, возвращающая Promise
async function getNum(): Promise<number> {
return 42;
}
async function main() {
const x = await getNum();
// Какой тип у переменной x?
}
main();