Subscribe

TypeScript utility types: Pick and Omit

โœ๏ธ

Pick and Omit can be used as TypeScript utility types to modify existing types or interfaces

20 Feb, 2022 ยท 3 min read

In the previous article, we first looked at TypeScript utility types: Partial and Required. This article will dive into TypeScript Pick and Omit utility types.

These are used to create a new type with only a set of options from the original type.

However, they both work slightly differently. Let's take a look at the high-level difference.

  • Pick only take the items you define you want
  • Omit will pick every item you don't define to omit

So the result of both is very similar, depending on your needs which one you might like.

The TypeScript Pick utility type

I'll be sticking to the same example we used before: a user interface.

interface User {
  id?: number;
  firstname: string;
  lastname?: string;
  age: number;
  telephone?: number;
  twitter?: string;
}

Now let's say we want a separate type that can pass around only the full name, so it doesn't need any other fields?

We can define a new type to define the fields we would like to use.

type UserFullname = Pick<User, 'firstname' | 'lastname'>;

const userName: UserFullname = {
  firstname: 'Chris',
  lastname: 'Bongers',
};

Our username variable is now used to ensure that only those two fields are set. You might have spotted the delimiter |. It's used as a separator, and it will select both fields.

You'll often need this manipulation when using different return types, where you might want to exclude specific fields. But you can also think about child components that only take specific fields from a bigger object.

The TypeScript Omit utility type

Like the Pick type, the Omit can be used to modify an existing interface or type. However, this one works the other way around.

It will remove the fields you defined. We want to remove the id field from our user object when we want to create a user.

type UserPost = Omit<User, 'id'>;

const updateUser: UserPost = {
  firstname: 'Chris',
  lastname: 'Bongers',
  age: 32,
};

Even though our id was already a conditional field, it's now entirely removed from the type, so we can't even pass it along!

TypeScript Omit utility type

And there you have it, the use cases for Pick and Omit in the following article. We'll go more into detail on how powerful they are when combined.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

The Record Utility Type in TypeScript

12 Mar, 2022 ยท 3 min read

The Record Utility Type in TypeScript

TypeScript Union type a deeper look

11 Mar, 2022 ยท 3 min read

TypeScript Union type a deeper look

Join 1828 devs and subscribe to my newsletter