React コンポーネントのpropsの型を取得する方法

はじめに

Reactのコンポーネントのpropsの型を取得する方法について備忘録として書いておきます．
使い所としては，別ファイルにコンポーネントだけがexportされており，そのコンポーネントの型がエクスポートされていないときに，型を取得したい場合等です．

方法

まず，方法としてはReact.ComponentProps<T>を使用します．

例

あるファイルで以下のようにButtonコンポーネントが定義されています．

type ButtonProps = {
  label: string;
  onClick: () => void;
};

export const Button = ({ label, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};

そこで以下のコードのように，
Buttonコンポーネントの型は，React.ComponentProps<T>を使用して，
React.ComponentProps<typeof Button> で取得できます．
これにより，Buttonをラップしたコンポーネントは，Buttonコンポーネントの型を受け付けることができるようになります．

// 型を取得する
type WrappedButtonProps = React.ComponentProps<typeof Button>;

const WrappedButton = (props: WrappedButtonProps) => {
  return <Button {...props} />;
};

メリット

• 上記のように型の再利用が可能
• OmitやPickと組み合わせることで柔軟に型を作成可能

例えば，2つ目については以下のようにすることで特定のpropsを除いて型を再利用できます．

type PropsWithoutOnChange = Omit<React.ComponentProps<typeof Button>, "onChange">;

付録

refの有無で型を作成したいときは，React.ComponentPropsWithRefやReact.ComponentPropsWithoutRefがあります．

type InputPropsWithoutRef = React.ComponentPropsWithoutRef<'input'>;

とすることで，inputタグのrefのない型を作成できます．