title: How to use Flow types with React?
body: <p>Let's say I have an <code>App</code> component whose state consists of an object whose shape is given by the following Flow type:</p>
  
  <pre><code>type Person = {
      fname: string,
      lname: string
  };
  </code></pre>
  
  <p>To assert that the state of my component is indeed of type <code>Person</code> I create an artificial local variable inside <code>getInitialState</code> so that I can annotate the type:</p>
  
  <pre><code>const App = React.createClass({
      getInitialState: function() {
          const person : Person = {fname: 'John', lname: 'Doe'};
          return {person: person};
      }
      , render: function() {
          return (
                  &lt;PersonDetails person={this.state.person}/&gt;
          );
      }
  });
  </code></pre>
  
  <p>The above works (even though having to declare the <code>const person</code> is a minor inconvenience).
  The problem arises when I wish to pass that state as the property of another component. In that case, I have found no other solution but to re-define the shape of Person using React's <code>PropTypes</code> API:</p>
  
  <pre><code>const PersonDetails = React.createClass({
      propTypes: {
          person: React.PropTypes.shape({fname: React.PropTypes.string.isRequired,
                                         lname: React.PropTypes.string.isRequired}).isRequired
      },
      render: function() {
          return (
                  &lt;div&gt;
                  &lt;span&gt;{this.props.person.fname}&lt;/span&gt;
                  &lt;span&gt;{this.props.person.lname}&lt;/span&gt;                
                  &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>This is clearly not DRY plus I am using two different methods to provide static type information (Flow and the React.PropTypes API).</p>
  
  <p>Is there a way to allow the <code>PersonDetails</code> component to reuse the type declaration of <code>Person</code>?</p>
  
  <p>The only way I have found is using proper classes (not React types):</p>
  
  <pre><code>class Person {
      fname: string;
      lname: string;
      constructor(fname: string, lname: string) {
          this.fname = fname;
          this.lname = lname;
      }
  };
  
  const PersonDetails = React.createClass({
      propTypes: {
          person: React.PropTypes.instanceOf(Person).isRequired
  
      },
      render: function() {
          return (
                  &lt;div&gt;
                  &lt;span&gt;{this.props.person.fname}&lt;/span&gt;
                  &lt;span&gt;{this.props.person.lname}&lt;/span&gt;                
                  &lt;/div&gt;
          );
      }
  });
  
  const App = React.createClass({
      getInitialState: function() {
          const person : Person = new Person('John', 'Doe');
          return {person: person};
      }
      , render: function() {
          return (
                  &lt;PersonDetails person={this.state.person}/&gt;
          );
      }
  });
  
  export default App;
  </code></pre>
  
  <p>&hellip; while the above succeeds in re-using the definition it is not clear to me when I ought to use Flow types versus classes to statically type-check my components. Plus, I am not sure the two methods are really equivalent (e.g. in terms of being able to express null-ability of values).</p>