Understanding Awaited Type in TypeScript

Modern JavaScript applications heavily use asynchronous programming.

Whenever we work with async functions, Promises, API calls, and data fetching, we often need to know the actual resolved value type.

TypeScript provides a built-in utility type called:

Awaited<T>;

which helps us extract the final resolved type from promises.

The Problem

Consider:

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

The inferred type is:

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

If we want only the returned object type:

{
  id: number;
  name: string;
}

we can use:

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

How Awaited Works

type A = Awaited<Promise<string>>;

Result:

string;

Nested Promises

Awaited recursively unwraps promises:

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

Result:

string;

Using Awaited With API Functions

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

This keeps types synchronized with the function implementation.

Awaited With React Server Components

This is especially useful in Next.js App Router:

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

Awaited vs ReturnType

ReturnType returns the Promise:

type Result = ReturnType<typeof getUser>;

Result:

Promise<User>;

Awaited extracts the resolved value:

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

Result:

User;

Conclusion

Awaited<T> is a small but powerful TypeScript utility type.

It is especially useful with async functions, APIs, Next.js Server Components, and React data fetching.

Instead of maintaining duplicate types manually, TypeScript can derive the final data shape automatically.