TypeScript utility types: Pick and Omit

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

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 to have 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 in which we can 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 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 kind of type 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 fully removed from the type, so we can't even pass it along!

And there you have it, the use cases for Pick and Omit in the following article. We'll go more in 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

TypeScript utility types: Pick and Omit

Comments (1)

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

The TypeScript Pick utility type

The TypeScript Omit utility type

Thank you for reading, and let's connect!

Command Palette

Comments (1)

More from this blog

The TypeScript Pick utility type

The TypeScript Omit utility type

Thank you for reading, and let's connect!