Typescript with React - use HOC on a generic component class

Question

I have a generic React component, say like this one:

class Foo extends React.Component, FooState> {
    constructor(props: F         


        

Answer 1

Workaround: simple case

If your component's type parameter is used only for passing it to props, and users of the component do not expect it having any functionality beyond just passing props and rendering, you can explicitly hard-cast the result of your hoc(...args)(Component) to React's functional component type, like this:

import React, {ReactElement} from 'react';

class MyComponent extends React.Component> { /*...*/ }

const kindaFixed = myHoc(...args)(MyComponent) as unknown as (props: MyProps) => ReactElement;

Workaround: more complex and with some runtime costs

You can use fabric-like function, supposed here:

class MyComponent extends React.Component> { /*...*/ }

export default function MyComponentFabric() {
    return hoc(...args)(MyComponent as new(props: MyProps) => MyComponent);
}

This one will require you to create new version of wrapped component for each type you use it with:

import MyComponentFabric from '...whenever';

const MyComponentSpecificToStrings = MyComponentFabric();

It will allow you to access all public instance fields and methods of your component.

Summary

I faced this issue when tried to use connect from react-redux on my ExampleGenericComponent. Unfortunatelly, it cannot be fixed properly until TypeScript will support HKT, and any HOC you use will update its typings respecting this feature.

There is possibly no correct solution (at least for now) for usages beyond just rendering, when you need to access component instance fields and methods. By 'correct' I mean 'without ugly explicit typecasts', and 'with no runtime cost'.

One thing you can try is to split your class-component into two components, one that will be used with HOC, and other that will provide fields and methods that you need.