آشنایی با Awaited Type در TypeScript

برنامه‌های مدرن JavaScript به شکل گسترده از برنامه‌نویسی غیرهمزمان استفاده می‌کنند.

زمانی که با async function، Promise، درخواست‌های API و دریافت داده کار می‌کنیم، معمولا نیاز داریم نوع واقعی مقدار نهایی را بدانیم.

TypeScript یک utility type داخلی به نام زیر دارد:

Awaited<T>;

که برای استخراج نوع نهایی Promise استفاده می‌شود.

مشکل چیست؟

فرض کنید:

async function getUser() {
  return {
    id: 1,
    name: 'Hamid',
  };
}

نوع استنتاج‌شده:

Promise<{
  id: number;
  name: string;
}>;

اگر فقط نوع object نهایی را بخواهیم:

{
  id: number;
  name: string;
}

می‌توانیم استفاده کنیم:

type User = Awaited<ReturnType<typeof getUser>>;

نحوه کار Awaited

type A = Awaited<Promise<string>>;

نتیجه:

string;

Promise های تو در تو

Awaited به صورت بازگشتی Promise ها را باز می‌کند:

type Result = Awaited<Promise<Promise<string>>>;

نتیجه:

string;

استفاده از Awaited در API ها

async function fetchProducts() {
  const response = await fetch('/api/products');
 
  return response.json();
}
 
type Products = Awaited<ReturnType<typeof fetchProducts>>;

این کار باعث می‌شود type همیشه با پیاده‌سازی تابع هماهنگ باشد.

Awaited در React Server Components

این موضوع در Next.js App Router بسیار کاربردی است:

async function getArticles() {
  return fetch('/api/articles').then((res) => res.json());
}
 
type Articles = Awaited<ReturnType<typeof getArticles>>;

Awaited در مقابل ReturnType

ReturnType نوع Promise را برمی‌گرداند:

type Result = ReturnType<typeof getUser>;

نتیجه:

Promise<User>;

Awaited مقدار نهایی را استخراج می‌کند:

type Result = Awaited<ReturnType<typeof getUser>>;

نتیجه:

User;

نتیجه‌گیری

Awaited<T> یک utility type کوچک اما قدرتمند در TypeScript است.

این نوع زمانی بسیار مفید است که با async function، API، Next.js Server Components و دریافت داده در React کار می‌کنیم.

به جای نگهداری دستی type های تکراری، TypeScript می‌تواند ساختار نهایی داده را به صورت خودکار استخراج کند.