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の数が多くなってくるとこういう手法を使えばスッキリさせることができる
また、コンポーネントライブラリの型をカスタマイズして使いたい場合、コピペで定義を書くよりいくらかメンテしやすいと思う