![[TypeScript] React Hookで型定義付きでカリー化する時の書き方](https://wonwon-eater.com/wp-content/uploads/2020/08/curry-3154733_640-640x410.jpg)
ReactのuseEffectを使ってAPIからデータを取得して直ぐに参照しようとすると、値が取得されておらずにnullになっていることがあります。 その原因と対処方法について記載します。 useEf…
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');
