title: React & TypeScript HOCs - why I get Type '{}' is not assignable to Type P?
body: <p>I hit the wall while coding along with Learning React with TypeScript book. I surrendered and copy pasted code directly from the book, but compiler is still unhappy</p>
  
  <p>My current workaround is to provide 'any' value, instead of IProps, but this is a cheap hack.</p>
  
  <p>Not working code:</p>
  
  <pre><code>import * as React from 'react';
  
  interface IProps {
    loading: boolean;
  }
  
  const withLoader = &lt;P extends object&gt;(
    Component: React.ComponentType&lt;P&gt;
  ): React.FunctionComponent&lt;P &amp; IProps&gt; =&gt; ({ loading, ...props }: 
  IProps) =&gt;
    loading ? (
      &lt;div className="loader-overlay"&gt;
        &lt;div className="loader-circle-wrap"&gt;
          &lt;div className="loader-circle" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ) : (
      &lt;Component {...props} /&gt;
    );
  
   export default withLoader;
  </code></pre>
  
  <p>Working code (I only changed IProps to any):</p>
  
  <pre><code>import * as React from 'react';
  
  interface IProps {
    loading: boolean;
  }
  
  const withLoader = &lt;P extends object&gt;(
    Component: React.ComponentType&lt;P&gt;
  ): React.FunctionComponent&lt;P &amp; IProps&gt; =&gt; ({ loading, ...props }: 
  any) =&gt;
    loading ? (
      &lt;div className="loader-overlay"&gt;
        &lt;div className="loader-circle-wrap"&gt;
          &lt;div className="loader-circle" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ) : (
      &lt;Component {...props} /&gt;
    );
  
   export default withLoader;
  </code></pre>
  
  <p>In not working code, I get Type '{}' is not assignable to Type P error. I would like to solve this issue, as it would help me understand what is going on. I am total beginner at TypeScript!</p>