3

Example1 below with type interference works but my attempts to declare the export to improve type checking fails (see Example2 and Example3).

// @flow

import * as React from 'react'
import { connect } from 'react-redux'

// flow errors below will be the same if Props is an exact type {|...|}
type Props = {
    prop1: number,
    prop2: number,
}

class ExampleClass extends React.Component<Props> {
    static defaultProps = { prop2: 1 }

    render() {
        return this.props.prop1 + this.props.prop2
    }
}

// works, but what is the type of Example1?
export const Example1 = connect(null, null)(ExampleClass)

// Cannot assign connect(...)(...) to Example2 because undefined [1] is incompatible with number [1] in property prop2 of type argument P [2].
export const Example2: React.ComponentType<Props> = connect(null, null)(ExampleClass)
export const example2 = <Example2 prop1={1} />

// Cannot assign connect(...)(...) to Example3 because
// property prop1 is read-only in Props [1] but writable in object type [2] in type argument P [3].
// property prop2 is read-only in Props [1] but writable in object type [2] in type argument P [3].
export const Example3: React.ComponentType<React.ElementConfig<React.ComponentType<Props>>> = connect(null, null)(ExampleClass)
export const example3 = <Example3 prop1={1} />

// Note that this works but I'm looking for a way to declare 
// the type without repeating the list of properties
export const Example2a: React.ComponentType<{prop1: number, prop2?: number}> = connect(null, null)(ExampleClass)

Reference the code here https://github.com/jacobwallstrom/FlowTypeExampleIssue

Jacob Wallström
  • 143
  • 1
  • 4

1 Answers1

0

This should be a comment but I'm not able to yet. Anyways, it looks like your example repo is using an older version of Flow. As of version 0.89.0, Flow's support for higher order components (HOCs) has increased tremendously. If you are still facing this issue, or something similar, I would recommend that you upgrade to 0.89.0, use react-redux's flow typings, and investigate again.

user11307804
  • 1