Extending React component which is imported from a NPM module (typescript)
<p>I have a NPM module developed in typescript. This module is a simple, proof-of-concept react component:</p>

<pre><code>import * as React from "react";
import * as ReactDOM from "react-dom";

export class COne extends React.Component&lt;{}, {counter : number}&gt; {
    constructor(props: {}, context: any) {
        super(props, context);
    }

    render() {
        return &lt;h1 ref="h1"&gt;Test from comp one&lt;/h1&gt;;
    }
}
</code></pre>

<p>By using <code>tsc</code> and appropriate <code>tsconfig.json</code>, I generate js files.</p>

<p>In another project, I import this npm module and I can render the component <code>COne</code> without issue. </p>

<p>In the second project, I then created another component, <code>CTwo</code>, which extends <code>COne</code>:</p>

<pre><code>import * as React from "react";
import { COne }  from "repo1";

export class CTwo extends COne {
    constructor(props: {}, context: any) {
        super(props, context);
    }
}
</code></pre>

<p>If I run <code>tsc --jsx react src/app.tsx</code>, where app.tsx imports and renders component <code>CTwo</code>, all is fine. But if I run <code>tsc --jsx react src/app.tsx typings/index.d.ts</code> where my typings file includes react and react-dom definitions (see below), I get this error</p>

<pre><code>src/app.tsx(8,21): error TS2605: JSX element type 'CTwo' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'CTwo'.
</code></pre>

<p>My <code>typings.json</code> file contains current react definition and react-dom definition (I'm using the current typed-react because the official one is missing typings for JSX and it has problems when compiling with noImplicitAny):</p>

<pre><code>{
  "name": "repo2",
  "dependencies": {
    "react": "github:cantide5ga/typed-react",
    "react-dom": "registry:npm/react-dom#15.0.1+20160826174104"
  }
}
</code></pre>

<p>I also installed <code>ts-node</code> and within a REPL, I imported <code>COne from "repo1"</code> and <code>CTwo</code>. I see that CTwo does not have a <code>render</code> method on the prototype (it does not have <code>__proto__</code> property).</p>

<p>Even though I get the error, it works in the browser, when processed with <code>webpack</code>. Note, that even if I add a render method, I get another error, that <code>Property 'setState' is missing in type 'CTwo'.</code>.</p>

<p>Here is the output from <code>ts-node</code>:</p>

<pre><code>$ ts-node
&gt; import { CTwo } from "./src/CTwo";
'use strict'
&gt; import { COne } from "repo1";
undefined
&gt; let x = new CTwo({}, {});
undefined
&gt; let y = new COne({}, {});
undefined
&gt; x.__proto__
⨯ Unable to compile TypeScript
[eval].ts (1,3): Property '__proto__' does not exist on type 'CTwo'. (2339)
&gt; y.__proto__
COne { constructor: [Function: COne], render: [Function] }
</code></pre>

<p>So it seems that CTwo object is not properly extended. Should I be using a different syntax for extending react components?</p>

<p>I am using typescript 2.1.4. The generated <code>CTwo.js</code> "looks right", despite the errors emitted:</p>

<pre><code>"use strict";
var __extends = (this &amp;&amp; this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var repo1_1 = require("repo1");
var CTwo = (function (_super) {
    __extends(CTwo, _super);
    function CTwo(props, context) {
        return _super.call(this, props, context) || this;
    }
    return CTwo;
}(repo1_1.COne));
exports.CTwo = CTwo;
</code></pre>