Tech Blog - Akihiro Suzuki

【React + TypeScript】HTMLElementのPropsを継承したい

August 20, 2022

例えば <button> などの HTMLElement をラップしたカスタムコンポーネントを作る時、デフォルトのプロパティを継承してプロパティを定義したい。ということはよくあります。

そんな時、使えるのが React.ComponentPropsWithoutRef です。

interface FancyButtonProps extends React.ComponentPropsWithoutRef<"button"> {
  colorful?: boolean
}

const FancyButton = ({ colorful, ...props }: Props) => {
  if (colorful) {
    // colorfulプロパティを見て何かしらの処理
  }
  return <button {...props} />
}

プロパティをひとつひとつ Props に追加しなくていいのでラクですね! 👏


profile

鈴木 章弘 (Suzuki Akihiro)
バックエンドエンジニア(TypeScript & マイクロサービス)
profile