Reactでpropsの型を取得する

Reactの勉強を始めたので覚えたことを残していく

ComponentProps

コンポーネントの型注釈を取得できる

const Hoge = (props: {p1: string, p2: string}) => {
  return <div></div>
}

type HogeProps = ComponentProps<typeof Hoge>

const Fuga = (props: HogeProps) => {
  return <div></div>
}

こうすることでFugaコンポーネントのpropsは {p1: string, p2: string} になる

たまたまpropsが同じなどではなく同じ意味の型注釈であれば ComponentProps で冗長な箇所を減らすことができる

ほか

既存のコンポーネントの型から少し変更する

• Pick+Partialと交差型で特定の引数だけPartialにする

type HogeProps = <ComponentProps
type PartialP2 = Partial<Pick
type Props = HogeProps & PartialP2

Propsの型は {p2: string, p2?: string} になる

用途

propsの数が多くなってくるとこういう手法を使えばスッキリさせることができる

また、コンポーネントライブラリの型をカスタマイズして使いたい場合、コピペで定義を書くよりいくらかメンテしやすいと思う