# TypeScript's omit and pick

> How to Pick your TypeScript battles and when to Omit the drama!

August 10, 2023 · 4 min read · https://yasint.dev/ts-omit-and-pick/
Tags: typescript, frontend

---

Hey there! If you're like me, diving deep into TypeScript has been a roller coaster of discovery. Among the many gems I've stumbled upon, the [Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys) and [Pick](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys) utility types have been game-changers. Let me share a bit about my experiences with these two.

## The `Pick` interface

What's the deal, huh? So, `Pick` is like your personal shopping assistant for types. You tell it which properties you want from an existing type, and voilà, you get a _brand-new_ type with just those properties. Given a type $T$ and a set of properties $P$, the Pick operation can be represented as $T \cap P$.

```ts
type User = {
  id: number;
  name: string;
  email: string;
};

type UserName = Pick<User, 'name'>;
```

In set theory terms, the `UserName` type is the intersection of the `User` type with a set that only contains the name property.

Diving into Pick, there's some seriously good stuff to rave about. First off, its flexibility is unmatched—it's like crafting the perfect sandwich, picking only the ingredients I'm craving. And talk about clarity! It's a breeze to see which properties I'm juggling, making my code a lot more readable. But, it's not all rosy.

<p className="indent-8">I'll admit, there are times I get a bit too enthusiastic and end up complicating things more than necessary. And, oh boy, the maintenance! As in every codebase's foundational types shift and change, you've got to be vigilant, ensuring that the types you've "picked" are still vibing well. It's like keeping tabs on a growing chain of dependencies, but hey, that's the coder's life for you!</p>

## The `Omit` interface

Think of `Omit` as the sibling of `Pick`. Instead of telling it what you want, you tell it what you don't want. It's like ordering a pizza and saying, **"Hold the olives 🤨."** Given a type $T$ and a set of properties $P$, the Omit operation can be represented as $T - P$.

```ts
// User type from above
type UserWithoutEmail = Omit<User, 'email'>;
```

The `UserWithoutEmail` type is the difference of the `User` type with a set that only contains the email property.

<p className="indent-8">When I first started using `Omit`, I was blown away by its precision—it's _super handy_ when I want to leave out just a thing or two, especially from those chunky types. Plus, it's a lifesaver in ensuring I don't accidentally toss in stuff I'd rather keep out. But, it wasn't all sunshine and rainbows.</p>

In the beginning, I'd often jumble up `Omit` and `Pick` since they're kinda like two sides of the same coin. And, just like with Pick, I've realized I've got to be on constant alert, especially when my main types undergo changes. It's been a learning curve, but totally worth it!

Before we conclude, let's delve deeper into the intricacies of these utility types and their impact on our coding journey.

## Properties and implications

### Idempotence $\odot$

Applying Pick or Omit multiple times with the same parameters will yield the same result. For instance, `Pick<Pick<User, 'name'>, 'name'>` is the same as `Pick<User, 'name'>`.

### Commutativity $\oplus$

The order in which you pick properties doesn't matter. `Pick<User, 'name' | 'id'>` is the same as `Pick<User, 'id' | 'name'>`. This is because the intersection of two sets is _commutative_.

### Associativity $\otimes$

You can chain Pick or Omit operations, and the order of operations won't affect the result. For example, `Pick<Omit<User, 'email'>, 'name'>` is the same as `Omit<Pick<User, 'name'>, 'email'>`.

### Identity $\circ$

If you pick all properties of a type or omit none, you get the original type back. Similarly, if you omit all properties or pick none, you get an empty type.

## Conclusion

Omit and Pick have been real MVPs in my TypeScript toolkit. They've given me so much control over my types, but I've also learned to use them wisely. If you're diving into TypeScript, give them a shot and see how they fit into your coding style. Happy coding! 🚀

Thanks for reading! 🥰