javascript - Flowtype 不检查导入的 redux 容器上的 Prop

Question

我在 redux 项目中遇到了一个令人困惑的行为测试 flowtype(0.43.0)，使用来自 flow-typed repo 的 react-redux 类型。

// @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/>
  }
}

上面的代码按预期执行了类型推断，并在父级的用法中报告错误，表明应设置“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

我不确定为什么将它放在一个文件中与单独文件之间存在差异。如果您 checkout todos-flow example然而，在 redux 存储库中，他们处理容器类型的方式确实有点不同。

基本上，您最终需要为连接器手动指定类型，这是函数 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`