【React】要素を指定してPropsの型を取得する方法【TypeScript】

ComponentProps

ComponentPropsを使用すると指定したコンポーネントが受け取るpropsの型を取得できます。

refを除外した場合にはReact.ComponentPropsWithoutRefを使用します。

type Props = React.ComponentPropsWithoutRef<'button'>

const MyComponent = (props: Props) => {
  return <button {...props} />
}

refを明示的に含めたい場合にはReact.ComponentPropsWithRefを使用します。

type Props = React.ComponentPropsWithRef<'button'>

const MyComponent = (props: Props) => {
  return <button {...props} />
}