<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: <code class="notranslate">3.6.4</code></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 <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/4a4375a3acedf893aaed1ee39fcec7f48b2ec8be/types/styled-components/index.d.ts#L3-L10"><code class="notranslate">Definitions by:</code> in <code class="notranslate">types/styled-components/index.d.ts</code></a>) 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></li>
</ul>
</li>
</ul>
<p dir="auto">From <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="510085223" data-permission-text="Title is private" data-url="https://github.com/styled-components/styled-components/issues/2823" data-hovercard-type="issue" data-hovercard-url="/styled-components/styled-components/issues/2823/hovercard" href="https://github.com/styled-components/styled-components/issues/2823">styled-components/styled-components#2823</a>:</p>

<h2 dir="auto">Environment</h2>
<h3 dir="auto">System:</h3>
<ul dir="auto">
<li>OS: macOS 10.15</li>
<li>CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz</li>
<li>Memory: 8.08 GB / 32.00 GB</li>
<li>Shell: 5.7.1 - /bin/zsh</li>
</ul>
<h3 dir="auto">Binaries:</h3>
<ul dir="auto">
<li>Node: 12.12.0 - /usr/local/bin/node</li>
<li>npm: 6.11.3 - /usr/local/bin/npm</li>
</ul>
<h3 dir="auto">npm Packages:</h3>
<ul dir="auto">
<li>react: ^16.10.2 =&gt; 16.10.2</li>
<li>styled-components: ^4.4.0 =&gt; 4.4.0</li>
<li>@types/react: ^16.9.9 =&gt; 16.9.9</li>
<li>@types/styled-components: ^4.1.19 =&gt; 4.1.19</li>
<li>typescript: ^3.6.4 =&gt; 3.6.4</li>
</ul>
<h2 dir="auto">Reproduction</h2>
<p dir="auto"><a href="https://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wChRJY4BnGATwBskATObXA2xlgWjV0gA7JIJjV8AblKkA9DLgAVOmCTVyopFEzokiFMEF0AIijoAFHGGpwA3qTgO49FQC44AIij7D7qY5oAFhAA7gCqIABGRAwMKACS-IJuERAQTCiCUgC+6jCa2mi6AMoAroKGJuaW1nb+zkhu7tRlPn6O1EHBpYLUaEQiCRBJcClpqJmkOfVwAOqoMAGaM8DMAOZIMBYQVnAAvHoGxqZbOwA+cN0Vx9VSsvIActAgKAxw-OBDImKkmGUYwENZvNFlBlmsNgAKMDVNxzFALJYrdabaoASjcACkigANAB0AFEmCAvrZ7I4mPBgkiNnsPFTwTBfNJ-MBMHAodVcdNdjyPF5Du5UaT-P56cjadDttRcR0QuEokgYvFEnAAPweQBAZIB4P-ccEaJUi0ViTP8WTgiuoulZ7MlVi5yl0PP2TRadEFwpFDjFNP2tulsq6ZV6-UEg0Eao8gD4NwAvu7rGs0en0kCITY4cmSHEQYCUoOGADzMYAANwAfMhiZFNHA6BAc7ZvTAsgBCPMyQul7KkJAAD0o8EStAOVzoAGEBJ9RLS83CEaDqfB6rtPN43YE5YbFbEw7sbDAoCUkGaZCWpD2+28hoPLkdR+PhJP9tPgYiGU4HUuEz414HEyHt7v90POBj1uOQLnoJhWHeIQvjUAd4CKCCWBnEEwXFfYuEgiEUJfZFUQAA3wrte2gftLwQpDmAQFdKjHD573gR9EO4ZgcLnV9F2XAVv3lI1lSGHc9wPI8T2I894PAljr1ou8SSYyi2LQmlOM-VcA26YNk1DRJBMAkSJCAA" rel="nofollow">TypeScript playground</a></p>
<details>
<summary><b>Source</b>, in case the TypeScript playground link above doesn’t work</summary>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import styled from 'styled-components';

// Types
interface RainyDayProps {
    type: &quot;rainy&quot;;
    showUmbrellaIcon: boolean;
}
interface SunnyDayProps {
    type: &quot;sunny&quot;;
    showSunscreenIcon: boolean;
}
type WeatherWidgetProps = RainyDayProps | SunnyDayProps;

// Normal components
function WeatherWidget(props: WeatherWidgetProps): JSX.Element {
    let widget = &quot;widget&quot;;

    if (props.type === &quot;rainy&quot;) {
        widget = props.showUmbrellaIcon ? &quot;☂️&quot; : &quot;umbrella&quot;;
    } else if (props.type === &quot;sunny&quot;) {
        widget = props.showSunscreenIcon ? &quot;🧴&quot; : &quot;sunscreen&quot;;
    }

    return &lt;div&gt;Remember your {widget}!&lt;/div&gt;;
}
export const RainyDayComponent = &lt;WeatherWidget type=&quot;rainy&quot; showUmbrellaIcon={true} /&gt;;
export const SunnyDayComponent = &lt;WeatherWidget type=&quot;sunny&quot; showSunscreenIcon={true} /&gt;;

// Styled components
const StyledWeatherWidget = styled(WeatherWidget)``
export const StyledRainyDayComponent = &lt;StyledWeatherWidget type=&quot;rainy&quot; showUmbrellaIcon={true} /&gt;;
export const StyledSunnyDayComponent = &lt;StyledWeatherWidget type=&quot;sunny&quot; showSunscreenIcon={true} /&gt;;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-s1">styled</span> <span class="pl-k">from</span> <span class="pl-s">'styled-components'</span><span class="pl-kos">;</span>

<span class="pl-c">// Types</span>
<span class="pl-k">interface</span> <span class="pl-smi">RainyDayProps</span> <span class="pl-kos">{</span>
    <span class="pl-c1">type</span>: <span class="pl-s">"rainy"</span><span class="pl-kos">;</span>
    <span class="pl-c1">showUmbrellaIcon</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">interface</span> <span class="pl-smi">SunnyDayProps</span> <span class="pl-kos">{</span>
    <span class="pl-c1">type</span>: <span class="pl-s">"sunny"</span><span class="pl-kos">;</span>
    <span class="pl-c1">showSunscreenIcon</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">type</span> <span class="pl-smi">WeatherWidgetProps</span> <span class="pl-c1">=</span> <span class="pl-smi">RainyDayProps</span> <span class="pl-c1">|</span> <span class="pl-smi">SunnyDayProps</span><span class="pl-kos">;</span>

<span class="pl-c">// Normal components</span>
<span class="pl-k">function</span> <span class="pl-smi">WeatherWidget</span><span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-smi">WeatherWidgetProps</span><span class="pl-kos">)</span>: <span class="pl-smi">JSX</span><span class="pl-kos">.</span><span class="pl-smi">Element</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">widget</span> <span class="pl-c1">=</span> <span class="pl-s">"widget"</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">===</span> <span class="pl-s">"rainy"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">widget</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">showUmbrellaIcon</span> ? <span class="pl-s">"☂️"</span> : <span class="pl-s">"umbrella"</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">===</span> <span class="pl-s">"sunny"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">widget</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">showSunscreenIcon</span> ? <span class="pl-s">"🧴"</span> : <span class="pl-s">"sunscreen"</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">return</span> <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-smi">Remember</span> <span class="pl-s1">your</span> <span class="pl-kos">{</span>widget<span class="pl-kos">}</span><span class="pl-c1">!</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span>div&gt;;
<span class="pl-kos">}</span>
<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-smi">RainyDayComponent</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-smi">WeatherWidget</span> <span class="pl-s1">type</span><span class="pl-c1">=</span><span class="pl-s">"rainy"</span> <span class="pl-s1">showUmbrellaIcon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span> <span class="pl-c1">/</span>&gt;;
<span class="pl-s1">export</span> <span class="pl-k">const</span> <span class="pl-smi">SunnyDayComponent</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-smi">WeatherWidget</span> <span class="pl-s1">type</span><span class="pl-c1">=</span><span class="pl-s">"sunny"</span> <span class="pl-s1">showSunscreenIcon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span> <span class="pl-c1">/</span>&gt;;

<span class="pl-c">// Styled components</span>
<span class="pl-s1">const</span> <span class="pl-smi">StyledWeatherWidget</span> <span class="pl-c1">=</span> <span class="pl-en">styled</span><span class="pl-kos">(</span><span class="pl-smi">WeatherWidget</span><span class="pl-kos">)</span><span class="pl-s">``</span>
<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-smi">StyledRainyDayComponent</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-smi">StyledWeatherWidget</span> <span class="pl-s1">type</span><span class="pl-c1">=</span><span class="pl-s">"rainy"</span> <span class="pl-s1">showUmbrellaIcon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span> <span class="pl-c1">/</span>&gt;;
<span class="pl-s1">export</span> <span class="pl-k">const</span> <span class="pl-smi">StyledSunnyDayComponent</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-smi">StyledWeatherWidget</span> <span class="pl-s1">type</span><span class="pl-c1">=</span><span class="pl-s">"sunny"</span> <span class="pl-s1">showSunscreenIcon</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span> <span class="pl-c1">/</span>&gt;;</pre></div>
</details>
<h2 dir="auto">Steps to reproduce</h2>
<p dir="auto">When a union type is passed as <code class="notranslate">styled-component</code>’s type argument, the TypeScript compiler errors. See the TypeScript playground link above—<code class="notranslate">StyledWeatherWidget</code> has red squiggles.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Both interfaces in the union type are valid contracts for the type of the styled React component’s props. As shown in the playground, the unwrapped React component accepts either set of props. Wrapping the React component with <code class="notranslate">styled-components</code> should not cause a TypeScript compiler error.</p>
<h2 dir="auto">Actual Behavior</h2>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="index.tsx:37:4 - error TS2322: Type '{ type: &quot;rainy&quot;; showUmbrellaIcon: boolean; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;WeatherWidgetProps, &quot;type&quot;&gt; &amp; Partial&lt;Pick&lt;WeatherWidgetProps, never&gt;&gt;, &quot;type&quot;&gt; &amp; { theme?: any; } &amp; { as?: &quot;symbol&quot; | &quot;object&quot; | &quot;big&quot; | ... 173 more ... | undefined; }'.
  Property 'showUmbrellaIcon' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;WeatherWidgetProps, &quot;type&quot;&gt; &amp; Partial&lt;Pick&lt;WeatherWidgetProps, never&gt;&gt;, &quot;type&quot;&gt; &amp; { theme?: any; } &amp; { as?: &quot;symbol&quot; | &quot;object&quot; | &quot;big&quot; | ... 173 more ... | undefined; }'.

37   &lt;StyledWeatherWidget type=&quot;rainy&quot; showUmbrellaIcon={true} /&gt;
      ~~~~~~~~~~~~~~~~~~~

index.tsx:40:4 - error TS2322: Type '{ type: &quot;sunny&quot;; showSunscreenIcon: boolean; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;WeatherWidgetProps, &quot;type&quot;&gt; &amp; Partial&lt;Pick&lt;WeatherWidgetProps, never&gt;&gt;, &quot;type&quot;&gt; &amp; { theme?: any; } &amp; { as?: &quot;symbol&quot; | &quot;object&quot; | &quot;big&quot; | ... 173 more ... | undefined; }'.
  Property 'showSunscreenIcon' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;WeatherWidgetProps, &quot;type&quot;&gt; &amp; Partial&lt;Pick&lt;WeatherWidgetProps, never&gt;&gt;, &quot;type&quot;&gt; &amp; { theme?: any; } &amp; { as?: &quot;symbol&quot; | &quot;object&quot; | &quot;big&quot; | ... 173 more ... | undefined; }'.

40   &lt;StyledWeatherWidget type=&quot;sunny&quot; showSunscreenIcon={true} /&gt;
      ~~~~~~~~~~~~~~~~~~~"><pre class="notranslate">index.tsx:37:4 - error TS2322: Type <span class="pl-s"><span class="pl-pds">'</span>{ type: "rainy"; showUmbrellaIcon: boolean; }<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>IntrinsicAttributes &amp; Pick&lt;Pick&lt;WeatherWidgetProps, "type"&gt; &amp; Partial&lt;Pick&lt;WeatherWidgetProps, never&gt;&gt;, "type"&gt; &amp; { theme?: any; } &amp; { as?: "symbol" | "object" | "big" | ... 173 more ... | undefined; }<span class="pl-pds">'</span></span>.
  Property <span class="pl-s"><span class="pl-pds">'</span>showUmbrellaIcon<span class="pl-pds">'</span></span> does not exist on <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>IntrinsicAttributes &amp; Pick&lt;Pick&lt;WeatherWidgetProps, "type"&gt; &amp; Partial&lt;Pick&lt;WeatherWidgetProps, never&gt;&gt;, "type"&gt; &amp; { theme?: any; } &amp; { as?: "symbol" | "object" | "big" | ... 173 more ... | undefined; }<span class="pl-pds">'</span></span>.

37   <span class="pl-k">&lt;</span>StyledWeatherWidget type=<span class="pl-s"><span class="pl-pds">"</span>rainy<span class="pl-pds">"</span></span> showUmbrellaIcon={true} /<span class="pl-k">&gt;</span>
      <span class="pl-k">~</span>~~~~~~~~~~~~~~~~~~

index.tsx:40:4 - error TS2322: Type <span class="pl-s"><span class="pl-pds">'</span>{ type: "sunny"; showSunscreenIcon: boolean; }<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>IntrinsicAttributes &amp; Pick&lt;Pick&lt;WeatherWidgetProps, "type"&gt; &amp; Partial&lt;Pick&lt;WeatherWidgetProps, never&gt;&gt;, "type"&gt; &amp; { theme?: any; } &amp; { as?: "symbol" | "object" | "big" | ... 173 more ... | undefined; }<span class="pl-pds">'</span></span>.
  Property <span class="pl-s"><span class="pl-pds">'</span>showSunscreenIcon<span class="pl-pds">'</span></span> does not exist on <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>IntrinsicAttributes &amp; Pick&lt;Pick&lt;WeatherWidgetProps, "type"&gt; &amp; Partial&lt;Pick&lt;WeatherWidgetProps, never&gt;&gt;, "type"&gt; &amp; { theme?: any; } &amp; { as?: "symbol" | "object" | "big" | ... 173 more ... | undefined; }<span class="pl-pds">'</span></span>.

40   <span class="pl-k">&lt;</span>StyledWeatherWidget type=<span class="pl-s"><span class="pl-pds">"</span>sunny<span class="pl-pds">"</span></span> showSunscreenIcon={true} /<span class="pl-k">&gt;</span>
      <span class="pl-k">~</span>~~~~~~~~~~~~~~~~~~</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</li>
</ul>
</li>
</ul>
<p dir="auto">Subject Says It All.</p>
<p dir="auto">Code:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import styled from 'styled-components'

type Props = {
  foo: number, bar?: undefined
} | {
  foo?: undefined, bar: string
}

const C1 = (porps: Props) =&gt; &lt;p /&gt;
const C2 = styled.p&lt;Props&gt;``

const T1 = &lt;C1 foo={1} bar=&quot;str&quot; /&gt; // type error
const T2 = &lt;C2 foo={1} bar=&quot;str&quot; /&gt; // no error"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">styled</span> <span class="pl-k">from</span> <span class="pl-s">'styled-components'</span>

<span class="pl-k">type</span> <span class="pl-smi">Props</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">foo</span>: <span class="pl-smi">number</span><span class="pl-kos">,</span> <span class="pl-c1">bar</span>?: <span class="pl-c1">undefined</span>
<span class="pl-kos">}</span> <span class="pl-c1">|</span> <span class="pl-kos">{</span>
  <span class="pl-c1">foo</span>?: <span class="pl-c1">undefined</span><span class="pl-kos">,</span> <span class="pl-c1">bar</span>: <span class="pl-smi">string</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-smi">C1</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">porps</span>: <span class="pl-smi">Props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">&lt;</span><span class="pl-smi">p</span> <span class="pl-c1">/</span><span class="pl-kos">&gt;</span>
<span class="pl-s1">const</span> <span class="pl-smi">C2</span> <span class="pl-c1">=</span> <span class="pl-s1">styled</span><span class="pl-kos">.</span><span class="pl-en">p</span><span class="pl-kos">&lt;</span><span class="pl-smi">Props</span><span class="pl-kos">&gt;</span><span class="pl-s">``</span>

<span class="pl-k">const</span> <span class="pl-smi">T1</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-smi">C1</span> <span class="pl-smi">foo</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span> <span class="pl-s1">bar</span><span class="pl-c1">=</span><span class="pl-s">"str"</span> <span class="pl-c1">/</span>&gt; <span class="pl-c">// type error</span>
<span class="pl-s1">const</span> <span class="pl-smi">T2</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-smi">C2</span> <span class="pl-smi">foo</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span> <span class="pl-s1">bar</span><span class="pl-c1">=</span><span class="pl-s">"str"</span> <span class="pl-c1">/</span>&gt; <span class="pl-c">// no error</span></pre></div>