Typescript make props required conditionally

Learn how to make props required conditionally in Typescript.

Consider a scenario where you have prop that is optional, if that prop value is present then you want certain other props to be required.

We can achieve this by creating two different definitions of the props.

type ModalProps = BaseModalProps & (
  | {
      showCreateNewButton: true;
      onCreateNew: () => void;
      createNewButtonLabel: string;
    } // onCreateNew & createNewButtonLabel is required when showCreateNewButton is true
  | {
      showCreateNewButton?: false;
      onCreateNew?: () => void;
      createNewButtonLabel?: string;
    } // // onCreateNew & createNewButtonLabel is optional when showCreateNewButton is false
);

This helps to create a more strict type definition that enforces the props declaration when the criteria is met on certain props.