title: How to isolate known properties in an intersection of a generic type and a non-generic type
body: <p>I have an HOC that takes a <code>withPaper</code> prop but does not pass it to the component it will render.</p>
  
  <pre><code>import React, { ComponentType, FC } from "react";
  import { Paper } from "@material-ui/core";
  
  interface WithOptionalPaperProps {
    withPaper?: boolean;
  }
  
  export const withOptionalPaper = &lt;Props extends object&gt;() =&gt; (
    Component: ComponentType&lt;Props&gt;
  ) =&gt; ({ withPaper, ...otherProps }: Props &amp; WithOptionalPaperProps) =&gt; {
    if (withPaper) {
      return (
        &lt;Paper&gt;
          &lt;Component {...otherProps as Props} /&gt;
        &lt;/Paper&gt;
      );
    }
    return &lt;Component {...otherProps as Props} /&gt;;
  };
  
  // Code below shows how the code above will be used.
  
  interface NonPaperedComponentProps {
    text: string;
    className: string;
  }
  
  const NonPaperedComponent: FC&lt;NonPaperedComponentProps&gt; = props =&gt; {
    return &lt;h1 className={props.className}&gt;{props.text}&lt;/h1&gt;;
  };
  
  // Code will be used like an HOC.
  // 'withPaper' prop can be optionally added to wrap the underlying component in 'Paper'
  const OptionalPaperedComponent = withOptionalPaper&lt;NonPaperedComponentProps&gt;()(
    NonPaperedComponent
  );
  
  // All props except 'withPaper' should be passed to 'NonPaperedComponent'
  const renderedComponent = (
    &lt;OptionalPaperedComponent withPaper className="Hello" text="Hello There" /&gt;
  );
  
  </code></pre>
  
  <p>I have removed the errors by type casting with <code>otherProps as Props</code>. Without them it produces the error <code>'Props' could be instantiated with a different subtype of constraint 'object'</code></p>
  
  <p><a href="https://codesandbox.io/s/gallant-shamir-z2098?file=/src/App.tsx:399-400" rel="nofollow noreferrer">https://codesandbox.io/s/gallant-shamir-z2098?file=/src/App.tsx:399-400</a></p>
  
  <p>I would have assumed that since I have destructured and isolated the known properties from <code>Props &amp; WithOptionalPaperProps</code> the types would look like this:</p>
  
  <pre><code>{
      withPaper, // type 'WithOptionalPaperProps["withPaper"]'
      ...otherProps // type 'Props'
  }
  </code></pre>
  
  <p>How do I make it that the Component the <code>withOptionalPaper</code> returns with a <code>withPaper</code> prop without passing it to its children but still passing all the other props?</p>