具有来自react-redux的连接的高阶组件不适用于Typescript Typings

Question

I've created High Order Component which MUST be connected to redux store, by connect function. Actually everything is working in plain Javascript, but i would like to use Typescript here. There is one error related to props typing.

I am using Generic Type for Wrapped Props Component and also my High Order Component has his own Props Type. So i want to connect them by & operator, but i am getting error from connect function..

WithSatsFormProps is empty interface

const withSatsForm =
    <P, K>(options: WithSatsFormOptions<K>) =>
        (SatsComponent: ComponentType<P>) => {
            class WithSatsForm extends Component<WithSatsFormProps & P> { <-- because of this
                constructor(props: WithSatsFormProps & P) {
                    super(props);
                }

                public render() {
                    return (
                        <div>
                            <SatsComponent {...this.props as P} />
                        </div>
                    )
                }
            }

            return connect()(WithSatsForm); <-- here is error typing
        }

export default withSatsForm;

Error message:

Argument of type 'typeof WithSatsForm' is not assignable to parameter of type 'ComponentType, WithSatsFormProps & P>>'. Type 'typeof WithSatsForm' is not assignable to type 'ComponentClass, WithSatsFormProps & P>, any>'. Types of parameters 'props' and 'props' are incompatible.

Answer 1

请在TypeScript - 静态打字指南中观看此React和Redux