<p dir="auto">When targeting ES6 with the new typescript 1.5.3, the es6-promise definitions referenced in angular2.d.ts conflict with the promise definition built in to the es6 library definitions, giving a duplicate identifier error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ tsc
/usr/local/lib/node_modules/typescript/bin/lib.es6.d.ts(4775,11): error TS2300: Duplicate identifier 'Promise'.
/usr/local/lib/node_modules/typescript/bin/lib.es6.d.ts(4855,13): error TS2300: Duplicate identifier 'Promise'.
typings/es6-promise/es6-promise.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
typings/es6-promise/es6-promise.d.ts(42,16): error TS2300: Duplicate identifier 'Promise'."><pre class="notranslate"><code class="notranslate">$ tsc
/usr/local/lib/node_modules/typescript/bin/lib.es6.d.ts(4775,11): error TS2300: Duplicate identifier 'Promise'.
/usr/local/lib/node_modules/typescript/bin/lib.es6.d.ts(4855,13): error TS2300: Duplicate identifier 'Promise'.
typings/es6-promise/es6-promise.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
typings/es6-promise/es6-promise.d.ts(42,16): error TS2300: Duplicate identifier 'Promise'.
</code></pre></div>
<p dir="auto">If I remove the reference to es6-promise.d.ts in angular2.d.ts, everything compiles fine. I don't know what the best way is to handle situations like this, but perhaps having a separate angular2-es6.d.ts would work. This would basically be the existing definitions, without the reference to es6-promise. angular2.d.ts would then just reference es6-promise and angular2-es6.</p>
<p dir="auto">Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ericanderson/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ericanderson">@ericanderson</a></p>
<p dir="auto">I'm having many problems with <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/commit/9b5329839558a78550bf078c3e5f323c2f0f3b86">this change</a> when used in practice:</p>
<h2 dir="auto">Problem 1: Go To Definition</h2>
<p dir="auto">When you press Go To Definition on a property of props or state, Typescript is not able to resolve it.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface MyComponentProps {
    name: string;
}

export abstract class MyComponent extends React.Component&lt;MyComponentProps , void&gt; {
    myMethood() {
       this.props.name; //&lt;-- Go To definition in name
   }
}"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">MyComponentProps</span> <span class="pl-kos">{</span>
    <span class="pl-c1">name</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">abstract</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">MyComponentProps</span> <span class="pl-kos">,</span> <span class="pl-smi"><span class="pl-k">void</span></span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">myMethood</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-c1">name</span><span class="pl-kos">;</span> <span class="pl-c">//&lt;-- Go To definition in name</span>
   <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/720953/22306476/b6cf0942-e33f-11e6-857d-65753e636de7.png"><img src="https://cloud.githubusercontent.com/assets/720953/22306476/b6cf0942-e33f-11e6-857d-65753e636de7.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Makes sense because the member is synthetically generated, but is annoying anyway.</p>
<h2 dir="auto">Problem 2: Hierarchies of components (Generic P with constraints)</h2>
<p dir="auto">More important, if you make abstract component like this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface MyBaseProps {
    onChange?: (val: any) =&gt; void;
}

export abstract class MyBase&lt;P extends MyBaseProps&gt; extends React.Component&lt;P, void&gt; {
    myMethood() {
        this.props.onChange!(2); //The type is S[&quot;onChange&quot;] instead of (val: any) =&gt; void and so is not invocable. 
   }
}"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">MyBaseProps</span> <span class="pl-kos">{</span>
    <span class="pl-c1">onChange</span>?: <span class="pl-kos">(</span><span class="pl-s1">val</span>: <span class="pl-smi">any</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi"><span class="pl-k">void</span></span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">abstract</span> <span class="pl-k">class</span> <span class="pl-smi">MyBase</span><span class="pl-c1">&lt;</span><span class="pl-smi">P</span> <span class="pl-k">extends</span> <span class="pl-smi">MyBaseProps</span><span class="pl-c1">&gt;</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">P</span><span class="pl-kos">,</span> <span class="pl-smi"><span class="pl-k">void</span></span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">myMethood</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-c1">onChange</span><span class="pl-c1">!</span><span class="pl-kos">(</span><span class="pl-c1">2</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">//The type is S["onChange"] instead of (val: any) =&gt; void and so is not invocable. </span>
   <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">TS is able to show that there is a property onChange, but sometimes can not discover his type.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/720953/22306397/710d2ea2-e33f-11e6-902a-e1d93607d473.png"><img src="https://cloud.githubusercontent.com/assets/720953/22306397/710d2ea2-e33f-11e6-902a-e1d93607d473.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>This is the most important change</strong> since if prevents me to have hierarchies of components that share common props and functionality. It looks like a problem in TS compiler but until it's fixed.</p>
<h2 dir="auto">Problem 3: Not so Readonly.</h2>
<p dir="auto">While I agree that this change captures well the functional intent of React, there are valid situations where you can modify the state imperatively, like in the constructor, and also if you change the state and call forceUpdate everithing works OK.</p>
<div class="highlight highlight-source-cs notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.state.name = &quot;John&quot;;
this.forceUpdate(); //Ok as long as you don't setState afterwards, but calling setState also is annoying with the callback. "><pre class="notranslate"><span class="pl-k">this</span><span class="pl-kos">.</span>state<span class="pl-kos">.</span>name <span class="pl-c1">=</span> <span class="pl-s"><span class="pl-s">"</span>John<span class="pl-s">"</span></span><span class="pl-kos">;</span>
<span class="pl-k">this</span><span class="pl-kos">.</span><span class="pl-en">forceUpdate</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">//Ok as long as you don't setState afterwards, but calling setState also is annoying with the callback. </span></pre></div>
<p dir="auto">Is it recomended? No.<br>
Is it forbidden? Also not, otherwise forceUpdate won't exist.</p>
<p dir="auto">Of course you could cast the state to <code class="notranslate">S</code> (or <code class="notranslate">any</code>) and make the change, but if it's a common pattern gets cumbersome.</p>
<h2 dir="auto">Conclusion: Is it worth?</h2>
<p dir="auto">I feel sad that the new shiny feature of TS makes more problems than solutions in this case, but I honestly think this is the case here.</p>
<p dir="auto">On the other side, the change of <code class="notranslate">setState</code> is great 👍 , didn't know about <code class="notranslate">Pick&lt;S,K&gt;</code>.</p>