Advanced Props 12 exercises

Extracting Keys and Values from a Type

Let's take a break from props and delve into the realm of TypeScript types.

Here we have a BACKEND_TO_FRONTEND_STATUS_MAP, where the backend status is represented by numeric keys, and the frontend status represented by string values for "pending", "success", and "error".

const BA

Loading exercise


00:00 In this exercise, we're going to leave the world of props for a minute. We have a backend to frontend status map here, where on the keys, we have the backend status, which is like 0, 1, and 2. But on the frontend, we've decided to use a string enum or a string union

00:16 instead of this, where we've got pending success and error here. So what we want to do is we want to extract these out into types using the kind of key of type of technique that we've seen before. We want backend status to be 0 or 1 or 2, which is these keys,

00:33 and we want the frontend status to be pending or success or error. But we've got a few problems before we even get there. We know that we're going to need to turn this into a type, but backend to frontend status map currently just is string, string, string. It's not actually inferring pending success and error here.

00:51 So you're going to need to find a way to transform this into something that we can even grab pending success and error from. Then you're going to need to find a way to extract out from that type something like we're going to need to grab the values of that type because we know how to grab the keys, but how do you grab the values?

01:10 There's going to be a couple of interesting little things below which are going to help. I think as const will help. And you're also going to need to investigate something called indexed access types. So quite a lot in this very small exercise. Good luck.