propsの型を再利用するためのPickの使い方（React + TypeScript）

背景

Reactではコンポーネント同士で同じようなデータ（props）をやりとりすることがあります。

たとえば「テキストボックスで入力を受け取る型」などを複数の場所で使いたいとき、同じ内容を繰り返し書くのではなく、1つの型を元に必要な部分だけを取り出して使いたい場合があります。

このときに便利なのが、TypeScriptの Pick という型ユーティリティです。

Pickとは

Pick は、ある型から一部のプロパティだけを抜き出して新しい型を作るものです。

type FormProps = {
  input: string;
  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSearch: () => void;
  error?: string;
  placeholder: string;
  isLoading: boolean;
  formRef: React.RefObject<HTMLFormElement | null>;
};

// 一部のpropsだけ使いたい場合

type ModalProps = Pick<FormProps, "input" | "onInputChange" | "onSearch" | "error" | "isLoading">;

このように書くと、ModalProps は FormProps の中から、指定したプロパティだけを持つ型になります。

どんな時に使うか

• すでに定義されている型が大きすぎて一部だけ使いたいとき
• 再利用可能なprops型を部分的に別のコンポーネントで使いたいとき
• 型の重複定義を避けて、変更に強い構成にしたいとき
• 複数のコンポーネントで共通のロジックを共有するが、必要なpropsが完全には一致しないとき

Pickは「全部じゃなくて必要なものだけ欲しい」場面で有効です。

このようにすると、共通の型を無駄なく使いまわしながら、独自の機能も追加できます。

まとめ

type 新しいprops = Pick<元にnprops, "抽出されたtype01" | "抽出されたtype02"> & {
  新しいpropsで追加したい型;
};

• 複数のコンポーネントで同じようなpropsを使うなら、型を再利用した方が安全で効率的
• Pick を使えば、必要な部分だけを切り出して新しい型にできる
• & を組み合わせれば、共通のprops + 独自のpropsの構成も可能

このようにして、propsの重複や定義ミスを減らしつつ、型の一貫性を保つことができます