Flowtype 不检查导入的 redux 容器上的道具

Question

我遇到了一个令人困惑的行为，在 redux 项目中使用流类型存储库中的 react-redux 类型测试 flowtype(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/>
  }
}

以上代码按预期进行了类型推断，在parent中使用报错，提示应该设置“value”prop。

但是，当我将容器子代码移动到单独的文件中时，我发现类型检查没有发生（可能是隐式的“任何”导入）

// 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)

上面的代码看起来应该与第一个示例等效时没有报告任何错误。我会假设我以某种方式错误地执行了导入，但是当我导入未连接的组件时，类型检查会按预期进行。任何人都可以帮助解释这里发生了什么吗？谢谢！

Answer 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`