React hooks（useState等）如何做流式注解？

Question

我们应该如何将 Flow 类型注释与 React 挂钩一起使用，例如 useState？我试过搜索一些关于如何实施它们的例子，但找不到任何东西。

我试过这个：

const [allResultsVisible, setAllResultsVisible]: [ boolean, (boolean) => void, ] = useState(false);

这不会引发任何与流程相关的错误，但我不确定这是正确的还是注释挂钩的最佳方式。如果我的尝试不正确或不是最好的方法，我应该怎么做？

Answer 1

Flow 推断类型，因为 shown in the PR 添加了对 Flow 库的挂钩支持。

更新

正如我在另一个答案的评论中所讨论的，结果变量必须根据上下文使用，类型检查才能按预期工作。

const [loading, setLoading] = React.useState(true);
(loading: boolean);

setLoading('foo') // Flow error

对比

const [loading, setLoading] = React.useState(true);

setLoading('foo') // no Flow error

Answer 2

类型推断对我不起作用：

const [loading, setLoading] = React.useState(true) // boolean
setLoading('foo') // no Flow error
setLoading(1) // no Flow error

必须手动添加类型：

const [loading, setLoading]: [boolean, ((boolean => boolean) | boolean) => void] = React.useState(false)
setLoading('foo') // Flow error
setLoading(1) // Flow error

我有：

"react": "16.8.6",
"flow-bin": "0.100.0",

更新

正如@AndrewSouthpaw 指出的那样，loading 必须在某些上下文中使用，否则 setLoading 将无法正常工作。

这个有效：

const [loading, setLoading] = React.useState(true);
(loading: boolean);

setLoading('foo'); // Flow error

同样没有分号：

 const [loading, setLoading] = React.useState(true)
 ;(loading: boolean)

 setLoading('foo') // Flow error

ESLint

ESLint no-unused-expressions will give an error from this. eslint-plugin-flowtype has fixed version flowtype/no-unused-expressions.

Answer 3

如果可以从初始值推断类型，则无需为Flow添加类型信息，例如：

const [open, setOpen] = React.useState(false);

如果因为初始值是一个复杂的对象而无法推断，使用泛型来赋值一个类型，例如：

type Merchandize = {|
  name: string,
  value: number,
|};

const [shoppingCare, setShoppingCart] = React.useState<Array<Merchandize>>([]);

Answer 4

除了上面的答案，

确保将 // @flow 放在文件的最顶部，以使所有流程功能正常工作。

没有将 // @flow 放在顶部的唯一对我有用的解决方案是：

const [allResultsVisible, setAllResultsVisible]: [ boolean, Function ] = useState(false);

React hooks（useState等）如何做流式注解？

How to do flow type annotations for React hooks (useState, etc.)?

reactjs

flowtype

更新