TypeScriptで「AがtrueだったらBを必須にする」を実現する

例えば以下のような感じのとき、isModalがtrueのときhandleModalCloseが必須にならないと型として弱い。

type Props = {
  data: Data
  isModal?: boolean
  handleModalClose?: () => void
}

export const Component = ({ data, isModal, handleModalClose }: Props) => {
  return (
    <>
      {isModal ? (
        <Modal onClose={handleModalClose}><Form data={data} /></Modal>
      ) : (
        <Form data={data} />
      )}
    </>
  )
}

なので、こうする。

type BaseProps = {
  data: Data
}

type ModalProps = {
  isModal: true
  handleModalClose: () => void
}

type NonModalProps = {
  isModal?: false
}

type Props = BaseProps & (ModalProps | NonModalProps)

export const Component = ({ data, ...props }: Props) => {
  return (
    <>
      {props.isModal ? (
        <Modal onClose={props.handleModalClose}><Form data={data} /></Modal>
      ) : (
        <Form data={data} />
      )}
    </>
  )
}

補完も効くしエラーもでたよ✌🏻