DEV Community

Cover image for Typescript Series - Pick Utility Type
Sarmun Bustillo
Sarmun Bustillo

Posted on

Typescript Series - Pick Utility Type

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

What is the Pick Utility Type?

Pick <Type, Keys> Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type. In other words, the new type is a subgroup of properties that are extracted from Type properties Docs.

This is how it works:

interface Todo {
  title: string;
  description: string;
  completed: boolean;

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
Enter fullscreen mode Exit fullscreen mode

So as you can see, we picked only the 2 keys we wanted from the Todo Type Preview.

But how does it work under the hood?

type Pick<Type, Key extends keyof Type> = {
    [k in Key]: Type[k];
Enter fullscreen mode Exit fullscreen mode

So let's break down the tricky parts.

Key extends keyof Type The keyword extends in this case means Key should exist in its parent, wherein keyof Type is the parent. If we were to take the Todo interface from above as an example, the keys would be "title" | "description" | "completed"

[k in Key] The keyword in means that K has to be one of the keys extracted from Key ("title" | "description" | "completed")

Type[k] Finally, here we are simply accessing the type of a property. Same as how we access values in an object, let's look at the following example.

interface Person {
   name: string;
   age: number;

// Access the type of name
Person['name'] // string

// Like saying Type[K] where Type is Person and name is K
Enter fullscreen mode Exit fullscreen mode

Well, there you have it, now you know how the Pick utility type works!


The Pick utility type it's very handy since it allows us to dynamically construct new types from existing ones,

Thank you!

you can find me here My Twitter

Top comments (0)