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?