title: Correct Typescript type for return value of nested prop-injection-HOCs in React
body: <p>I'm wondering if I have the correct typing for an API HOC's return type in the following scenario:</p>
  
  <ul>
  <li><p>I have an Authentication HOC, <code>withAuthentication</code>, which injects auth services into a component's props.</p></li>
  <li><p>I have an API HOC, <code>withRestApi</code>, which injects API calls, and which itself uses <code>withAuthentication</code>.</p></li>
  <li><p><code>MyComponent</code> needs to make use of <code>withRestApi</code>'s injected functions, and has its own props.</p></li>
  </ul>
  
  <p>(In the actual app, <code>withAuthentication</code> also needs a react-router HOC, but am trying to keep things as simple as possible in this example.)</p>
  
  <p>I've based my code so far on <a href="https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb" rel="nofollow noreferrer">James Ravencroft's excellent post on HOCs and Typescript</a>, and additionally <a href="https://stackoverflow.com/questions/51083920/how-to-handle-props-injected-by-hoc-in-react-with-typescript">this SO post on injected HOC props</a>, which helped to solve an issue in which HOC props were being exposed to the parent of the wrapped component.</p>
  
  <p>What I'm trying to achieve is:</p>
  
  <ul>
  <li>Access to <code>this.props.getResultOfApiCall</code> from within the <code>MyComponent</code> class, but hidden for any parent component.</li>
  <li>Access to <code>this.props.isAuthenticated</code> from within the <code>WithRestApi</code> class, but hidden for any parent component.</li>
  <li>Ability to set <code>componentProp</code> on <code>MyComponent</code> from a parent component.</li>
  </ul>
  
  <p>Code as follows:</p>
  
  <p><strong>MyBase.tsx</strong>, enclosing component purely to demonstrate use of <code>MyComponent</code>'s prop:</p>
  
  <pre><code>import * as React from 'react';
  
  import MyComponent from './MyComponent';
  
  class MyBase extends React.Component {
      public render() {
          return (
              &lt;&gt;
                  &lt;h1&gt;RESULT&lt;/h1&gt;
                  &lt;MyComponent componentProp={'Prop belonging to MyComponent'} /&gt;
              &lt;/&gt;
          );
      }
  }
  
  export default MyBase;
  </code></pre>
  
  <p><strong>MyComponent.tsx</strong>, which uses the API:</p>
  
  <pre><code>import * as React from 'react';
  
  import { IWithRestApiProps, withRestApi } from './WithRestApi';
  
  interface IMyComponentProps extends IWithRestApiProps {
      componentProp: string;
  }
  
  class MyComponent extends React.Component&lt;IMyComponentProps&gt; {
      public render() {
          return (
              &lt;&gt;
                  &lt;h2&gt;Component prop: {this.props.componentProp}&lt;/h2&gt;
                  &lt;h2&gt;API result: {this.props.getResultOfApiCall()}&lt;/h2&gt;
              &lt;/&gt;
          );
      }
  }
  
  export default withRestApi(MyComponent);
  </code></pre>
  
  <p><strong>WithAuthentication.tsx</strong> (putting this first because it's not the problem... as far as I can tell):</p>
  
  <pre><code>import * as React from 'react';
  
  export interface IWithAuthenticationProps {
      isAuthenticated: () =&gt; boolean;
  }
  
  export const withAuthentication = &lt;P extends IWithAuthenticationProps&gt;(Component: React.ComponentType&lt;P&gt;):
      React.ComponentType&lt;Pick&lt;P, Exclude&lt;keyof P, keyof IWithAuthenticationProps&gt;&gt;&gt; =&gt;
      class WithAuthentication extends React.Component&lt;P&gt; {
          public render() {
  
              const { isAuthenticated, ...originalProps } = this.props as IWithAuthenticationProps; 
  
              return (
                  &lt;Component
                      {...originalProps}
                      isAuthenticated={this.isAuthenticated}
                  /&gt;
              );
          }
  
          private readonly isAuthenticated = (): boolean =&gt; {
              return true;
          }
      }
  </code></pre>
  
  <p><strong>WithRestApi.tsx</strong>, which contains the typing problem.</p>
  
  <pre><code>import * as React from 'react';
  
  import { IWithAuthenticationProps, withAuthentication } from './WithAuthentication';
  
  export interface IWithRestApiProps extends IWithAuthenticationProps {
      getResultOfApiCall: () =&gt; string;
  }
  
  export const withRestApi = &lt;P extends IWithRestApiProps&gt;(Component: React.ComponentType&lt;P&gt;):
      React.ComponentType&lt;Pick&lt;P, Exclude&lt;keyof P, keyof IWithRestApiProps&gt;&gt;&gt; =&gt;
      withAuthentication(class WithRestApi extends React.Component&lt;P&gt; {
          public render() {
  
              const { getResultOfApiCall, ...originalProps } = this.props as IWithRestApiProps; 
  
              return (
                  &lt;Component
                      {...originalProps}
                      getResultOfApiCall={this.getApiData}
                  /&gt;
              );
          }
  
          private readonly getApiData = () =&gt; {
              if (this.props.isAuthenticated()) {
                  return 'Some API result';
              } else {
                  return 'Not authenticated';
              }
          }
      }) as React.ComponentType&lt;P&gt;; // TODO - remove this type assertion...?
  </code></pre>
  
  <p>This code builds, but as you can see I've had to type-assert the return value of the <code>withApi</code> HOC to <code>React.ComponentType&lt;P&gt;</code>. Without that assertion I see this Typescript error:</p>
  
  <pre><code>[ts]
  Type 'ComponentType&lt;Pick&lt;P, Exclude&lt;keyof P, "isAuthenticated"&gt;&gt;&gt;' is not assignable to type 'ComponentType&lt;Pick&lt;P, Exclude&lt;keyof P, "getResultOfApiCall" | "isAuthenticated"&gt;&gt;&gt;'.
    Type 'ComponentClass&lt;Pick&lt;P, Exclude&lt;keyof P, "isAuthenticated"&gt;&gt;, ComponentState&gt;' is not assignable to type 'ComponentType&lt;Pick&lt;P, Exclude&lt;keyof P, "getResultOfApiCall" | "isAuthenticated"&gt;&gt;&gt;'.
      Type 'ComponentClass&lt;Pick&lt;P, Exclude&lt;keyof P, "isAuthenticated"&gt;&gt;, ComponentState&gt;' is not assignable to type 'ComponentClass&lt;Pick&lt;P, Exclude&lt;keyof P, "getResultOfApiCall" | "isAuthenticated"&gt;&gt;, ComponentState&gt;'.
        Type 'Pick&lt;P, Exclude&lt;keyof P, "isAuthenticated"&gt;&gt;' is not assignable to type 'Pick&lt;P, Exclude&lt;keyof P, "getResultOfApiCall" | "isAuthenticated"&gt;&gt;'.
          Type 'Exclude&lt;keyof P, "getResultOfApiCall" | "isAuthenticated"&gt;' is not assignable to type 'Exclude&lt;keyof P, "isAuthenticated"&gt;'.
  </code></pre>
  
  <p>This is the first time I've run into a need for <code>Pick..Exclude</code>, so am a little hazy on exactly how the type is being matched in this case. I'm wondering if there's something about the way I'm using it here that could be improved to remove the need for the type assertion?</p>