Learn Promises and Async Functions | Advanced Typing and Asynchronous Patterns

When working with asynchronous code in JavaScript, you often encounter promises and async functions. TypeScript enhances this experience by allowing you to specify exactly what type a promise will resolve to, making your code safer and more predictable. By annotating the resolved value of a promise, you help the TypeScript compiler catch type mismatches early and document your intent for anyone reading your code.

To type a promise, you use the generic Promise<Type> syntax, where Type is the type of value the promise will resolve to. When you declare an async function in TypeScript, its return type is always a promise, so you describe the type of the resolved value, not the promise itself. This means if your async function resolves to a User object, you should annotate it as returning Promise<User>. This approach also helps TypeScript understand how to type-check code that uses await or .then() on the returned promise, ensuring type safety throughout your asynchronous code.


              123456789
            
// JavaScript: Async function returning a promise
async function getNumber() {
  return 42;
}

// TypeScript: Typed async function
async function getNumberTyped(): Promise<number> {
  return 42;
}


              1234567891011121314
            
// TypeScript: Fetching user data from an API with typed return value

type User = {
  id: number;
  name: string;
  email: string;
};

async function fetchUser(userId: number): Promise<User> {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  // TypeScript checks that 'data' matches the 'User' type
  return data as User;
}

Note

When dealing with asynchronous code, you may also need to type callbacks and event handlers. Always specify the parameter types and return type for these functions, especially when they interact with promises or handle asynchronous results. This practice helps prevent subtle bugs and improves code clarity.

1. How do you specify the resolved value type of a Promise in TypeScript?

2. What is the benefit of typing async function return values?

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 7.14

Swipe to show menu