为 useState 钩子的 setState 函数输入类型？

Question

我正在将我的 React 项目转换为 Typescript。

我有这个状态：

AdminBlogPostContainer.tsx

const [blogPost,setBlogPost] = useState<null | BLOGPOST>(null);

return(
  <AdminBlogPostPage
    blogPost={blogPost as BLOGPOST}
    setBlogPost={setBlogPost}
  />
);

AdminBlogPostPage.tsx

interface AdminBlogPostPage {
  blogPost: BLOGPOST,
  setBlogPost:            // <---- WHAT SHOULD I USE AS TYPE HERE ?
}

const AdminBlogPostPage: React.FC<AdminBlogPostPage> = (props) => {
  console.log("Rendering AdminBlogPostPage...");

  return(
    // ...
  );
};

export default AdminBlogPostPage;

这是错误信息：

Answer 1

让我们从 @types/react.

中的一些相关类型定义开始

declare namespace React {
    // ...
    type SetStateAction<S> = S | ((prevState: S) => S);
    // ...
    type Dispatch<A> = (value: A) => void;
    // ...
    function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
    // ...
}

由此我们已经可以推导出setBlogPost语句中的类型

const [blogPost, setBlogPost] = useState<null | BLOGPOST>(null);

这是 Dispatch<SetStateAction<null | BLOGPOST>>，但让我们分解一下看看每个部分的含义。

setBlogPost: (value: null | BLOGPOST | ((prevState: null | BLOGPOST) => null | BLOGPOST)) => void;

从外到内一次消化一块，我们得到以下解释：

setBlogPost: (value: ...) => void

setBlogPost 是一个接受参数 value 和 returns void.
的函数
- value: null | BLOGPOST | ((prevState: ...) => null | BLOGPOST)
  
  value 是 null、BLOGPOST 或接受参数 prevState 和 returns null 或参数的函数BLOGPOST.
  - prevState: null | BLOGPOST
    
    prevState 是 null 或 BLOGPOST.

Answer 2

interface AdminBlogPostPage {
  blogPost: BLOGPOST;
  setBlogPost: Function;            // <---- You may use the Function type here
}

为 useState 钩子的 setState 函数输入类型？

Type for the setState function of the useState hook?

typescript

reactjs

typescript-typings

react-hooks

use-state

`setBlogPost: (value: ...) => void`

`value: null | BLOGPOST | ((prevState: ...) => null | BLOGPOST)`

`prevState: null | BLOGPOST`