TypeScript utility types: Pick and Omit

In the previous article, we first looked at TypeScript utility types: Partial and Required.
We'll dive into Pick and Omit in this article.

These are both 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, it depends 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 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

Comments

[Alex Lohr]

Like with Partial, it helps me to have a look at the working of these types, you can find them at lib.es5.dt.s:

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
type Exclude<T, U> = T extends U ? never : T;
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

With Pick, a new object type is created where the keys are defined as a subset of the keys of the initial object.

Omit essentially does the same, but uses Exclude to invert the key selection.

[peerreynders]

I don't disagree, however people using utility types may not be familiar with some of the more advanced TypeScript features which may be difficult to locate in the official documentation if you don't know what you are looking for:

• constraints
• keyof operator
• mapped types
• conditional types
• never

Looking at how utility types are implemented is probably a great way to become familiar with the more advanced features.

[James Thomson]

TypeScript features which may be difficult to locate in the official documentation if you don't know what you are looking for

I've recently picked up TS again after a year hiatus and this is really the most difficult part; trying to solve a more complex typing, but not having any idea what to look for. It also doesn't help that I don't find the official TS docs very intuitive.

So, does anyone have any recommendations on good learning resources for TS? More so on advanced concepts.

[peerreynders]

Strangely enough I think I picked up the most useful information by trying to read Preact's index.d.ts and internal.d.ts which are strictly types and then back-filling with the official documentation to discover "what did I just read there?" - failing that searching for a quick article online.

That said comlink is still giving me headaches.

One key revelation that helped me a bit was that the advanced features are less about declaring types as one might be used to from mainstream languages with a nominal type system but are more about extracting types - and that JavaScript exists in Value Space while TypeScript types exist in Type Space (which unfortunately TS syntax often conflates).

[James Thomson]

Thanks. I also dig through other projects typings, Preact's is a good tip. It's much cleaner than some of the typings I've seen out there 😬

That Gitbook you've referenced to looks very useful, thanks for that!

[yossarian]

If you are interested in using typescript mapped types, you can check my blog catchts.com . All examples are taken from stackoverflow

[peerreynders]

At times searching for information online can be a chore if you don't know the right terminology - terms like Non-null assertion operator or Assertion Function don't exactly suggest themselves when you are reading code.

A Glossary of TypeScript attempts to sort out some of the type related terminology.

[James Thomson]

Very nice. That glossary is excellent 👌

[Chris Bongers]

Yep.

That's why I'm starting with the built-in utility types first.
Have some articles coming up about generics and the mapped types for instance.

Thanks for adding this extra information 🙌

[Chris Bongers]

Yep, actually have some "deeper" articles coming on generics and how to convert these into re-usable utility types 🤩

Get so excited about these things.