Skip to content

Instantly share code, notes, and snippets.

@hipstersmoothie
Created August 14, 2019 17:11
Show Gist options
  • Save hipstersmoothie/c35909a5b9a1ba038fe412846966fe22 to your computer and use it in GitHub Desktop.
Save hipstersmoothie/c35909a5b9a1ba038fe412846966fe22 to your computer and use it in GitHub Desktop.
type Never<T> = { [P in keyof T]?: never };
interface ControlledProps {
open: boolean;
toggle: () => void;
}
interface UnControlledProps {
defaultOpen: boolean;
}
type ExpandableProps =
| (ControlledProps & Never<UnControlledProps>)
| (UnControlledProps & Never<ControlledProps>);
const Expandable: React.FC<ExpandableProps> = props => {
// Expandable can now take either open + toggle OR defaultOpe
};
const Usage = () => {
const [open, setOpen] = React.useState(false);
return (
<>
<Expandable defaultOpen={false} />
<Expandable open={open} toggle={() => setOpen(!open)} />
{/* The one below this line will error */}
<Expandable defaultOpen={false} open={true} />
</>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment