<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: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tkqubo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tkqubo">@tkqubo</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/seansfkelley/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/seansfkelley">@seansfkelley</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/thasner/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/thasner">@thasner</a> @kenzierocks <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/clayne11/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/clayne11">@clayne11</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tansongyang/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tansongyang">@tansongyang</a></li>
</ul>
</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &quot;devDependencies&quot;: {
    &quot;typescript&quot;: &quot;^2.4.2&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@types/react-redux&quot;: &quot;5.0.3&quot;,
    &quot;react&quot;: &quot;^15.6.1&quot;,
    &quot;react-redux&quot;: &quot;^5.0.6&quot;,
    &quot;redux&quot;: &quot;^3.7.2&quot;
  }"><pre class="notranslate"><code class="notranslate">  "devDependencies": {
    "typescript": "^2.4.2"
  },
  "dependencies": {
    "@types/react-redux": "5.0.3",
    "react": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  }
</code></pre></div>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import { connect } from 'react-redux';

@connect()
class MyComponent extends React.Component&lt;any, any&gt; {
    get property(): string { return &quot;value&quot; }
}"><pre class="notranslate"><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-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-en">connect</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MyComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">,</span> <span class="pl-smi">any</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">get</span> <span class="pl-en">property</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">string</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s">"value"</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Error on <code class="notranslate">@connect</code> line:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass&lt;Pick&lt;any, any&gt;&gt;' is not assignable to type 'typeof MyComponent'.
    Type 'Component&lt;Pick&lt;any, any&gt;, ComponentState&gt;' is not assignable to type 'MyComponent'.
      Property 'property' is missing in type 'Component&lt;Pick&lt;any, any&gt;, ComponentState&gt;'."><pre class="notranslate"><code class="notranslate">Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass&lt;Pick&lt;any, any&gt;&gt;' is not assignable to type 'typeof MyComponent'.
    Type 'Component&lt;Pick&lt;any, any&gt;, ComponentState&gt;' is not assignable to type 'MyComponent'.
      Property 'property' is missing in type 'Component&lt;Pick&lt;any, any&gt;, ComponentState&gt;'.
</code></pre></div>
<p dir="auto">It does not even work with just simple <code class="notranslate">render()</code> either:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@connect()
class MyComponent extends React.Component&lt;any, any&gt; {
    render() {
        return (&lt;div&gt;&lt;/div&gt;);
    }
}"><pre class="notranslate">@<span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MyComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">,</span> <span class="pl-smi">any</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">(</span><span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">div</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-kos">}</span></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass&lt;Pick&lt;any, any&gt;&gt;' is not assignable to type 'typeof MyComponent'.
    Type 'Component&lt;Pick&lt;any, any&gt;, ComponentState&gt;' is not assignable to type 'MyComponent'.
      Types of property 'render' are incompatible.
        Type '() =&gt; false | Element' is not assignable to type '() =&gt; Element'.
          Type 'false | Element' is not assignable to type 'Element'.
            Type 'false' is not assignable to type 'Element'."><pre class="notranslate"><code class="notranslate">Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass&lt;Pick&lt;any, any&gt;&gt;' is not assignable to type 'typeof MyComponent'.
    Type 'Component&lt;Pick&lt;any, any&gt;, ComponentState&gt;' is not assignable to type 'MyComponent'.
      Types of property 'render' are incompatible.
        Type '() =&gt; false | Element' is not assignable to type '() =&gt; Element'.
          Type 'false | Element' is not assignable to type 'Element'.
            Type 'false' is not assignable to type 'Element'.
</code></pre></div>
<p dir="auto">It works with an empty Component class (which is covered by a test case) but it's just an useless trivial situation.</p>
<p dir="auto">Trying to use <a href="https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options">react-redux's <code class="notranslate">connect</code></a> as a class decorator can cause error messages of the form <code class="notranslate">Type 'foo' is not assignable to type 'void'</code>. The issue with these typings seems to be that <a href="https://github.com/Microsoft/TypeScript/issues/4881" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/4881/hovercard">TypeScript doesn't allow <code class="notranslate">ClassDecorator</code>s to change the signature of the thing that they decorate</a>, but <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d417f687ab0c81ed72bffbc5dace5f643369bb70/react-redux/react-redux.d.ts#L14">this is the current implementation of the react-redux typings</a> and is done purposefully, since <a href="https://github.com/reactjs/react-redux/blob/master/docs/api.md#remarks">react-redux returns a different instance with a different signature for the props</a>.</p>
<p dir="auto">Using <code class="notranslate">connect</code> as a function works as expected; it's only the usage as a decorator that causes type problems.</p>
<p dir="auto">Suggestions are welcome, but any proposed solutions should be a strict improvement on what the typings can currently express, which is to say, sacrificing the current correctness of the usage-as-a-function typings is not acceptable (partly because that would be a severe regression and partly because decorators are deemed "experimental" and therefore, I assert, secondary to standard function usage).</p>
<p dir="auto">I don't know that a complete solution to the decorator-typing problem is possible while <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="107375551" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/4881" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/4881/hovercard" href="https://github.com/microsoft/TypeScript/issues/4881">microsoft/TypeScript#4881</a> is outstanding. That said, there are incremental improvements in this case, such as by (first pass) outputting any kind of <code class="notranslate">React.ComponentClass</code> so the code at least compiles, then (second pass) outputting a component that accepts the intersection of all the props (own as well as connected), even though that would be too lenient, so the code type checks at least some of the props.</p>
<p dir="auto">The only workaround I have right now is to not use <code class="notranslate">connect</code> as a decorator. Some may find it ugly stylistically, but it type-checks correctly, isn't any lengthier and is usable in more places than a decorator.</p>
<p dir="auto">Instead of:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@connect(mapStateToProps, mapDispatchToProps)
class MyComponent extends React.Component&lt;...&gt; { ... }"><pre class="notranslate">@<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-s1">mapDispatchToProps</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MyComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-c1">&lt;</span>...<span class="pl-c1">&gt;</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span></pre></div>
<p dir="auto">use (something along the lines of):</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class MyComponentImpl extends React.Component&lt;...&gt; { ... }
const MyComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponentImpl);"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">MyComponentImpl</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-c1">&lt;</span>...<span class="pl-c1">&gt;</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span>
<span class="pl-k">const</span> <span class="pl-smi">MyComponent</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-s1">mapDispatchToProps</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-smi">MyComponentImpl</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Note that <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="144688052" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787" data-hovercard-type="issue" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/issues/8787/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787">#8787</a> comes into play here and is sometimes conflated with this issue. You may also want a type hint or a cast to make sure the output component has the proper type.</p>
<p dir="auto">Edit: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="188141684" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/12114" data-hovercard-type="pull_request" data-hovercard-url="/microsoft/TypeScript/pull/12114/hovercard" href="https://github.com/microsoft/TypeScript/pull/12114">microsoft/TypeScript#12114</a> may help with this case: the decorator could potentially be written to create an all-optional version of the props for the generated component, which isn't totally ideal but continues to let your implementation be more assertive about prop nullity.</p>