Using HOCs on Generic Typescript React Components

Viewed 1464

I have a React component which is typed with a generic. That component in turn is extended with a higher order component (in this case, redux-form). Here's a stripped back version of my class and the HOC being applied:

import * as React from "react";

interface MyFormProps<D> {
    prop: D;
    form: string;
}

class MyForm<D> extends React.Component<MyFormProps<D>, {}> {
    render(): JSX.Element {
        return (
            <form>
                {this.props.prop}
            </form>
        );
    }
}

export const ConnectedMyForm = reduxForm({} as Config<any, {}, {}>)(MyForm);

Then I try to create a typed version of my component in another component.

import { ConnectedMyForm } from "./my-form";

interface FormType {
    // Form props here
}

type TypedForm = new () => ConnectedMyForm<FormType>;
const TypedForm = ConnectedMyForm as TypedForm;

In order to be able to use it in TSX as follows:

<TypedForm />

This method works absolutely fine on another Component I've built which doesn't have HOC applied but here I get the following error:

error TS2304: Cannot find name 'ConnectedMyForm'.

on the type TypedForm = new () => ConnectedMyForm<FormType>; line.

This only happens when I apply the HOC function to my component. I'm guessing it's because I've not specified the generic typing on the connected version of the form. But how would I specify that typing?

1 Answers
Related