Back to all snippets
Library/TypeScript/Async Function Type Helper
typescriptintermediatetypesasyncutilities

How to implement Async Function Type Helper in Typescript

Extract return type from async functions

Quick Answer

`AsyncReturnType<T>` unwraps the `Promise<X>` returned by an async function to give you the resolved type `X` directly.

Code Snippet

1type AsyncReturnType<T extends (...args: any) => Promise<any>> = 
2  T extends (...args: any) => Promise<infer R> ? R : any;
3
4// Usage
5async function fetchUser() {
6  return { id: 1, name: 'John' };
7}
8
9type User = AsyncReturnType<typeof fetchUser>; // { id: number; name: string; }

What is Async Function Type Helper?

The built-in ReturnType helper returns Promise<T> for async functions rather than the resolved T. AsyncReturnType unwraps the promise to give you the actual resolved type, which is what you usually want when typing variables, state, or props that will hold awaited values.

How It Works

  1. 1Use `infer R` inside a conditional type to capture the resolved value type of the Promise.
  2. 2Constrain T to `(...args: any) => Promise<any>` so the helper only accepts async functions.
  3. 3The result is equivalent to manually writing the return interface but stays in sync automatically.

Common Use Cases

  • Component props - Type props that receive the result of an async data-fetcher
  • State typing - Infer useState type from an async initializer
  • Testing - Type expected values in async test assertions
  • API layer - Infer response types from fetch wrapper functions

Key Benefits

  • Avoids manually duplicating return type interfaces
  • Stays in sync automatically when the function signature changes
  • Works with any async function including class methods
  • Pure type-level — zero runtime cost

Common Mistakes to Avoid

  • Using `ReturnType` instead — it returns `Promise<T>` not the resolved `T`.
  • Applying it to a sync function — the conditional falls through to `any`, silently widening the type.
  • Not storing it in a named type alias — inline usage gets verbose quickly.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more typescript examples

Frequently Asked Questions

Why not just use Awaited<ReturnType<T>> from TypeScript 4.5+?

`Awaited<ReturnType<T>>` is the modern built-in equivalent and is preferred in TypeScript 4.5+. `AsyncReturnType` is useful in older codebases or for educational clarity.

Related Snippets

typescript
intermediate
Type Guards
Custom type guards for runtime type checking
typesguardsutilities
typescript
advanced
Utility Types
Useful TypeScript utility type definitions
typesutilitiesgenerics
typescript
advanced
Branded Types
Create nominal types in TypeScript
typessafetypatterns

About This Typescript Code Snippet

This free typescript code snippet for async function type helper is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement async function type helper quickly and correctly.

All snippets in the Snippetly library follow typescript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses typescript.

Tags: types, async, utilities  | Language: typescript  | Difficulty: intermediate  | Category: TypeScript

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets