流程:解构.在React/Preact中缺少注释

Question

刚开始使用Flow但似乎无法理解它是什么让我想要添加类型来解析对象,比如道具

即

render({ count }, { displayHelp }) {

抛出一个错误

 16:   render({ count }, { displayHelp }) {
              ^^^^^^^^^ destructuring. Missing annotation

当我添加注释时,它仍然会抱怨

 17:   render({ count: number }, { displayHelp }) {
              ^^^^^^^^^^^^^^^^^ destructuring. Missing annotation

如果有人能指出的话,我显然在这里遗漏了一些非常简单的东西？

Answer 1

与做的问题{ count: number }是,这上有冲突ES6语法解构赋值,在那里你可以使用{ a: b } = c,以便采取价值与主要a来自c并将它命名b,即:

const c = { a: 1 }
const { a: b } = c
//b is now a constant with value 1

现在在Flow中没有一个很好的解决方法,但这似乎有效(虽然它很难看):

render({...}: { count: number }, { displayHelp }) {

现在最好的方法似乎是创建一个type捕获你的道具的自定义:

type propsForThisComponent = {
  propA: someType
  propB: anotherType
  ...
}

然后做:

render(props: propsForThisComponent) {

这个类型检查,虽然它强迫你访问你的所有道具props.propName.