Awaited<T>

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

If you already have a subscription, you can sign in.

Professional TypeScript Masterclass Lessons

1.Introduction
free
⏱️ 1:54
2.Setup
free
⏱️ 5:44
3.Primitive Types
free
⏱️ 1:42
4.Instance Types
free
⏱️ 1:52
5.Arrays And Tuples
free
⏱️ 1:38
6.Objects
free
⏱️ 1:33
7.const declarations
free
⏱️ 1:03
8.Function Types
free
⏱️ 1:57
9.Structural Typing
free
⏱️ 2:10
10.Classes in TypeScript
free
⏱️ 1:48
11.Target Compiler Option
free
⏱️ 2:37
12.Generics
⏱️ 3:02
13.Special Types any And unknown
⏱️ 2:00
14.JavaScript to TypeScript
⏱️ 1:32
15.Frontend Projects
⏱️ 3:49
16.Type Assertions
⏱️ 2:15
17.Type Casting
⏱️ 1:16
18.Modules
⏱️ 1:55
19.Type Declarations
⏱️ 4:25
20.Creating NPM packages
⏱️ 3:20
21.Async Await
⏱️ 3:05
22.Running in NodeJS
⏱️ 1:40
23.Lexical this
⏱️ 2:34
24.readonly Modifier
⏱️ 1:59
25.Union Types
⏱️ 2:57
26.Literal Types
⏱️ 2:58
27.Type Narrowing
⏱️ 4:19
28.Discriminated Unions
⏱️ 3:29
29.Class Parameter Properties
⏱️ 1:02
30.Strict Compiler Option
⏱️ 6:18
31.null vs undefined
⏱️ 4:19
32.Intersection Types
⏱️ 2:03
33.Optional Modifier
⏱️ 2:47
34.Non Null Assertion Operator
⏱️ 3:40
35.Interfaces
⏱️ 2:28
36.Interface Declaration Merging
⏱️ 1:01
37.Types vs Interfaces
⏱️ 2:16
38.never Type
⏱️ 3:00
39.implements Keyword
⏱️ 1:25
40.Definite Assignment Assertion
⏱️ 2:31
41.User Defined Type Guards
⏱️ 2:02
42.Assertion Functions
⏱️ 3:42
43.Function Overloading
⏱️ 4:15
44.Call Signatures
⏱️ 2:53
45.Abstract Classes
⏱️ 1:53
46.Index Signatures
⏱️ 3:08
47.Readonly Arrays and Tuples
⏱️ 2:58
48.Double Assertions
⏱️ 2:20
49.const Assertions
⏱️ 3:55
50.this Parameter
⏱️ 2:33
51.Generic Constraints
⏱️ 2:43
52.typeof Type Operator
⏱️ 2:12
53.Lookup Types
⏱️ 3:12
54.keyof Type Operator
⏱️ 3:55
55.Conditional Types
⏱️ 4:39
56.Contitional Types with Unions and never
⏱️ 3:32
57.infer Keyword and `ReturnType<T>`
⏱️ 3:47
58.Mapped Types
⏱️ 2:48
59.Mapped Type Modifiers
⏱️ 3:37
60.Template Literal Type
⏱️ 4:28
61.Partial<T>
⏱️ 1:27
62.Required<T>
⏱️ 1:36
63.Readonly<T>
⏱️ 1:34
64.Record<K, T>
⏱️ 4:05
65.Project References
⏱️ 4:18
66.undefined vs. optional
⏱️ 2:48
67.satisfies Operator
⏱️ 2:42
68.PropertyKey Type
⏱️ 0:57
69.ThisType<T>
⏱️ 4:11
70.Awaited<T>
⏱️ 4:12
71.String Manipulation Types
⏱️ 3:36
72.Mapped Types as Clauses
⏱️ 4:01
73.Union vs Intersection Mental Model
⏱️ 3:36
74.Enums are Bad
⏱️ 8:11

Awaited<T>

Subscription Required

You must have an active subscription to access this content.
If you already have a subscription, you can sign in.

JavaScript Recap

A promise resolves with the await keyword e.g.:

const single: Promise<string> = new Promise(res => res('l4d135'));

const singleResult = await single;
console.log(singleResult); // l4d135

JavaScript promise chains also resolve to their final result e.g.:

const triple: Promise<Promise<Promise<string>>> =
new Promise<Promise<Promise<string>>>(res =>
res(
new Promise<Promise<string>>(res =>
res(
new Promise<string>(res => {
res('Vin Diesel')
})
)
)
)
);

const tripleResult = await triple;
console.log(tripleResult); // Vin Diesel

TypeScript Awaited<T> Builtin

The Awaited<T> type follows the JavaScript logic and resolves all promise in the chain to get the final result e.g.:

type WrappedInDeep = Promise<Promise<Promise<Promise<Promise<string>>>>>;

type AwaitedResult = Awaited<WrappedInDeep>; // string
javascript
typescript
react
playwright

Enjoy free content straight from your inbox 💌

No spam, unsubscribe at any time.

Transcript

00:00

Now, even though you will only very rarely want to use the awaited type within TypeScript, having a look at how it works will give you a better appreciation for how the await keyword works within JavaScript. So let's take a look to demonstrate an interesting behavior of the await keyword. Within JavaScript, we have a simple async main function, and within that we create two promises. The first one is a simple promise around a string, which will resolve to the string ladies as a tribute to Beyonce. And then we have a promise of a promise of a promise of a string, which we will eventually resolve to Vin Diesel.

00:34

Now, the thing that is going to be obvious to most people is that when we await a promise, we get the resolved value as a result. So in this particular case, it'll be the string ladies. However, if we await a promise of a promise of a promise, do we get promise? Promise or do we get the final value? And the answer is that we get the final value. All of the intermediate promises get unwrapped. When we use innovate keyword, it'll evade anything that is venable within the chain and return the final result. And this Taos script behavior is something that TypeScript understands as well.

01:06

When we hover over single, we see a promise of a string, whereas single result is just a string. And the same is true for triple. We have promise, promise, promise of a string. But the type that TypeScript infers for the awaited result is exactly what JavaScript will return, which is just a string. Now this will actually be true for any level of promise. Wrapping the await keyword within JavaScript will wait for all of the promises to resolve before returning the final result value. And the awaited type tilty that exists within TypeScript is designed to map this behavior.

01:38

So if we have a promise, promise, promise, promise doesn't matter, lots of promises wrapping a string, and we pass this type to the awaited type tilty function, we get back just the unwrapped value, which is in this case string. And that's all the behavior that you really need to know. But let's take a look at how it is actually implemented within the TypeScript type system. Now, if you go to the definition of the way utility, you can see that there is a lot over here. So I will reorganize it a bit, only moving the comments, not touching any of the code. Just in my opinion, this reads a bit better. So yeah, this utility is designed to emulate the behavior

02:13

of the await keyboard in JavaScript as we have seen, and it does a recursive ible unwrap to give you the final awaited type. First off, using a conditional type, we check if it is nalo undefined, and if it is, we get back nalo undefined. Next step, we will do a recursive check of whether it is a tenable. And just in case it turns out to be notable, it means that there is no more need for unwrapping and we return just that final type T. So the only thing that we now have to look at is this recursive unwrapping of when it is indeed addable. So we really need to check if it is addable,

02:45

and if it is, we make a recursive call to awaited V, which will eventually resolve to T when it is no longer with renewable chain. But before we do that, there's one more check that we do, and that is in case the function that gets passed Then is not actually a function and just a value, which means that it is an error, in which case we resolve it to never. Now, let me rephrase this entire process again for further clarity. In case it is not undefined or no longer readable, it means that we have completely unwrapped and we will eventually return T. Otherwise, if it is amenable, we intend

03:17

to continue the chain with a weighted V. And if in case our intentions are violated because it then did not take a function, we resolve it to never. Now, even though I've explained it twice, you don't actually need to look at the implementation of a weighted in order to use it effectively. But this should settle some of your curiosity just a bit. Now we've looked at how the AWAI keyword works within JavaScript and how the awaited type utility tries to mimic that functionality within the TypeScript type system. The final step is to look at how you can use this awaited type utility within your own code. And using this utility is pretty simple.

03:50

Whenever you have an access to a type T and you are using an await keyword on it, TypeScript will actually infer the result to be awaited of type T anyways. But if you want to, you can add this explicit annotation yourself as well. And just in case this awaited type utility ends up in any of your function signatures or your object properties, now you have a better understanding of why this exists.

Professional TypeScript Masterclass

Professional TypeScript Masterclass

1.Introduction
free
⏱️ 1:54
2.Setup
free
⏱️ 5:44
3.Primitive Types
free
⏱️ 1:42
4.Instance Types
free
⏱️ 1:52
5.Arrays And Tuples
free
⏱️ 1:38
6.Objects
free
⏱️ 1:33
7.const declarations
free
⏱️ 1:03
8.Function Types
free
⏱️ 1:57
9.Structural Typing
free
⏱️ 2:10
10.Classes in TypeScript
free
⏱️ 1:48
11.Target Compiler Option
free
⏱️ 2:37
12.Generics
⏱️ 3:02
13.Special Types any And unknown
⏱️ 2:00
14.JavaScript to TypeScript
⏱️ 1:32
15.Frontend Projects
⏱️ 3:49
16.Type Assertions
⏱️ 2:15
17.Type Casting
⏱️ 1:16
18.Modules
⏱️ 1:55
19.Type Declarations
⏱️ 4:25
20.Creating NPM packages
⏱️ 3:20
21.Async Await
⏱️ 3:05
22.Running in NodeJS
⏱️ 1:40
23.Lexical this
⏱️ 2:34
24.readonly Modifier
⏱️ 1:59
25.Union Types
⏱️ 2:57
26.Literal Types
⏱️ 2:58
27.Type Narrowing
⏱️ 4:19
28.Discriminated Unions
⏱️ 3:29
29.Class Parameter Properties
⏱️ 1:02
30.Strict Compiler Option
⏱️ 6:18
31.null vs undefined
⏱️ 4:19
32.Intersection Types
⏱️ 2:03
33.Optional Modifier
⏱️ 2:47
34.Non Null Assertion Operator
⏱️ 3:40
35.Interfaces
⏱️ 2:28
36.Interface Declaration Merging
⏱️ 1:01
37.Types vs Interfaces
⏱️ 2:16
38.never Type
⏱️ 3:00
39.implements Keyword
⏱️ 1:25
40.Definite Assignment Assertion
⏱️ 2:31
41.User Defined Type Guards
⏱️ 2:02
42.Assertion Functions
⏱️ 3:42
43.Function Overloading
⏱️ 4:15
44.Call Signatures
⏱️ 2:53
45.Abstract Classes
⏱️ 1:53
46.Index Signatures
⏱️ 3:08
47.Readonly Arrays and Tuples
⏱️ 2:58
48.Double Assertions
⏱️ 2:20
49.const Assertions
⏱️ 3:55
50.this Parameter
⏱️ 2:33
51.Generic Constraints
⏱️ 2:43
52.typeof Type Operator
⏱️ 2:12
53.Lookup Types
⏱️ 3:12
54.keyof Type Operator
⏱️ 3:55
55.Conditional Types
⏱️ 4:39
56.Contitional Types with Unions and never
⏱️ 3:32
57.infer Keyword and `ReturnType<T>`
⏱️ 3:47
58.Mapped Types
⏱️ 2:48
59.Mapped Type Modifiers
⏱️ 3:37
60.Template Literal Type
⏱️ 4:28
61.Partial<T>
⏱️ 1:27
62.Required<T>
⏱️ 1:36
63.Readonly<T>
⏱️ 1:34
64.Record<K, T>
⏱️ 4:05
65.Project References
⏱️ 4:18
66.undefined vs. optional
⏱️ 2:48
67.satisfies Operator
⏱️ 2:42
68.PropertyKey Type
⏱️ 0:57
69.ThisType<T>
⏱️ 4:11
70.Awaited<T>
⏱️ 4:12
71.String Manipulation Types
⏱️ 3:36
72.Mapped Types as Clauses
⏱️ 4:01
73.Union vs Intersection Mental Model
⏱️ 3:36
74.Enums are Bad
⏱️ 8:11