Pick under the hood

Example of Pick use

First challenge is Pick

It’s usually used when you need to declare the type which is based on another type. And you know in advance which keys are included.

Iteration over an object

First, you need to iterate over an object T. Usually Mapped Types are used in this case:

Example of Mapped Types

  • keyof T gets the keys from the object T
  • in is for iteration over the keys
  • Key is a key itself
  • T[Key] is a value for a specified Key

Specify Keys to iterate over

Second, to iterate over the part of an object, we need to specify Keys to iterate over:

Iteration over Keys

But with this you have 2 errors:

  1. Type 'Keys' is not assignable to type 'string | number | symbol'
  2. Type 'Key' cannot be used to index type 'T'

Both errors are connected with the rules of the iteration:

  1. Key can be string, number or symbol
  2. We cannot call T[Key] if Key doesn’t exist in T

If rule 2 is true, rule 1 will be true as existing keys are one of the specified types. To iterate over the existing keys, we need to apply Generic Constrains using extends keyword.

This way, if we specify non-existing key, TypeScript will throw an error We cannot call T[Key] if Key doesn't exist in T so we’re safe now ✅

Solution

Check out the solution in Playground ⭐️

typescripteasy

Let's chat and have fun 🧑‍💻👩‍💻

No more often than once a week I write 📄 about TypeScript 💪, video playback 📺 and frontend related topics. You can unsubscribe in any time ↘️