Open In App

Typescript Awaited<Type> Utility Type

Last Updated : 19 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to learn about the Awaited<Type> in TypeScript. It is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript, one of the features of the typescript is Awaited<Type> it is a utility type in TypeScript that is used to extract the type that is being returned by a promise. It is useful when we want to work with the resolved value of a promise, rather than the promise itself. It helps us to avoid using .then() and await the same promise repeatedly.

Syntax:

type Awaited<Type>

Where –

  • Type represents the type of promise.

 

Example 1: In this example, we are going to use the awaited utility type to extract the resolved type of the Promise returned by the getUser function. We have defined the getUser function with the async keyword, which means it will always return a Promise. 

Javascript




async function getUser(): Promise<{ 
    id: number; 
    name: string 
}> {
    return { id: 1, name: 'John Doe' };
}
  
type User = Awaited<ReturnType<typeof getUser>>;
  
async function printUser(): Promise<void> {
    const user: User = await getUser();
    console.log(user);
}
  
printUser();


Output:

{
      "id": 1,
      "name": "John Doe"
}

Example 2: In the above example, we will use Awaited<Type> with Promise.all() to extract the resolved values of an array of promises. We will define an async function getUsers() that returns a promise with an array of user objects. We define a type User using Awaited<Type> to extract the resolved value of the promise and access the first element of the array, now then define another async function getUserNames() that extracts the names of the users using Promise.all() and await, as we can see in the working code below.

Javascript




async function getUsers(): Promise<Array<{ name: string }>> {
    const response = await fetch(
        "https://...com/users");
    return response.json();
}
  
type User = Awaited<ReturnType<typeof getUsers>>[0];
  
async function getUserNames() {
    const users = await getUsers();
    const names: Array<string> = await Promise.all(
        users.map(async (user: User) => {
            const name = user.name;
            return name;
        })
    );
    console.log(names);
}
  
getUserNames();


Output:

[
    “Leanne Graham”, “Ervin Howell”, “Clementine Bauch”, “Patricia Lebsack”,
    “Chelsey Dietrich”, “Mrs. Dennis Schulist”, “Kurtis Weissnat”, 
    “Nicholas Runolfsdottir V”, “Glenna Reichert”, “Clementina DuBuque”
]



Similar Reads

Typescript Required&lt;Type&gt; Utility Type
In this article, we are going to learn about the Required&lt;Type&gt; in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. One of the features of Typescript is Required&lt;Type&gt; which is a built-in utility type that allows you to create a new type that makes all properties of the origina
4 min read
Typescript Record&lt;Keys, Type&gt; Utility Type
In this article, we are going to learn about the Record&lt;Keys, Type&gt; in Typescript. TypeScript is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript, one of the features is Record&lt;Keys, Type&gt; which is a built-in utility type
4 min read
Typescript Partial&lt;Type&gt; Utility Type
In this article, we are going to learn about the Partial&lt;Type&gt; that is available in the Typescript. One of the features in Typescript is Partial&lt;Type&gt; which is a built-in utility type. It helps to create a new type by making all properties of an existing type optional. Now we can pass properties of an object of a new type that is create
4 min read
TypeScript Omit&lt;Type, Keys&gt; Utility Type
In this article, we are going to learn about the Omit&lt;Type, Keys&gt; utility type in Typescript. TypeScript is a powerful language that provides many utility types to make development easier and more efficient. One of the Typescript features is Omit utility type. We can use it when, let's say there exists a type already but we want to create a n
4 min read
TypeScript Pick&lt;Type, Keys&gt; Utility Type
In this article, we are going to learn about the Pick&lt;Type, Keys&gt; utility type in TypeScript. TypeScript is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript, Pick&lt;Type, Keys&gt; is one of the features of Typescript which is a
5 min read
TypeScript Extract&lt;Type, Union&gt; Utility Type
In this article, we are going to learn about Extract&lt;Type, Union&gt; utility type in TypeScript, TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tools at any scale. Extract&lt;Type, Union&gt; utility type is used to extract a subset of types from a union type that matches a certain criterion, This
4 min read
TypeScript ReturnType &lt;Type&gt; Utility Type
In this article, we will learn about ReturnType&lt;Type&gt; Utility Type in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, the ReturnType&lt;Type&gt; utility type is used to extract the return type of a given function type or constructor type. It allows you to infer the ty
3 min read
TypeScript ConstructorParameters&lt;Type&gt; Utility Type
The TypeScript ConstructorParameters&lt;Type&gt; utility type extracts parameter types from a constructor function Type. It helps define functions that create instances of classes with correct constructor arguments, and It allows you to access and use the types of constructor function parameters. enhancing type safety. Syntax type ConstructorParame
2 min read
TypeScript Readonly &lt;Type&gt; Utility Type
In this article, we are going to learn about Readonly&lt;Type&gt; Utility Type in Typescript. Typescript is a popular programming language used for building scalable and robust applications. One of the features of Typescript is Readonly&lt;Type&gt; Utility Type which is used to create a new type where all properties are readonly, meaning they canno
2 min read
TypeScript ThisParameterType&lt;Type&gt; Utility Type
In this article, we are going to learn about ThisParameterType&lt;Type&gt; Utility Type in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, the ThisParameterType&lt;Type&gt; utility type is used to extract the type of this parameter in a function type. It allows you to captu
3 min read