<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/xxxx</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: @....</li>
</ul>
</li>
</ul>
<p dir="auto">Mentioning <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/blakeembrey/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/blakeembrey">@blakeembrey</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/andy-ms/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/andy-ms">@andy-ms</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/alecmerdler/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/alecmerdler">@alecmerdler</a> <g-emoji class="g-emoji" alias="wink" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f609.png">😉</g-emoji></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 React, { Component } from &quot;react&quot;;
import { connect } from &quot;react-redux&quot;;

import { RootState } from &quot;@src/state/state&quot;;

interface Props {
    normal: string;
    optional?: number;
}
class TestComponent extends Component&lt;Props&gt; {
    render() {
        return &lt;h1&gt;Hello&lt;/h1&gt;;
    };
}
function mapStateToProps(_state: RootState) {
    return { 
        normal: &quot;test&quot;,
        optional: 5,
    };
}
const Connected = connect(mapStateToProps)(TestComponent);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-smi">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">connect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react-redux"</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">RootState</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@src/state/state"</span><span class="pl-kos">;</span>

<span class="pl-k">interface</span> <span class="pl-smi">Props</span> <span class="pl-kos">{</span>
    <span class="pl-c1">normal</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
    <span class="pl-c1">optional</span>?: <span class="pl-smi">number</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">class</span> <span class="pl-smi">TestComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">Props</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">render</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-kos">&lt;</span><span class="pl-smi">h1</span><span class="pl-kos">&gt;</span><span class="pl-smi">Hello</span><span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>h1&gt;;</span><span class="pl-c1"></span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">mapStateToProps</span><span class="pl-kos">(</span><span class="pl-s1">_state</span>: <span class="pl-smi">RootState</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span> 
        <span class="pl-c1">normal</span>: <span class="pl-s">"test"</span><span class="pl-kos">,</span>
        <span class="pl-c1">optional</span>: <span class="pl-c1">5</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">const</span> <span class="pl-smi">Connected</span> <span class="pl-c1">=</span> <span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-s1">mapStateToProps</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-smi">TestComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ts]
Argument of type 'typeof TestComponent' is not assignable to parameter of type 'ComponentType&lt;{ normal: string; optional: number | undefined; } &amp; DispatchProp&lt;any&gt;&gt;'.
  Type 'typeof TestComponent' is not assignable to type 'StatelessComponent&lt;{ normal: string; optional: number | undefined; } &amp; DispatchProp&lt;any&gt;&gt;'.
    Type 'typeof TestComponent' provides no match for the signature '(props: { normal: string; optional: number | undefined; } &amp; DispatchProp&lt;any&gt; &amp; { children?: ReactNode; }, context?: any): ReactElement&lt;any&gt; | null'."><pre class="notranslate"><code class="notranslate">[ts]
Argument of type 'typeof TestComponent' is not assignable to parameter of type 'ComponentType&lt;{ normal: string; optional: number | undefined; } &amp; DispatchProp&lt;any&gt;&gt;'.
  Type 'typeof TestComponent' is not assignable to type 'StatelessComponent&lt;{ normal: string; optional: number | undefined; } &amp; DispatchProp&lt;any&gt;&gt;'.
    Type 'typeof TestComponent' provides no match for the signature '(props: { normal: string; optional: number | undefined; } &amp; DispatchProp&lt;any&gt; &amp; { children?: ReactNode; }, context?: any): ReactElement&lt;any&gt; | null'.
</code></pre></div>
<p dir="auto">The problem is when the <code class="notranslate">optional</code> prop is marked as optional - the <code class="notranslate">TestComponent</code> part of <code class="notranslate">connect(mapStateToProps)(TestComponent);</code> is reported red with above error code.</p>
<p dir="auto">For unknown reasons the inferred type is <code class="notranslate">StatelessComponent</code> but <code class="notranslate">TestComponent</code> is a class.<br>
When the prop is marked as <code class="notranslate">optional: number|undefined</code> all is ok, so it's a workaround for now.</p>
<p dir="auto">I just install the latest updates and I got a bunch of errors.</p>
<p dir="auto">Using</p>
<ul dir="auto">
<li>"typescript": "^2.9.1"</li>
<li>"types/react-native": "^0.55.16",</li>
</ul>
<p dir="auto">cc: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/VincentLanglet/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/VincentLanglet">@VincentLanglet</a>  <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/alloy/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/alloy">@alloy</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tkrotoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tkrotoff">@tkrotoff</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="node_modules/@types/react-native/globals.d.ts:92:14 - error TS2300: Duplicate identifier 'RequestInfo'.

92 declare type RequestInfo = Request | string;
                ~~~~~~~~~~~


node_modules/@types/react-native/index.d.ts:8751:11 - error TS2451: Cannot redeclare block-scoped variable 'console'.

8751     const console: Console;
               ~~~~~~~


node_modules/@types/react-native/index.d.ts:8759:18 - error TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

8759         readonly geolocation: Geolocation;
                      ~~~~~~~~~~~


node_modules/@types/react-native/index.d.ts:8762:11 - error TS2451: Cannot redeclare block-scoped variable 'navigator'.

8762     const navigator: Navigator;
               ~~~~~~~~~


node_modules/typescript/lib/lib.dom.d.ts:15764:13 - error TS2451: Cannot redeclare block-scoped variable 'navigator'.

15764 declare var navigator: Navigator;
                  ~~~~~~~~~


node_modules/typescript/lib/lib.dom.d.ts:15940:13 - error TS2451: Cannot redeclare block-scoped variable 'console'.

15940 declare var console: Console;
                  ~~~~~~~


node_modules/typescript/lib/lib.dom.d.ts:15997:6 - error TS2300: Duplicate identifier 'RequestInfo'.

15997 type RequestInfo = Request | string;
           ~~~~~~~~~~~"><pre class="notranslate"><code class="notranslate">node_modules/@types/react-native/globals.d.ts:92:14 - error TS2300: Duplicate identifier 'RequestInfo'.

92 declare type RequestInfo = Request | string;
                ~~~~~~~~~~~


node_modules/@types/react-native/index.d.ts:8751:11 - error TS2451: Cannot redeclare block-scoped variable 'console'.

8751     const console: Console;
               ~~~~~~~


node_modules/@types/react-native/index.d.ts:8759:18 - error TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

8759         readonly geolocation: Geolocation;
                      ~~~~~~~~~~~


node_modules/@types/react-native/index.d.ts:8762:11 - error TS2451: Cannot redeclare block-scoped variable 'navigator'.

8762     const navigator: Navigator;
               ~~~~~~~~~


node_modules/typescript/lib/lib.dom.d.ts:15764:13 - error TS2451: Cannot redeclare block-scoped variable 'navigator'.

15764 declare var navigator: Navigator;
                  ~~~~~~~~~


node_modules/typescript/lib/lib.dom.d.ts:15940:13 - error TS2451: Cannot redeclare block-scoped variable 'console'.

15940 declare var console: Console;
                  ~~~~~~~


node_modules/typescript/lib/lib.dom.d.ts:15997:6 - error TS2300: Duplicate identifier 'RequestInfo'.

15997 type RequestInfo = Request | string;
           ~~~~~~~~~~~
</code></pre></div>