Skip to main content

Типізація асинхронних функцій

TypeScriptJunior~1 хв читання
Запропонувати правку

Базовий синтаксис

Звичайна функція:

javascript
function getUser(): Promise<{ id: number; name: string }> { return fetch("/api/user") .then(r => r.json()); // тип T = { id: number; name: string } }

async-функція (цукор):

javascript
async function getUser(): Promise<{ id: number; name: string }> { const r = await fetch("/api/user"); return r.json(); }

У async TypeScript сам виводить Promise<ReturnType> з return. Експортовані функції краще анотувати явно.

Часті варіанти

javascript
async function ping(): Promise<void> { await fetch("/ping"); // нічого не повертаємо } function loadIds(): Promise<number[]> { return fetch("/ids").then(r => r.json()); } async function isOk(): Promise<boolean> { const r = await fetch("/health"); return r.ok; }

Generic-функції

javascript
async function getJSON<T>(url: string, init?: RequestInit): Promise<T> { const r = await fetch(url, init); if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json() as Promise<T>; } // Використання const user = await getJSON<{ id: number; name: string }>("/api/user");

Помилки і catch

У промісів тип відмови не анотується (TypeScript не знає «тип помилки»). У catch використовуйте unknown і звуження:

javascript
try { await getUser(); } catch (e: unknown) { if (e instanceof Error) console.error(e.message); }

Корисні утиліти

  • Awaited<T> - «розпакувати» проміс:

    javascript
    type User = Awaited<ReturnType<typeof getUser>>; // { id: number; name: string }

  • PromiseSettledResult<T> для Promise.allSettled.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку