Just getting started with Flow but can't seem to understand what it wants me to do with adding types for destructuring objects like i.e. props
i.e.
render({ count }, { displayHelp }) {
Throws an error like
16: render({ count }, { displayHelp }) {
^^^^^^^^^ destructuring. Missing annotation
and when I add annotation it still complains
17: render({ count: number }, { displayHelp }) {
^^^^^^^^^^^^^^^^^ destructuring. Missing annotation
I am obviously missing something very simple here if anybody could point out ?
The problem with doing { count: number }
is that this clashes with ES6 syntax for destructuring assignment, where you can use { a: b } = c
in order to take the value with key a
from c
and have it be named b
, ie:
const c = { a: 1 }
const { a: b } = c
//b is now a constant with value 1
There isn't really a good workaround for this in Flow right now, but this seems to work (although it is ugly):
render({...}: { count: number }, { displayHelp }) {
The best way right now seems to be to create a custom type
which captures your props:
type propsForThisComponent = {
propA: someType
propB: anotherType
...
}
and then do:
render(props: propsForThisComponent) {
This typechecks, although it forces you to access all your props as props.propName
.