Type Transformations Workshop (4 exercises)

Use Two Utility Types To Extract a Promise's Result

The solution here is to use the Awaited type helper to get the return value from inside the Promise:

Another interesting thing about ReturnValue is that we are nesting calls to type helpers.

In our ReturnValue example we are nesting twice, but you can do it as much as you want. It’s similar to calling functions that call other functions, though the syntax can become difficult to read.

A More Readable Alternative

To make nesting more readable, we can lift ReturnType<typeof getUser> into its own type.

From there, we can take GetUserPromise and pass that to Awaited:

This is much easier to read and helps illustrate the two steps:

First extract the return type, then await the return type.


[0:00] Here we start looking at the Awaited type helper. We're also noticing two things here. First of all, Awaited helps you unwrap a promise. It's like calling await here. Without Awaited, if I remove this, then ReturnValue is just the promise again, but if I had it back, then we get the thing that's inside the promise, very, very useful.
[0:21] You'll also see that you can Nest these calls here. We end up with actually double nesting. You can do this as many times as you want. This is just calling a function, which calls another function, calls another function. Nesting these calls in here is perfectly acceptable, although, the syntax can be pretty hard to read.

[0:38] If we wanted to change it, we could say, type, let's say, GetUserPromise = ReturnType this, and then do GetUserPromise inside there. Actually nesting the cause is not too bad either. This shows you the two steps you need to go through. First extract the ReturnType and then await the ReturnType.