setState関数をPropsで渡すときの型定義

React.jsでもNext.jsでも、useStateを利用することがあると思います。

次のコードは、ボタンを押すとカウントアップできる例です。

// App コンポーネント
import React from "react";

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h2>Current Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default App;

ここで、何らかの事情で button 部分は別コンポーネントで実行したいとします。

仮に Button コンポーネントを作成してみます。

// Button コンポーネント
import React from "react";

const Button: React.FC<{
  count,
  setCount;
}> = ({ count, setCount }) => {
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Button;

TypeScriptなので、Props の count と setCount に型定義を行います。

count に関しては元のままここでは number を定義しておきます。

React.FC<{
  count: number;
  setCount;
}>

問題は setCount の方です。

setCountは関数なので setCount: Function; でもいいですが、もっとしっかり定義する場合は次のようにします。

React.FC<{
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
}>

これでsetState関数をPropsで渡す場合もしっかり型定義できました。