TypeScript's Omit & Pick
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 and Pick utility types have been game-changers. Let me share a bit about my experiences with these two.
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 and a set of
properties , the Pick operation can be represented as .
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.
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 🤣!
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 and a set of properties , the Omit operation
can be represented as .
UserWithoutEmail type is the difference of the
with a set that only contains the email property.
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. In the beginning, I'd often jumble up
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.
Applying Pick or Omit multiple times with the same parameters will
yield the same result. For instance,
Pick<Pick<User, 'name'>, 'name'> is the
The order in which you pick properties
Pick<User, 'name' | 'id'> is the same as
Pick<User, 'id' | 'name'>.
This is because the intersection of two sets is commutative.
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
Omit<Pick<User, 'name'>, 'email'>.
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.
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! 🥰
Well, now what?
You can navigate to more writings from here. Connect with me on LinkedIn for a chat.