title: React/TypeScript: Consuming context via HOC
body: <p>I'm trying to implement the example <a href="https://reactjs.org/docs/context.html#consuming-context-with-a-hoc" rel="noreferrer">Consuming Context with a HOC</a> from the React documentation (React 16.3) in TypeScript (2.8) and failing miserably. For reference, the code from React's manual:</p>
  
  <pre><code>const ThemeContext = React.createContext('light');
  
  // This function takes a component...
  export function withTheme(Component) {
    // ...and returns another component...
    return function ThemedComponent(props) {
      // ... and renders the wrapped component with the context theme!
      // Notice that we pass through any additional props as well
      return (
        &lt;ThemeContext.Consumer&gt;
          {theme =&gt; &lt;Component {...props} theme={theme} /&gt;}
        &lt;/ThemeContext.Consumer&gt;
      );
    };
  }
  </code></pre>
  
  <p>The best I could come up with:</p>
  
  <pre><code>export interface ThemeAwareProps {
    theme: string;
  }
  
  const ThemeContext = React.createContext('light');
  
  export function withTheme&lt;P extends ThemeAwareProps, S&gt;(Component: new() =&gt; React.Component&lt;P, S&gt;) {
    return function ThemedComponent(props: P) {
      return (
        &lt;ThemeContext.Consumer&gt;
          {theme =&gt; &lt;Component {...props} theme={theme} /&gt;}
        &lt;/ThemeContext.Consumer&gt;
      );
    };
  }
  
  class App extends React.Component {
  
    public render() {
      return (
        &lt;ThemeContext.Provider value={'dark'}&gt;
          &lt;ThemedButton/&gt;
        &lt;/ThemeContext.Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>ThemedButton.tsx:</p>
  
  <pre><code>interface ThemedButtonProps extends ThemeAwareProps {
  }
  
  interface ThemedButtonState{
  }
  
  class ThemedButton extends React.Component&lt;ThemedButtonProps, ThemedButtonState&gt; {
  
    constructor(props: ThemedButtonProps) {
      super(props);
    }
  
  
    public render() {
      return (
        &lt;button className={this.props.theme}/&gt;
      )
    }
  }
  
  export default withTheme(ThemedButton);
  </code></pre>
  
  <p>The problem is the last line (<code>export default withTheme(ThemedButton)</code>). The TypeScript compiler complains that</p>
  
  <blockquote>
    <p>Argument of type <code>typeof ThemedButton</code> is not assignable to parameter of type <code>new () =&gt; Component&lt;ThemedButtonProps, ThemedButtonState, any&gt;</code>.</p>
  </blockquote>
  
  <p>What am I missing?</p>