<p dir="auto">Given the following parent component:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
import React = require('react');
import ChildView = require('./child');

interface Props extends React.Props&lt;View&gt; {
  foo: string;
}

interface State {
}

class View extends React.Component&lt;Props, State&gt; {

    private removeItem = (evt: React.DragEvent) =&gt; {
    }

    render() {
        return &lt;ChildView {...this.props} /&gt;;
    }
}

export = View;
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-c1">=</span> require<span class="pl-kos">(</span><span class="pl-s">'react'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">ChildView</span> <span class="pl-c1">=</span> require<span class="pl-kos">(</span><span class="pl-s">'./child'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">interface</span> <span class="pl-smi">Props</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">Props</span><span class="pl-kos">&lt;</span><span class="pl-smi">View</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-c1">foo</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">interface</span> <span class="pl-smi">State</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-smi">View</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">Props</span><span class="pl-kos">,</span> <span class="pl-smi">State</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>

    <span class="pl-k">private</span> <span class="pl-c1">removeItem</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">evt</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">DragEvent</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</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">&lt;</span><span class="pl-smi">ChildView</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">/</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-k">export</span> <span class="pl-c1">=</span> <span class="pl-smi">View</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">And the following child component:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React = require('react');

interface Props extends React.Props&lt;View&gt; {
  foo: string;
}

interface State {
}

class View extends React.Component&lt;Props, State&gt; {

    private removeItem = (evt: React.MouseEvent) =&gt; {
    }

    render() {
        return &lt;div&gt;{this.props.foo}&lt;/div&gt;;
    }
}

export = View;

"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-c1">=</span> require<span class="pl-kos">(</span><span class="pl-s">'react'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">interface</span> <span class="pl-smi">Props</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">Props</span><span class="pl-kos">&lt;</span><span class="pl-smi">View</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-c1">foo</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">interface</span> <span class="pl-smi">State</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-smi">View</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">Props</span><span class="pl-kos">,</span> <span class="pl-smi">State</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>

    <span class="pl-k">private</span> <span class="pl-c1">removeItem</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">evt</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">MouseEvent</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</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">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-kos">{</span>this<span class="pl-kos"></span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">foo</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-c1">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-k">export</span> <span class="pl-c1">=</span> <span class="pl-smi">View</span><span class="pl-kos">;</span>
</pre></div>
<p dir="auto">I get an error like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error TS2606: Property 'ref' of JSX spread attribute is not assignable to target property.
  Type 'string | ((component: View) =&gt; any)' is not assignable to type 'string | ((component: View) =&gt; any)'.
    Type '(component: View) =&gt; any' is not assignable to type 'string | ((component: View) =&gt; any)'.
      Type '(component: View) =&gt; any' is not assignable to type '(component: View) =&gt; any'.
        Types of parameters 'component' and 'component' are incompatible.
          Type 'View' is not assignable to type 'View'.
            Property 'removeItem' is missing in type 'View'."><pre class="notranslate"><code class="notranslate">Error TS2606: Property 'ref' of JSX spread attribute is not assignable to target property.
  Type 'string | ((component: View) =&gt; any)' is not assignable to type 'string | ((component: View) =&gt; any)'.
    Type '(component: View) =&gt; any' is not assignable to type 'string | ((component: View) =&gt; any)'.
      Type '(component: View) =&gt; any' is not assignable to type '(component: View) =&gt; any'.
        Types of parameters 'component' and 'component' are incompatible.
          Type 'View' is not assignable to type 'View'.
            Property 'removeItem' is missing in type 'View'.
</code></pre></div>
<p dir="auto">This is caused by the <code class="notranslate">ref</code> attribute of the <code class="notranslate">React.Props</code> having different <code class="notranslate">View</code> (my classes)</p>
<p dir="auto">Here is the interface defined:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    interface Props&lt;T&gt; {
        children?: ReactNode;
        key?: string | number;
        ref?: string | ((component: T) =&gt; any);
    }"><pre class="notranslate">    <span class="pl-k">interface</span> <span class="pl-smi">Props</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-c1">children</span>?: <span class="pl-smi">ReactNode</span><span class="pl-kos">;</span>
        <span class="pl-c1">key</span>?: <span class="pl-smi">string</span> <span class="pl-c1">|</span> <span class="pl-smi">number</span><span class="pl-kos">;</span>
        <span class="pl-c1">ref</span>?: <span class="pl-smi">string</span> <span class="pl-c1">|</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">component</span>: <span class="pl-smi">T</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">any</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
<p dir="auto">I could declare props like <code class="notranslate">interface Props extends React.Props&lt;React.Component&lt;any, any&gt;&gt;</code> but I feel like something should be done to be able to "omit" certain attributes when using spread attributes.</p>
<p dir="auto">Something like:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div {...this.props omit React.Props&lt;View&gt;} /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-smi">div</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-s1">omit</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Props</span><span class="pl-kos">&lt;</span><span class="pl-smi">View</span><span class="pl-kos">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Or handling <code class="notranslate">key</code> and <code class="notranslate">ref</code> specially in JSX and having them checked automatically, allowing the props definition to be just</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface Props {
   foo: string;
}"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">Props</span> <span class="pl-kos">{</span>
   <span class="pl-c1">foo</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">while allowing <code class="notranslate">key</code> and <code class="notranslate">ref</code> to be used implicitly..</p>
<p dir="auto">A following code was compiled with no error on TS1.7 but latest nightly build is not. Is this breaking changes?</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="declare module &quot;a&quot; {
  export default 0
  export const a;
  export type a = typeof a;
}"><pre class="notranslate"><span class="pl-k">declare</span> module <span class="pl-s">"a"</span> <span class="pl-kos">{</span>
  <span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-c1">0</span>
  <span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">a</span><span class="pl-kos">;</span>
  <span class="pl-k">export</span> <span class="pl-k">type</span> <span class="pl-smi">a</span> <span class="pl-c1">=</span> <span class="pl-k">typeof</span> <span class="pl-s1">a</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="$ node_modules/.bin/tsc --version
Version 1.8.0-dev.20151210
$ node_modules/.bin/tsc a.d.ts
a.d.ts(3,16): error TS2323: Cannot redeclare exported variable 'a'.
a.d.ts(4,3): error TS2323: Cannot redeclare exported variable 'a'."><pre class="notranslate"><code class="notranslate">$ node_modules/.bin/tsc --version
Version 1.8.0-dev.20151210
$ node_modules/.bin/tsc a.d.ts
a.d.ts(3,16): error TS2323: Cannot redeclare exported variable 'a'.
a.d.ts(4,3): error TS2323: Cannot redeclare exported variable 'a'.
</code></pre></div>