title: What is the correct way to type a React HOC?
body: <p>I'm trying to figure out if I am typing my react Higher order component correctly. For the most part this is working correctly, however I'm running into a typing issue when applying a React reference to an instance of the HOC. Below is a simplified repro:</p>
  
  <pre><code>import * as React from "react";
  
  // Is returning a React.ComponentClass correct here?
  function HOC(): (Component: React.ComponentType) =&gt; React.ComponentClass {
      return function(Component: React.ComponentType): React.ComponentClass {
          return class Bar extends React.Component {}
      }
  }
  
  class Foo extends React.Component&lt;{},{}&gt; {}
  const Bar = HOC()(Foo);
  
  class Test extends React.Component {
      private ref: React.RefObject&lt;typeof Bar&gt; = React.createRef&lt;typeof Bar&gt;();
  
      render(): any {
          return (
              &lt;React.Fragment&gt;
                &lt;Bar
                  ref={this.ref} // error here
                /&gt;
              &lt;/React.Fragment&gt;
          );
      }
  }
  </code></pre>
  
  <p>I've also capture the issue here: <a href="https://stackblitz.com/edit/react-ts-rtmfwr" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ts-rtmfwr</a></p>
  
  <p>The error I'm getting is:</p>
  
  <pre><code>index.tsx:20:21 - error TS2322: Type 'RefObject&lt;ComponentClass&lt;{}, any&gt;&gt;' is not assignable to type 'Ref&lt;Component&lt;{}, any, any&gt;&gt;'.
    Type 'RefObject&lt;ComponentClass&lt;{}, any&gt;&gt;' is not assignable to type 'RefObject&lt;Component&lt;{}, any, any&gt;&gt;'.
      Type 'ComponentClass&lt;{}, any&gt;' is not assignable to type 'Component&lt;{}, any, any&gt;'.
        Property 'setState' is missing in type 'ComponentClass&lt;{}, any&gt;'.
  </code></pre>