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

is not assignable to type(TS2322)のエラーが出た
解決方法
1. 修正後のコード
2. 参考サイト
まとめ

is not assignable to type(TS2322)のエラーが出た

Reactをやっていて、Propsの型定義の部分で〜is not assignable to type(TS2322)のエラーが発生したため、備忘録として残しておきたいと思います。

発生したエラー

以下が実際に発生したエラーです。

Type '(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void' is not assignable to type 'VoidFunction'. TS2322

エラーが出たコード

以下のコードでエラーが発生しました。

こちらがコンポーネント部分です。

ここのinterface PropsのfunctionProps: VoidFunctionの定義の部分でエラーが発生しています。

component.tsx

interface Props {
    props1: propsType1,
    props2: propsType2,
    functionProps: VoidFunction
}

const Component: React.FC<Props> = { props1, props2, functionProps } => {
    .
    .
}

export default Component;

こちらのcontainer部分のfunctionPropsで、buttonClickFunctionを渡しています。

container.tsx

const buttonClickFunction = (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
  .
  .
};

<Component
  props1={props1}
  props2={props2}
  functionProps={buttonClickFunction}
/>

エラー原因

エラー原因は、interface PropsのfunctionPropsの型が(event: React.MouseEvent) => voidと一致しないことによるものです。

解決方法

解決方法はエラーメッセージの通り、interface PropsのfunctionPropsの型がVoidFunctionになっているので、これを以下のように(event: React.MouseEvent) => voidに変えてやればOKです！

functionProps: (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;

修正後のコード

こちらがエラー修正後のコード全体になります。

component.tsx

interface Props {
    props1: propsType1,
    props2: propsType2,
    functionProps: (
      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
    ) => void;
}

const Component: React.FC<Props> = { props1, props2, functionProps } => {
    .
    .
}

export default Component;

container.tsx

const buttonClickFunction = (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
  .
  .
};

<Component
  props1={props1}
  props2={props2}
  functionProps={buttonClickFunction}
/>