Flow: Flow not understanding React propTypes for ES6 classes

[sophistifunk]

Background: I'm converting a smallish package to Flow, in order to sell it to the team as a general part of our codebase.

Running 0.24.2, using the following example:

// @flow

import React, {Component, PropTypes} from 'react';

export class TestComponent extends Component {

    // props: {
    //     message: string
    // };

    someMethod() {
        console.log(this.props.badField);
    }

    render() {
        return <div>{this.props.message}</div>;
    }

}

TestComponent.propTypes = {
    message: PropTypes.string
};

Flow tells me this code has no problems. If I uncomment the duplicate props type definition, it correctly flags badField as non-existent. Using a static propTypes = {...} does not solve the problem.

I understand that duplicating the propTypes as a Flow type will fix the problem in this limited example, but I'll never get the rest of my team on-board with Flow if they have to write out all their propTypes twice. We would also not get any error messages as the duplicate definitions diverged over time, which kind of defeats the purpose of the exercise.

[sophistifunk]

I've been thinking on this. Perhaps TestComponent.propTypes could be generated from the Flow props type via Babel?

[bsr203]

I am just a user like you, but I don't use PropType but flow type as here

http://flowtype.org/docs/react.html#_

props: {
    title: string,
    visited: boolean,
    onClick: () => void,
  };

or

type Props<Config> = {
  class: ReactClass<Config>,
  config: Promise<Config>,
};

then

class Button extends React.Component {
  props: Props
...
}

you will see lot of examples in the test files

I read comments from react core team that React.PropType is limited in scope and wante to get rid of in favor of flow. t may not happen still, I don't know whether you should use React.PropType if using @flow

[sophistifunk]

While you can get away with not including FooComponent.propTypes, it's not ideal and you will miss out on runtime warnings in development mode, which would still be useful if a project is being migrated to using Flow a-chunk-at-a-time. But doing this would not be an option at all for some things, like FooComponent.contextTypes or FooComponent.childContextTypes as they're needed at runtime.

[rosskevin]

may or may not relate to #1908

[antitoxic]

@sophistifunk check out https://github.com/codemix/babel-plugin-typecheck for getting warnings in dev mode.

+1 for the contextTypes and childContextTypes. It feels borderline illegal to mix react.PropTypes for contextTypes and use flowtype declarations for component.PropTypes.

[steve-taylor]

This is a missing feature, not a bug. It's in the documentation. Having said that, it seems strange that Flow would provide this capability to React.createClass components but not extends React.Component components. One of the great things about Flow is that you can get a lot of mileage out of it without resorting to type annotations. Unfortunately, that doesn't cover component classes. So this issue is gets +1 from me.

[keithkml]

@steve-taylor context does not appear to be mentioned in the docs you linked to. Is there anywhere else this behavior is documented?

[villesau]

Nowadays Flow enforces you to type properties so there is no way around it. I don't think Flow will ever support inferring types from proptypes.

There are some libraries to help with this:

• Flow libdefs for proptypes: https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/prop-types_v15.x.x/flow_v0.41.x-/prop-types_v15.x.x.js
• Codemod to convert proptypes to flow types: https://github.com/billyvg/codemod-proptypes-to-flow
• Flow runtime type checker: https://github.com/codemix/flow-runtime