javascript - Is it possible to use Flow and arrow functions with React?

Question

Working on incrementally migrating a project to use Flow types. However, we're getting the following error on any of our arrow functions:

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type annotation at property handleChange:Flow(signature-verification-failure)

With the following syntax, Flow does not complain:

  constructor(props: ComponentProps) {
      super(props);
      this.state = {
         query: undefined,
      }
      (this: any).handleChange = this.handleChange.bind(this);
  }

  handleChange(event: any) {
    this.setState({ query: event.target.value });
  }

However, to avoid doing binding for every helper function we have -- of which there are many in some components -- (& from a previous migration), we currently use arrow functions like the following:

  handleChange = (event: any) => {
    this.setState({ query: event.target.value });
  }

With this change, we get the above error. Unsure why it is occurring; is there any workaround for this or way to get flow to stop complaining without FlowIgnores? Thanks!

question from:https://stackoverflow.com/questions/65837845/is-it-possible-to-use-flow-and-arrow-functions-with-react

Answer 1

I believe you want this style:

class Klass {
  member: (string => number) = (num) => num.length;
}

(try)