title: How to type React Component whose props get partially applied?
body: <p>I have a function that takes a React component and partially applies its props. This is used e.g. to supply a component with a theme from a consumer.</p>
  
  <p>It basically converts this <code>&lt;FancyComponent theme="black" text="blah"/&gt;</code> to this <code>&lt;AlreadyFanciedComponent text="blah"/&gt;</code>, which is the same component just with the <code>theme</code> already provided.</p>
  
  <p>I cannot work out how this has to be typed.</p>
  
  <p>Here is some working code throwing TypeScript errors:</p>
  
  <pre class="lang-js prettyprint-override"><code>import * as React from "react";
  import * as ReactDOM from "react-dom";
  import { ComponentType } from "react";
  
  
  type Theme = {theme: string};
  
  function preTheme&lt;TProps extends Theme&gt;(WrappedComponent: ComponentType&lt;TProps&gt;) {
      return React.forwardRef&lt;typeof WrappedComponent, TProps&gt;((props: TProps, ref) =&gt; {
          // here could be a Consumer
          return &lt;WrappedComponent theme={props.theme} ref={ref} {...props} /&gt;
      })
  }
  
  const ThemedP: React.FC&lt;{theme: string, text: string}&gt; = props =&gt; &lt;p className={props.theme}&gt;{props.text}&lt;/p&gt;;
  const PreThemedP = preTheme(ThemedP);
  
  ReactDOM.render(&lt;PreThemedP text={"Here be useless text"}/&gt;, document.getElementById('root'));
  
  </code></pre>
  
  <p>The error is: <code>Property 'theme' is missing in type '{ text: string; }' but required in type '{ theme: string; text: string; }'</code></p>
  
  <p><a href="https://codesandbox.io/s/react-typescript-playground-fmxwu?file=/src/index.tsx:0-689" rel="nofollow noreferrer">Here it is in a playground.</a></p>