Clever Geek Handbook

Stream: destruction. Missing annotation in React / Preact

Just starting with Flow, but doesn't seem to understand what I need to do with adding types for destructuring objects like props for example

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'm clearly missing something very basic here, if anyone can point out?

+3


source to share


2 answers


The issue with execution { count: number }

is that it has to do with ES6 syntax for assigning destruction , where you can use { a: b } = c

to grab the value with a key a

from c

and name it b

, that is:

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

There is currently no good workaround on the thread, but this works (albeit ugly):

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

The best way right now is to create a custom type

one that grabs your props:



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

and then do:

render(props: propsForThisComponent) {

This is typechecks, although it forces you to access all of your props like props.propName

.

+6


source


You need to do something like this:

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


Unfortunately, I don't believe there is a more concise way to do this.

+2


source






More articles:


All Articles