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.
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 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!
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 and a set of properties , the Omit operation
can be represented as .
The UserWithoutEmail
type is the difference of the User
type
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 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
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
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
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
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! 🥰
Well, now what?
You can navigate to more writings from here. Connect with me on LinkedIn for a chat.
2023
December
October
August
June
May
March
January