<p dir="auto">Hi,</p>
<p dir="auto">I must say I'm new to typescript, but I try to use it with React and Redux.</p>
<p dir="auto">I met the next case, here I'm trying to use the decorator <code class="notranslate">@connect</code> together with my component:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@autobind
@connect((store) =&gt; {
    return {
        states: store.states
    };
})
export default class Index extends React.Component&lt;any, any&gt; {
    componentWillMount() {
        this.props.dispatch(loadStates())
    }
    render() {
        return (
            &lt;section className=&quot;container&quot;&gt;
                &lt;h1&gt;Webpack React&lt;/h1&gt;
                &lt;div className=&quot;panel panel-default&quot;&gt;
                    hello
                &lt;/div&gt;
            &lt;/section&gt;
        )
    }
}"><pre class="notranslate">@<span class="pl-s1">autobind</span>
@<span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">states</span>: <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-c1">states</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">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">Index</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-c1">&lt;</span><span class="pl-s1">any</span><span class="pl-kos">,</span> <span class="pl-s1">any</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">componentWillMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-en">loadStates</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</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-c1">&lt;</span><span class="pl-ent">section</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"container"</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Webpack React<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"panel panel-default"</span><span class="pl-c1">&gt;</span>
                    hello
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">section</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">During the compilation the error appears:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in ./app/pages/Index.tsx
(8,1): error TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass&lt;{}&gt;' is not assignable to type 'typeof Index'.
    Type 'Component&lt;{}, ComponentState&gt;' is not assignable to type 'Index'.
      Property 'componentWillMount' is missing in type 'Component&lt;{}, ComponentState&gt;'."><pre class="notranslate"><code class="notranslate">ERROR in ./app/pages/Index.tsx
(8,1): error TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass&lt;{}&gt;' is not assignable to type 'typeof Index'.
    Type 'Component&lt;{}, ComponentState&gt;' is not assignable to type 'Index'.
      Property 'componentWillMount' is missing in type 'Component&lt;{}, ComponentState&gt;'.
</code></pre></div>
<p dir="auto">In case I will remove the <code class="notranslate">componentWillMount</code> method from the component - there is no error.</p>
<p dir="auto">After that, I've tried to apply the <code class="notranslate">connect</code> as a function call, like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@autobind
class Index extends React.Component&lt;any, any&gt; {
    componentWillMount() {
        this.props.dispatch(loadStates())
    }

    render() {
        return (
            &lt;section className=&quot;container&quot;&gt;
                &lt;h1&gt;Webpack React&lt;/h1&gt;
                &lt;div className=&quot;panel panel-default&quot;&gt;
                    hello
                &lt;/div&gt;
            &lt;/section&gt;
        )
    }
}

export default connect((store) =&gt; {
    return {
        states: store.states
    };
})(Index);"><pre class="notranslate">@<span class="pl-s1">autobind</span>
<span class="pl-k">class</span> <span class="pl-v">Index</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-c1">&lt;</span><span class="pl-s1">any</span><span class="pl-kos">,</span> <span class="pl-s1">any</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">componentWillMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-en">loadStates</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</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-c1">&lt;</span><span class="pl-ent">section</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"container"</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Webpack React<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"panel panel-default"</span><span class="pl-c1">&gt;</span>
                    hello
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">section</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-s1">export</span> <span class="pl-k">default</span> <span class="pl-s1">connect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">states</span>: <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-c1">states</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-v">Index</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This works fine, no errors during the compilation.</p>
<p dir="auto">I really want to use decorators as long as I can. Unfortunately the produced error doesn't ring a bell to me :) I would be glad in case somebody can point me to the right direction.</p>
<p dir="auto">pinging <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/jgillich/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jgillich">@jgillich</a> as I saw you helped in the similar topic:<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="110811976" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/6237" data-hovercard-type="issue" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/issues/6237/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/6237">#6237</a></p>
<p dir="auto">Let me know if I can provide more information.</p>
<p dir="auto">Regards,</p>
<p dir="auto">One of the best 2d physics engines available: <a href="https://github.com/josephg/Chipmunk-js">https://github.com/josephg/Chipmunk-js</a></p>
<p dir="auto">Despite a low user base it has great potential and seems to be more up-to-date than the popular Box2dWeb.</p>
<p dir="auto">TypeScript definitions would be highly appreciated :)</p>