Quiz
Discriminated Unions in React Props
Understanding how discriminated unions enable exhaustive type narrowing when typing React component props.
You type a Button's props as a discriminated union to enforce that only one of two shapes is valid: type ButtonProps = | { variant: 'link'; href: string } | { variant: 'action'; onClick: () => void }; Inside the component you write: function Button(props: ButtonProps) { if (props.variant === 'link') { return <a href={props.href}>Go</a>; } return <button onClick={props.onClick}>Click</button>; } Which statement about this code is TRUE?