If you already have a subscription, you can sign in.
Enjoy free content straight from your inbox 💌
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.