在打字稿中将 useState 作为道具传递

Question

假设我有一个带有两个子组件的父组件：

const Parent = () => {
   const [myVar, setmyVar] = useState(false)

   return (
     <>
       <MyChildComponent1 myVar={myVar} setMyVar={setMyVar} \> 
       <MyChildComponent2 myVar={myVar} \>
     </>
   )
}

现在我将如何在MyChildComponent2 中正确设置类型？

这是我目前想出的：

const MyChildComponent1 = (
  {myVar, setMyVar}: 
  {myVar: boolean, setMyVar: (value: boolean) => void}) = (...)

setMyvar 的类型是否正确？还是应该换成别的？

Answer 1

与调用useState 返回的函数匹配的类型是：

setMyVar: (value: boolean | ((prevVar: boolean) => boolean)) => void;

如果我们从DefinitelyTyped[1]查看类型定义文件，我们可以看到返回类型中的第二个类型是dispatch：

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

因此提供的泛型类型被传递给SetStateAction<S>，其定义为：

type SetStateAction<S> = S | ((prevState: S) => S);

所以本质上，您的组件的接口如下：

interface IProps {
  myVar: boolean;
  setMyVar?: (value: boolean | (prevVar: boolean) => boolean) => void;
}

正如@Retsam 所说，最好使用 React 的导出类型：

import { Dispatch, SetStateAction } from "react";

interface IProps {
  myVar: boolean;
  setMyVar?: Dispatch<SetStateAction<boolean>>;
}

参考资料： [1]https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L845

Answer 2

Dispatch 和 SetStateAction 类型

正如@Retsam 提到的，您还可以从 React 导入和使用 Dispatch 和 SetStateAction 类型：

import React, { Dispatch, SetStateAction } from 'react';

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<boolean>>
) => {...};

---

奖金

当我发现自己经常使用它时，我会创建一个类型别名来帮助提高可读性

import React, { Dispatch, SetStateAction } from 'react';

type Dispatcher<S> = Dispatch<SetStateAction<S>>;

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatcher<boolean>,
) => {...};

希望这会有所帮助。

Answer 3

添加到@fiz 的评论中，他的块代码对我来说有点不起作用：

import React, { Dispatch, SetStateAction } from 'react';

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<<boolean>>
) => {...};

我必须设置setMyVar: Dispatch<SetStateAction<boolean>>（括号太多了）