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

Just stumbled upon this as well and thought I'd share what I came up with in the end.

Building on what @rico-kahler provided, my approach mapped to your code would be

export const FooWithTd = withTd(Foo) as (props: FooProps) => React.ReactElement>;

which you can then use like this

export class Bar extends React.Component<{}> {
  public render() {
    return (
       />
    );
  }
}

In my case, I have defaultProps as well and I inject props by ways of another HOC, the more complete solution would look like this:

type DefaultProps = "a" | "b";
type InjectedProps = "classes" | "theme";
type WithTdProps = Omit, DefaultProps | InjectedProps> & Partial & { children: React.ReactNode }>;
export const FooWithTd = withTd(Foo) as (props: WithTdProps) => React.ReactElement>;