Just used TypeScript to enforce distinct prop combinations
Just used TypeScript to enforce distinct prop combinations. (also known as conditional props) 😍
In this example, I created a Card component that renders as a Link or a Button.
#TypeScript assures href can only be applied to the Link. 😎
The "never" type creates the magic. 🪄 It allows me to specify that a Button Card can't have an href.
So, if I apply both href and onClick, I get an error from TypeScript: Types of property 'href' are incompatible. Type 'string' is not assignable to type 'undefined'. 👍
This is a unique benefit of writing React components in TypeScript. Before I moved to TypeScript, I had to check prop combinations at runtime. Now developers are notified the moment they try to specify an invalid prop combination.
Compile-time checks for the win! 🔥