フロータイプはインポートされたレキシコンテナの小道具をチェックしていません

Question

フロータイプのレポからのreact-reduxタイピングを使用して、reduxプロジェクトでフロータイプ（0.43.0）をテストするという混乱した動作を経験しました。

// @flow 
import React from 'react' 
import {connect} from 'react-redux' 
class ChildComponent extends React.Component { 
    props: { 
    value: string, 
    otherValue: string 
    } 
    render() { 
    return <span>{ this.props.value && this.props.otherValue }</span> 
    } 
} 
function mapStateToProps(state) { 
    return {otherValue: "test"} 
} 
const ConnectedChildComponent = connect(mapStateToProps)(ChildComponent) 
class ParentComponent extends React.Component { 
    render() { 
    return <ConnectedChildComponent/> 
    } 
} 

上記のコードは、期待どおりに型推論を実行し、「値」プロパが設定されるべきであることを示す、親での使用にエラーを報告します。

私は別のファイルにコンテナの子コードを移動するときしかし、私は、です。TypeCheckは（暗黙の「は任意の」インポートするには可能性が高い）

// flowTestPatent.js 
// @flow 
import React from 'react' 
import {connect} from 'react-redux' 
import ConnectedChildComponent from './flowTestChild' 
class ParentComponent extends React.Component { 
    render() { 
    return <ConnectedChildComponent/> 
    } 
} 


//flowTestChild.js 
// @flow 
import React from 'react' 
import {connect} from 'react-redux' 

export class ChildComponent extends React.Component { 
    props: { 
    value: string, 
    otherValue: string 
    } 
    render() { 
    return <span>{ this.props.value && this.props.otherValue }</span> 
    } 
} 
function mapStateToProps(state) { 
    return {otherValue: "test"} 
} 
export default connect(mapStateToProps)(ChildComponent) 

上記のコードレポートエラーなし起こらないことが判明それは最初の例と同等でなければならないようです。私は何とか間違ってインポートを実行していると仮定しますが、接続されていないコンポーネントをインポートすると、typecheckingは期待通りに行われます。誰でもここで何が起こっているのかを説明できますか？ありがとう！

Answer 1

1つのファイルと別のファイルとの間に違いがある理由はわかりません。ただし、reduxレポのtodos-flow exampleをチェックアウトすると、コンテナの入力方法が多少異なります。

基本的には、コネクターのタイプを手動で指定することになります。これはconnect関数が返す関数です。残念ながら、HOCのフローを入力するには、$Diff doesn't quite work as would be idealのように、この種の手動ステップが必要です。

は、だからあなたの場合には、あなたは上記のコードでは

// @flow 
import React, { Component } from 'react' 
import { connect, type Connector } from 'react-redux' 

type Props = { 
    value: string, 
    otherValue: string, 
} 
type OwnProps = { 
    value: string, 
} 

class ChildComponent extends Component { 
    props: Props 
    render() { 
    return <span>{ this.props.value && this.props.otherValue }</span> 
    } 
} 

function mapStateToProps() { 
    return { 
    otherValue: 'test', 
    } 
} 

const connector: Connector<OwnProps, Props> = connect(mapStateToProps) 
const ConnectedChildComponent = connector(ChildComponent) 

class ParentComponent extends Component { 
    render() { 
    return <ConnectedChildComponent /> 
    } 
} 

を持っているでしょう、私はあなたの例では、私のために働いていないエラー

26: const connector: Connector<OwnProps, Props> = connect(mapStateToProps) 
           ^^^^^^^^ property `value`. Property not found in 
31:  return <ConnectedChildComponent /> 
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `ConnectedChildComponent`