【React】Propsに関数の型を指定する方法

Propsに関数の型を指定したい

ReactをやっていてPropsに関数の型を指定したい時がありました！

その時にすぐわからなかったので、備忘録になります。

型がanyになってしまっている

こんな感じで、関数の型にanyが指定されてしまっている状態です！

これにちゃんと型を指定していきましょう！

interface Props {
    handleSomething: any,
}

const FunctionComponent: React.FC<Props> = { handleSomething } => {
  .
  .
}

対処方法

戻り値がない関数の場合

こんな感じで戻り値のない関数は、VoidFunctionにすればOKです。

interface Props {
    handleSomething: VoidFunction,
}

const FunctionComponent: React.FC<Props> = { handleSomething } => {
  .
  .
}

戻り値がある関数の場合

戻り値がある場合はFunctionにすればOKです！

const createStore = (arg: Function) => {
  .
  .
  return store;
};

自分で型を定義する場合

自分で型を定義する場合は、以下のようにtypeで独自で型を定義します！

type MyFunctionType = (something: string) => string;

interface Props {
    handleSomething: MyFunctionType,
}

const FunctionComponent: React.FC<Props> = { handleSomething } => {
  .
  .
}

ボタンのクリックなどのイベントを受け取る関数の場合

ボタンのクリックなど、React.MouseEventのイベントを受け取る関数の場合は、(event: React.MouseEvent) => void;を指定する必要があります！

詳細は別途こちらの記事にまとめていますので、こちらの記事を参照してください！

【React】is not assignable to type(TS2322)のエラー

is not assignable to type(TS2322)のエラーが出たReactをやっていて、Propsの型定義の部分で〜is not assignable to type(TS2322)のエラーが発生したため、...

awesome-linus.com

2020.01.22

参考サイト

Typescript Interface Functions

This is how to declare function types within Typescript interfaces. Wrote this article because of confusing information out there and…

medium.com

まとめ

今回は、ReactでPropsに関数の型を指定する方法について書きました。

TypeScriptでは型を指定して書くことができるので、非常にわかりやすくていいですよね！

これからも少しでも迷ったことなどはどんどん記事に指定いきたいと思います！