Mastering Discriminated Unions in React with TypeScript - The Most Underrated Feature Edited

TSX
1type Props = {
2  type: "link" | "button";
3  href?: string;
4  onClick?: () => void;
5};
6
7const SmartButton = ({ type, href, onClick }: Props) => {
8  if (type === "link") {
9    return <a href={href}>Link</a>;
10  }
11  return <button onClick={onClick}>Button</button>;
12};

❌ Problem: This allows invalid cases. What if someone passes type: "link" but doesn't provide an href?

✅ Solution: Discriminated Union to the Rescue!

TSX
1type LinkButton = {
2  type: "link";
3  href: string;
4};
5
6type RegularButton = {
7  type: "button";
8  onClick: () => void;
9};
10
11type SmartButtonProps = LinkButton | RegularButton;
12
13const SmartButton = (props: SmartButtonProps) => {
14  if (props.type === "link") {
15    return <a href={props.href}>Link</a>;
16  }
17  return <button onClick={props.onClick}>Button</button>;
18};

🔐 Now it’s type-safe:

• You must provide href if type is "link".
• You must provide onClick if type is "button"