React + TypeScript HTML要素のコンポーネントを作るときの型

例えばHTMLのbuttonを拡張したボタンコンポーネントを作成したい場合に、もともとのbuttonが受けとることができるPropsと独自のPropsを定義したい。

もともとのbuttonが受け取るPropsにはonChangeなど色々なものが考えられるが、ComponentPropsWithoutRef を使うことでシンプルにかける。

type ButtonProps = React.ComponentPropsWithoutRef<"button"> & { customProp: string } 

const Button = ({ children, onClick, type, customProp }: ButtonProps) => {
  return (
    <button onClick={onClick} type={type} custom={customProp}>
      {children}
    </button>
  )
}

TypeScript

Posted by たみぼうず