<p dir="auto">After upgrading to styled-components 5.0.1 from 4.1.9, we're getting these errors.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TS2589: Type instantiation is excessively deep and possibly infinite."><pre class="notranslate"><code class="notranslate">TS2589: Type instantiation is excessively deep and possibly infinite.
</code></pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/styled-components</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igorbek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igorbek">@Igorbek</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igmat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igmat">@Igmat</a> @Lavoaster <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Jessidhia/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Jessidhia">@Jessidhia</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jkillian/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jkillian">@jkillian</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/eps1lon">@eps1lon</a> @flavordaaave <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/wagerfield/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/wagerfield">@wagerfield</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Lazyuki/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Lazyuki">@Lazyuki</a> @mgoszcz2</li>
</ul>
</li>
</ul>
<p dir="auto">Here's a <a href="http://www.typescriptlang.org/play/index.html?downlevelIteration=true&amp;noUnusedLocals=true&amp;noUnusedParameters=true&amp;jsx=2#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUKJLHKjAJ4A2WAJnERLl23PgFpcJSADss0mKlqNGAegQJGiOABEsqXFGAAjPXBgALLGawAPQtBRxJ4CLPkA6TQhWNg8rFAEeFYAktrAAG7AvAFwAN6aKKgA-ABccADWWBwQBHAAUgDKABruIfKG0qjAuACiPCByCvQMcNZ2aWwwlQDmLQC+ygxqGq1IAEJoVlgNTXAA7sAWXdx+PShgYFzAfJ5jPgySVfCTqFYAvCs8vO68kQA8YZHRAQB8AAaJd6hbyBzpBB4NhabWQ2x60jESywIFQ6SMU22shaiQAZKlUiYCNAsAAaNEY5AEGCxBKtNpOVwk+TpMhKcltb6-f5wIxcCC4DIgimQaowYCudKULjIfkRLDctowCBgdJidwAVlskrglmAPXMMHSAEYwMDEm1FrwLDqAAymgCkKoRnJ6xAArtJeOlcPaoJR5ABhCDsqDcwbk9GYrDYyjxA1wEDIKA9PxiQwarVwAAcev9BNSRJJUHDDMj0djkJ4xPSqf15ID7xRh1c7DgABVbPBLiJru4fshpJ9yYDbDq4KaUPbpS0q0MRl4dM8YjnnDI5hZRXAPTP0J24DMYXNFss7lEZ1c1hstjsbl4Dkc6+F9wF0tg8DB3AAxT2Pa8vKCvOCXAAUcXaMC4nA7ggZQdb9AAlN+X4-ok9ynFYJJ2OccRITA-TxCB7hgehy4+lg5wAERnGA0aitAhGvBG9yNnYryoU2-T3CotEwFR5LMQh7EQdWtgsPAMRBPaXDwO+M4tEAA" rel="nofollow">playground link</a> that <strong><em>DOESN'T</em></strong> show the error, but this error in an actual project will definitely show. In our case, in many multiple files. Everything was fine before the update.</p>
<p dir="auto">The error shows on <code class="notranslate">text={text} {...rest} role="separator"</code> and disappears when removing <code class="notranslate">{...rest}</code>.</p>
<p dir="auto">All is well if I don't upgrade this package, even when I <em>do</em> upgrade styled-components itself.</p>
<p dir="auto">It might help to know as well that we're on Typescript 3.8.3. Perhaps a newer typescript is stricter in some magical way, although I seriously doubt they'd introduce such impressively strange breaking changes.</p>
<p dir="auto"><strong>TypeScript Version:</strong>  3.7.2, 3.8.0-dev.20191102 (worked in 3.6)</p>

<p dir="auto"><strong>Search Terms:</strong></p>
<ul dir="auto">
<li>Type instantiation is excessively deep and possibly infinite.ts(2589)</li>
<li>Mapped types</li>
<li>Generics</li>
<li>Conditional types</li>
</ul>
<p dir="auto"><strong>Code</strong></p>
<p dir="auto">Note: <strong>this issue manifests itself only in our codebase</strong>. When you run the same code in TypeScript Playground, it seems to be working fine.</p>
<p dir="auto">The snippet is hardly minimal, but I reduced it as much as I could. I recorded <a href="https://streamable.com/pjkrk" rel="nofollow">a video</a> where exactly the same code yields an error different than the one in TypeScript Playground. I tried with two versions of TypeScript: <code class="notranslate">3.7.2</code> and <code class="notranslate">3.8.0-dev.20191102</code>. It worked correctly with <code class="notranslate">3.6</code>.</p>
<p dir="auto">Since <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sheetalkamat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sheetalkamat">@sheetalkamat</a> and <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/DanielRosenwasser/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/DanielRosenwasser">@DanielRosenwasser</a> have access to our repository, you're welcome to have a look at <a href="https://github.com/unsplash/unsplash-web/pull/4243">this PR</a>. Copy-paste the code below anywhere in the project to see the error.</p>
<p dir="auto">The versions of types used:</p>
<ul dir="auto">
<li><code class="notranslate">@types/history@4.7.3</code></li>
<li><code class="notranslate">@types/react@16.9.11</code></li>
<li><code class="notranslate">@types/react-router-dom@5.1.0</code></li>
<li><code class="notranslate">@types/recompose@0.30.7</code></li>
</ul>
<p dir="auto"><strong>Note</strong>: Interestingly enough, if you change:</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="- declare const Button: React.FunctionComponent&lt;Omit&lt;Props, never&gt;&gt;;
+ declare const Button: React.FunctionComponent&lt;Props&gt;;"><pre class="notranslate"><span class="pl-md"><span class="pl-md">-</span> declare const Button: React.FunctionComponent&lt;Omit&lt;Props, never&gt;&gt;;</span>
<span class="pl-mi1"><span class="pl-mi1">+</span> declare const Button: React.FunctionComponent&lt;Props&gt;;</span></pre></div>
<p dir="auto">it works again despite the fact <code class="notranslate">Omit&lt;Props, never&gt;</code> should be the same as just <code class="notranslate">Props</code>.</p>
<details>
<summary>Source code</summary>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { History } from 'history'; // &quot;4.7.3&quot;
import * as React from 'react'; // &quot;16.9.11&quot;
import { LinkProps, RouteComponentProps, withRouter } from 'react-router-dom'; // &quot;5.1.0&quot;
import { getDisplayName } from 'recompose'; // &quot;0.30.7&quot;

declare function isDefined&lt;T&gt;(candidate: T | null | undefined): candidate is T;
declare function isString(value?: any): value is string;

type ObjectOmit&lt;T extends K, K&gt; = Omit&lt;T, keyof K&gt;;

type OnClick = NonNullable&lt;React.ComponentProps&lt;'button'&gt;['onClick']&gt;;

type OnClickProp = {
  /** If there is a custom click handler, we must preserve it. */
  onClick?: OnClick;
};

type ProvidedProps = OnClickProp;

type InputProps = OnClickProp &amp; {
  /** Note: we want this helper to work with all sorts of modals, not just those backed by query
   * parameters (e.g. `/photo/:id/info`), which is why this must accept a full location instead of a
   * `Modal` type.
   * */
  to: Exclude&lt;LinkProps['to'], Function&gt;;
};

const buildClickHandler = ({
  to,
  onClick,
  history,
}: InputProps &amp; {
  history: History;
}): OnClick =&gt; {
  const navigate = () =&gt; {
    // https://github.com/Microsoft/TypeScript/issues/14107
    isString(to) ? history.push(to) : history.push(to);
  };

  return event =&gt; {
    [onClick, navigate].filter(isDefined).forEach(callback =&gt; callback(event));
  };
};

/** See the test for an example of usage. */
export const enhance = &lt;ComposedProps extends ProvidedProps&gt;(
  ComposedComponent: React.ComponentType&lt;ComposedProps&gt;,
) =&gt; {
  type PassThroughComposedProps = ObjectOmit&lt;ComposedProps, ProvidedProps&gt;;
  type OwnProps = InputProps &amp; RouteComponentProps&lt;never&gt; &amp; PassThroughComposedProps;
  type Props = OwnProps;

  const displayName = `CreateModalLink(${getDisplayName(ComposedComponent)})`;

  const ModalLink: React.FunctionComponent&lt;Props&gt; = ({
    to,
    onClick,

    history,
    // We specify these just to omit them from rest props below
    location,
    match,
    staticContext,

    ...passThroughComposedProps
  }) =&gt; {
    const clickHandler = buildClickHandler({ to, onClick, history });

    const composedProps: ComposedProps = {
      // Note: this is technically unsafe, since the composed component may have props
      // with names matching the ones we're omitting.
      // https://github.com/microsoft/TypeScript/issues/28884#issuecomment-503540848
      ...((passThroughComposedProps as unknown) as PassThroughComposedProps),
      onClick: clickHandler,
    } as ComposedProps;

    return &lt;ComposedComponent {...composedProps} /&gt;;
  };

  ModalLink.displayName = displayName;

  return withRouter(ModalLink);
};

type Props = React.ComponentPropsWithoutRef&lt;'button'&gt; &amp;
  Required&lt;Pick&lt;React.ComponentPropsWithoutRef&lt;'button'&gt;, 'type'&gt;&gt;;

/**
 * This one errors.
 */
declare const Button: React.FunctionComponent&lt;Omit&lt;Props, never&gt;&gt;;

/**
 * This one works.
 */
// declare const Button: React.FunctionComponent&lt;Props&gt;;

const EnhancedButton = enhance(Button);

/**
 * Type instantiation is excessively deep and possibly infinite.ts(2589).
 */
() =&gt; &lt;EnhancedButton&gt;&lt;/EnhancedButton&gt;;

"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">History</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'history'</span><span class="pl-kos">;</span> <span class="pl-c">// "4.7.3"</span>
<span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span> <span class="pl-c">// "16.9.11"</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">LinkProps</span><span class="pl-kos">,</span> <span class="pl-smi">RouteComponentProps</span><span class="pl-kos">,</span> <span class="pl-s1">withRouter</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-router-dom'</span><span class="pl-kos">;</span> <span class="pl-c">// "5.1.0"</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">getDisplayName</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'recompose'</span><span class="pl-kos">;</span> <span class="pl-c">// "0.30.7"</span>

<span class="pl-k">declare</span> <span class="pl-k">function</span> <span class="pl-s1">isDefined</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">candidate</span>: <span class="pl-smi">T</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span><span class="pl-kos">)</span>: <span class="pl-s1">candidate</span> is <span class="pl-smi">T</span><span class="pl-kos">;</span>
<span class="pl-k">declare</span> <span class="pl-k">function</span> <span class="pl-s1">isString</span><span class="pl-kos">(</span><span class="pl-s1">value</span>?: <span class="pl-smi">any</span><span class="pl-kos">)</span>: <span class="pl-s1">value</span> is <span class="pl-smi">string</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">ObjectOmit</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-smi">K</span><span class="pl-kos">,</span> <span class="pl-smi">K</span><span class="pl-c1">&gt;</span> <span class="pl-c1">=</span> <span class="pl-smi">Omit</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-k">keyof</span> <span class="pl-smi">K</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">OnClick</span> <span class="pl-c1">=</span> <span class="pl-smi">NonNullable</span><span class="pl-kos">&lt;</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentProps</span><span class="pl-kos">&lt;</span><span class="pl-s">'button'</span><span class="pl-kos">&gt;</span><span class="pl-kos">[</span><span class="pl-s">'onClick'</span><span class="pl-kos">]</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">OnClickProp</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c">/** If there is a custom click handler, we must preserve it. */</span>
  <span class="pl-c1">onClick</span>?: <span class="pl-smi">OnClick</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">ProvidedProps</span> <span class="pl-c1">=</span> <span class="pl-smi">OnClickProp</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">InputProps</span> <span class="pl-c1">=</span> <span class="pl-smi">OnClickProp</span> <span class="pl-c1">&amp;</span> <span class="pl-kos">{</span>
  <span class="pl-c">/** Note: we want this helper to work with all sorts of modals, not just those backed by query</span>
<span class="pl-c">   * parameters (e.g. `/photo/:id/info`), which is why this must accept a full location instead of a</span>
<span class="pl-c">   * `Modal` type.</span>
<span class="pl-c">   * */</span>
  <span class="pl-c1">to</span>: <span class="pl-smi">Exclude</span><span class="pl-kos">&lt;</span><span class="pl-smi">LinkProps</span><span class="pl-kos">[</span><span class="pl-s">'to'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-smi">Function</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-en">buildClickHandler</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
  to<span class="pl-kos">,</span>
  onClick<span class="pl-kos">,</span>
  history<span class="pl-kos">,</span>
<span class="pl-kos">}</span>: <span class="pl-smi">InputProps</span> <span class="pl-c1">&amp;</span> <span class="pl-kos">{</span>
  <span class="pl-c1">history</span>: <span class="pl-smi">History</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>: <span class="pl-smi">OnClick</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-en">navigate</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-c">// https://github.com/Microsoft/TypeScript/issues/14107</span>
    <span class="pl-en">isString</span><span class="pl-kos">(</span><span class="pl-s1">to</span><span class="pl-kos">)</span> ? <span class="pl-s1">history</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">to</span><span class="pl-kos">)</span> : <span class="pl-s1">history</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">to</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-kos">[</span><span class="pl-s1">onClick</span><span class="pl-kos">,</span> <span class="pl-s1">navigate</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-s1">isDefined</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-s1">callback</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">callback</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-c">/** See the test for an example of usage. */</span>
<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">enhance</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-smi">ComposedProps</span> <span class="pl-k">extends</span> <span class="pl-smi">ProvidedProps</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
  <span class="pl-smi">ComposedComponent</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentType</span><span class="pl-kos">&lt;</span><span class="pl-smi">ComposedProps</span><span class="pl-kos">&gt;</span><span class="pl-kos">,</span>
<span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">type</span> <span class="pl-smi">PassThroughComposedProps</span> <span class="pl-c1">=</span> <span class="pl-smi">ObjectOmit</span><span class="pl-kos">&lt;</span><span class="pl-smi">ComposedProps</span><span class="pl-kos">,</span> <span class="pl-smi">ProvidedProps</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-k">type</span> <span class="pl-smi">OwnProps</span> <span class="pl-c1">=</span> <span class="pl-smi">InputProps</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">RouteComponentProps</span><span class="pl-kos">&lt;</span><span class="pl-smi">never</span><span class="pl-kos">&gt;</span> <span class="pl-c1">&amp;</span> <span class="pl-smi">PassThroughComposedProps</span><span class="pl-kos">;</span>
  <span class="pl-k">type</span> <span class="pl-smi">Props</span> <span class="pl-c1">=</span> <span class="pl-smi">OwnProps</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">displayName</span> <span class="pl-c1">=</span> <span class="pl-s">`CreateModalLink(<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">getDisplayName</span><span class="pl-kos">(</span><span class="pl-smi">ComposedComponent</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>)`</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-smi">ModalLink</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">FunctionComponent</span><span class="pl-kos">&lt;</span><span class="pl-smi">Props</span><span class="pl-kos">&gt;</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
    to<span class="pl-kos">,</span>
    onClick<span class="pl-kos">,</span>

    history<span class="pl-kos">,</span>
    <span class="pl-c">// We specify these just to omit them from rest props below</span>
    location<span class="pl-kos">,</span>
    match<span class="pl-kos">,</span>
    staticContext<span class="pl-kos">,</span>

    ...<span class="pl-s1">passThroughComposedProps</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">clickHandler</span> <span class="pl-c1">=</span> <span class="pl-en">buildClickHandler</span><span class="pl-kos">(</span><span class="pl-kos">{</span> to<span class="pl-kos">,</span> onClick<span class="pl-kos">,</span> history <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">const</span> <span class="pl-s1">composedProps</span>: <span class="pl-smi">ComposedProps</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
      <span class="pl-c">// Note: this is technically unsafe, since the composed component may have props</span>
      <span class="pl-c">// with names matching the ones we're omitting.</span>
      <span class="pl-c">// https://github.com/microsoft/TypeScript/issues/28884#issuecomment-503540848</span>
      ...<span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">passThroughComposedProps</span> <span class="pl-k">as</span> <span class="pl-smi">unknown</span><span class="pl-kos">)</span> <span class="pl-k">as</span> <span class="pl-smi">PassThroughComposedProps</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c1">onClick</span>: <span class="pl-s1">clickHandler</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span> <span class="pl-k">as</span> <span class="pl-smi">ComposedProps</span><span class="pl-kos">;</span>

    <span class="pl-k">return</span> <span class="pl-kos">&lt;</span><span class="pl-smi">ComposedComponent</span><span class="pl-kos"></span> <span class="pl-kos">{</span>...<span class="pl-s1">composedProps</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-smi">ModalLink</span><span class="pl-kos">.</span><span class="pl-c1">displayName</span> <span class="pl-c1">=</span> <span class="pl-s1">displayName</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-en">withRouter</span><span class="pl-kos">(</span><span class="pl-smi">ModalLink</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">Props</span> <span class="pl-c1">=</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentPropsWithoutRef</span><span class="pl-kos">&lt;</span><span class="pl-s">'button'</span><span class="pl-kos">&gt;</span> <span class="pl-c1">&amp;</span>
  <span class="pl-smi">Required</span><span class="pl-kos">&lt;</span><span class="pl-smi">Pick</span><span class="pl-kos">&lt;</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentPropsWithoutRef</span><span class="pl-kos">&lt;</span><span class="pl-s">'button'</span><span class="pl-kos">&gt;</span><span class="pl-kos">,</span> <span class="pl-s">'type'</span><span class="pl-kos">&gt;</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * This one errors.</span>
<span class="pl-c"> */</span>
<span class="pl-k">declare</span> <span class="pl-k">const</span> <span class="pl-smi">Button</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">FunctionComponent</span><span class="pl-kos">&lt;</span><span class="pl-smi">Omit</span><span class="pl-kos">&lt;</span><span class="pl-smi">Props</span><span class="pl-kos">,</span> <span class="pl-smi">never</span><span class="pl-kos">&gt;</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * This one works.</span>
<span class="pl-c"> */</span>
<span class="pl-c">// declare const Button: React.FunctionComponent&lt;Props&gt;;</span>

<span class="pl-k">const</span> <span class="pl-smi">EnhancedButton</span> <span class="pl-c1">=</span> <span class="pl-en">enhance</span><span class="pl-kos">(</span><span class="pl-smi">Button</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * Type instantiation is excessively deep and possibly infinite.ts(2589).</span>
<span class="pl-c"> */</span>
<span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">&lt;</span><span class="pl-smi">EnhancedButton</span><span class="pl-kos">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">EnhancedButton</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
</pre></div>
</details>
<p dir="auto"><strong>Expected behavior:</strong></p>
<p dir="auto">I should get a proper error about missing properties (not the one about type instantiation):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Type '{}' is missing the following properties from type 'Readonly&lt;Pick&lt;OwnProps, &quot;form&quot; | &quot;style&quot; | &quot;title&quot; | &quot;onClick&quot; | &quot;to&quot; | &quot;key&quot; | &quot;autoFocus&quot; | &quot;disabled&quot; | &quot;formAction&quot; | &quot;formEncType&quot; | &quot;formMethod&quot; | &quot;formNoValidate&quot; | &quot;formTarget&quot; | ... 252 more ... | &quot;onTransitionEndCapture&quot;&gt;&gt;': to, type(2739)"><pre class="notranslate"><code class="notranslate">Type '{}' is missing the following properties from type 'Readonly&lt;Pick&lt;OwnProps, "form" | "style" | "title" | "onClick" | "to" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | ... 252 more ... | "onTransitionEndCapture"&gt;&gt;': to, type(2739)
</code></pre></div>
<p dir="auto"><strong>Actual behavior:</strong></p>
<p dir="auto">I'm getting this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Type instantiation is excessively deep and possibly infinite.ts(2589)."><pre class="notranslate"><code class="notranslate">Type instantiation is excessively deep and possibly infinite.ts(2589).
</code></pre></div>
<p dir="auto"><strong>Playground Link:</strong> </p>
<p dir="auto"><a href="https://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAbzgCWAZxtAnnAvnAMyghDgHIALdTKLMgbgChRJY4AqOAQzTgCUAplwDG8IiXJQhohs3DR4SADLAAdgGsACsTBoANPwgBXGAIDCJSKoGqY2iLoMB3YDAp9jpqHkLFSZKREYAFpiEwEoYIATElkWBUQ4AHMBGAARdDAAGy4sADkuEAEfcX8pYUsINAFZRiiBYRypQiNVUWAIVTh0NIECNQEogB4AFQA+AAphLlUo4CiuUwAuOBG4AB84VSMsrI24Vvr+6yiAShXp2fnF4vRVpnrGrmaCVvbO7rQAZRgoNSSJgA3LhZIwCAD8KxmWHOcGBoNuvAwf1USSYjBgWDAxQA8gAjABWDRgOJArlGcAEAA9TLNeABpAz0sZwAC8cFJ5JGBnUAiwEAIcGZ6Mx2I5qjMWWAwnUbLgeU6eR2OTxWQEQ0EQQAdBZ5NZbPZdEMyHiTJhVGQxgBtMidSXS9RkAC6YxFWNxEqlMsNcoQjDgcAA9OxOABJQVuCKI7hwYRGDASRoOuAUGZRNVQZzFEDx+BgKTVKCA24wLUcQP+uB2r3qSHi+0ypi4N1i+yA+aDQ28dk4z0Ow0t4qh1RgExduW9htaHRwABkiErwc4CuWcCcxScM3gbjuFAEWWx3kwa+gspcbm4uzgaAUvAFcBAEAWWX0Wwg8AJubgbiqxTxIl5KI4DxHAAEcwVoSsODgMBnkKVIIl4CYBC1JIywAA0DMAKHfCBAyWeZAzUAgIHQ05nCoYQKE+NcKBwHdeBzDBuGEYQBDAeAuBaK8sggaYYA6Lo1AwIQgPvLgoM4dCAFknxBdDv3dLVJPLStMBWABRKlGiMeohhUDQuxtTBnQMAAxN4BM6V1GGbRhGAqVRmNNYAsiiKdkDTDM5QmP0A0wPRK2rB1AoDKgE1oQLcBWYdRzsHReHnPyU2obAVlQCKsCbWFJxrNkWWSxzmNULh2ySG4fNOfKFwDANA0DFMYBgXQlnqpJXAoIw8S1CoQEDaTpWIG8CBgQMRndL5hD+DiiLQNAwTQQMAEYABYloABgAdigz4fhRAFMCq8EUsyrVRzQCgJkOuAVnCmgsDO+NLsOpgAzsyspBgIwoC6ARi1sarkoDK1gplAwSrKm4nS1fosi8CYej6AYzhh6ANJES7pl2f8ZWqrGshx9RkP+mBTlOV68CbdElzgL4BGKSNvwEZiSO8GZKSpQpsmKe94y4FIy3YCtqVYeAivgGxUzaYp2SGXVIGqKJx2pWkol4NsOyVhLJkreXf3cyp9RgFZNVEHVDZsGBxuxOXKkVrsxkCqrWQKtT3TgTQeDQEYKDCJIKD1+2EonQliU5GBbfkIOHFfDX6i1mObP892cScVRx3ZWKx2D+cPHCPWja7IZrGLKAWXnT25p9v2A7tzsEop0Vigzjk067dEA3FuA5jQbJcgKIo5XQsxAlMWTnwMomABIEBSdJMhyfJ4ImQPBgLy3TlwU50I72NOmY8eQUnk3pFLCy2isiULdsIYHZ8oHvwgULatB9RAp2u7sGfuqGoAdWKXuDRgAEHonuaocBPzMWPCQVw349ykFKHAAseZg54n3BAJwO1eL8UEt-B8iwqJ4IwIsaUFhbAq3frVOAWoaGwSrr7Yw-tV4J10JWLegMdpdyTDKTysxvLshcm5DyXkIi+UfgYV+BhP60DwOTeyVCuF1xYWgFYzCW4Px-vKd8AgVgMRoqYKiqhpQgiyDgVoaAuAEAEAYNAag2JwOKL1BWgw956ktvgnAqZiwwQSjtTR55qIlSKIxAhVBUQOKrNYXg64Ag8zJE1f4ykqGaIoE1FqbUOpdR6iQQMZIppVAFKNa2AhJrTVGugeazNAwACYAAc9SVoAGIKlgl6kUWwwQACs60ADMnSVrrVqStWpfjqE0ImBMOh3sGFGCYUo8cPADgaFUBg1QVVFmV2mTXNRCVyKjNfhcGsvD0wRDwfgRZOyY67wDJ9b6XRI7OINm4gGCAaHZKjvXGO+BAxJ0pvIuAh8siTy1D3PuS9B7slBYvAeAhd63J+muDqed4aAsnnI96TcPbB3ZKbUs68DQJV-h1TwggCDGlNE1Tolo5yVkEOBYAUhhiaAdBqU+5tnnxRjkSn8JhSXkrNFSx25Am6WhsowJc-pOA+zuJ0YoERiBQDQEkoWdQGhNEcfveAAAhAVqgT7anPu8K+HKhjh1vglcGf0IhjDFRK6C0q7zWBPFAdQSrJUVnqt3NVzwNVOW1bq-VZtDWX3xRHB26Iu4aVUFLNiUQdWUq6OySWMw2ITHjeaOR4qQyStWO7YSMAtzABIR8O41I2JzWAMWUxXr2LcFmDBKotjVQ4GImoVwKEYBoAmNUzptSACcpxlUVgmM7FkQwo0xsGOm6yQxAwTpTVO3VYqgA" rel="nofollow">Playground Link</a></p>
<p dir="auto"><strong>Related Issues:</strong> </p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="477467243" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/32735" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/32735/hovercard" href="https://github.com/microsoft/TypeScript/issues/32735">#32735</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="515650563" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/34850" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/34850/hovercard" href="https://github.com/microsoft/TypeScript/issues/34850">#34850</a></li>
</ul>