[TypeScript] React Hookで型定義付きでカリー化する時の書き方

[TypeScript] React Hookで型定義付きでカリー化する時の書き方

TypeScriptでReactを使う場合は型定義を記載しますが、カリー化する場合の型定義の仕方は少々分かりづらいです。

React Hookをカリー化する

コンポーネントを生成するにあたってカリー化できるとシンプルに書ける場合がありますが、TypeScriptでは型定義を正確に記載しないとコンパイルエラーとなります。

サンプルとして、type別のbuttonを生成するコンポーネントの記載例です。
型定義は変数に対してではなく、ファンクションの戻り値の型として宣言します。

type Props = { children: ReactNode };

const ButtonFactory = (type: string): React.FC<Props> => (props: Props) => {
  return <Button type={type}>{props.children}</Button>;
};

export const Button1 = ButtonFactory('button');
export const Button2 = ButtonFactory('submit');

 

プログラミングカテゴリの最新記事

%d人のブロガーが「いいね」をつけました。