Question

我们应该如何使用带有React钩子的Flow类型注释，例如useState？我尝试搜索一些应如何实施的示例，但找不到任何内容。

我尝试过：

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

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

Answer 1

Flow推断类型，如shown in the PR，它增加了对Flow库的挂钩的支持。

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将为此给出错误。 eslint-plugin-flowtype具有固定版本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>>([]);

如何为React挂钩（useState等）进行流类型注释？

3 个答案:

更新