ts react usestate 传递时修改函数时类型定义

在 TypeScript 中，当你使用 useState 钩子来定义状态并传递修改函数时，你可以使用泛型来指定状态的类型定义。下面是一个示例：

import React, { useState } from 'react';

interface MyState {
  count: number;
}

const MyComponent: React.FC = () => {
  const [state, setState] = useState<MyState>({ count: 0 });

  const incrementCount = () => {
    setState(prevState => ({
      ...prevState,
      count: prevState.count + 1
    }));
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default MyComponent;

在上面的示例中，我们通过泛型 `<MyState>` 来指定状态的类型为 `MyState`。然后，我们使用 `useState` 钩子来定义名为 `state` 的状态和名为 `setState` 的修改函数。

在 `incrementCount` 函数中，我们使用了函数式更新（functional update）的方式来更新状态。这种方式可以确保我们在更新状态时使用先前的状态，并避免因为异步更新导致的问题。

希望这个示例能帮助你理解如何在 TypeScript 和 React 中定义和传递带有修改函数的状态类型。