判別可能なユニオン型を用いたコンポーネントのProps制御

import { VFC } from 'react'

type LinkProps = {
  type: 'link'
  href: string
}

type ButtonProps = {
  type: 'button'
  onClick: () => void
}

type Props = LinkProps | ButtonProps

const LinkOrButton: VFC<Props> = (props) => {
  if (props.type === 'link') {
    return <a href={props.href}>リンク</a>
  } else {
    return <button onClick={props.onClick}>ボタン</button>
  }
}

export default LinkOrButton

<LinkOrButton type="link" href="http://example.com/" />
<LinkOrButton type="button" onClick={() => {alert('hello')}} />