title: Spread operator with React Props in Typescript (error: ...could be instantiated with a different subtype of constraint {})
body: <p>I am trying to write a Higher Order Component in React using Typescript that receives the props, 'consumes' one of them and then passes on the remainder to the Child component.</p>
  
  <pre><code>function testConnect&lt;T&gt;(Child: React.ComponentType&lt;T&gt;): React.ComponentType&lt;T&gt; {
  
    type InitialState = {
      iS: StoreShape.State;
    };
  
    type LAP = InitialState &amp; T;
  
    const Connector = (props: LAP) =&gt; {
      const { iS, ...rest } = props;
      // do something with iS
      return (
        &lt;Child // Visual Studio complains about this line.
          {...rest}
        /&gt;
      );
    };
  
    return Connector;
  }
  </code></pre>
  
  <p>However this fails with the error: <code>'Pick&lt;LAP, Exclude&lt;keyof T, "iS"&gt;&gt;' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{}'</code></p>
  
  <p>I would like to know not only if there's anything I can do about it, but also why this happens at all.</p>