Reactでフロータイプを使用するには？

Question

だが、私はその状態がその形状は以下のフロータイプで与えられたオブジェクトで構成されていAppコンポーネントがあるとしましょう：

type Person = { 
    fname: string, 
    lname: string 
}; 

私のコンポーネントの状態がタイプPersonの確かであることを主張するために、私は人工的な地元の作成します私はタイプに注釈を付けることができるようにgetInitialState内部変数：

const App = React.createClass({ 
    getInitialState: function() { 
     const person : Person = {fname: 'John', lname: 'Doe'}; 
     return {person: person}; 
    } 
    , render: function() { 
     return (
       <PersonDetails person={this.state.person}/> 
     ); 
    } 
}); 

上記の作品は（さえconst personを宣言したものの、マイナー不便です）。 問題を、別のコンポーネントのプロパティとしてその状態を渡したい場合に発生します。フロー（

const PersonDetails = React.createClass({ 
    propTypes: { 
     person: React.PropTypes.shape({fname: React.PropTypes.string.isRequired, 
             lname: React.PropTypes.string.isRequired}).isRequired 
    }, 
    render: function() { 
     return (
       <div> 
       <span>{this.props.person.fname}</span> 
       <span>{this.props.person.lname}</span>     
       </div> 
     ); 
    } 
}); 

これは明らかではないDRYプラス私は、静的な型情報を提供するために、2つの異なる方法を使用しています：その場合、私は人の再定義する形状のPropTypes APIを反応させるの使用にはなく、他の解決策を発見しましたReact.PropTypes API）を使用します。

PersonDetailsコンポーネントが型宣言Personを再利用できるようにする方法はありますか？

私が見つけた唯一の方法は、適切なクラス（タイプが反応しない）を使用している：

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 (
       <div> 
       <span>{this.props.person.fname}</span> 
       <span>{this.props.person.lname}</span>     
       </div> 
     ); 
    } 
}); 

const App = React.createClass({ 
    getInitialState: function() { 
     const person : Person = new Person('John', 'Doe'); 
     return {person: person}; 
    } 
    , render: function() { 
     return (
       <PersonDetails person={this.state.person}/> 
     ); 
    } 
}); 

export default App; 

＆hellipを。上記の定義を再利用しても、Flow型とクラスを使用してコンポーネントを静的に型チェックする必要があるときは、私には明らかではありません。さらに、2つのメソッドが実際に同等であるかどうかはわかりません（たとえば、値のヌル機能を表現できるという点で）。

Answer 1

一度あなたのタイプを宣言し、それをエクスポートします。

// types/index.js 

export type Person = {| 
    fname: string, 
    lname: string, 
|} 

が次にどこにでもそれを再利用します。コンポーネントのstateで

：

コンポーネントの propsで

// App.js 

import type { Person } from './types' 

type State = {| 
    person: Person, 
|} 

class App extends Component { 
    state: State = { 
    person: { fname: 'John', lname: 'Doe' }, 
    } 

    render() { 
    return (
     <PersonDetails person={this.state.person} /> 
    ) 
    } 
} 

：

// components/PersonDetails.js 

import type { Person } from '../types' 

type Props = {| 
    person: Person, 
|} 

// stateful syntax 
class PersonDetails extends Component { 
    props: Props 

    render() { 
    const { person } = this.props 
    return (
     <div> 
     <span>{person.fname}</span> 
     <span>{person.lname}</span>    
     </div> 
    ) 
    } 
} 

// stateless syntax 
const PersonDetails = ({ person }: Props) => (
    <div> 
    <span>{person.fname}</span> 
    <span>{person.lname}</span>    
    </div> 
)