TypeScript and ReactDOM.render method doesn't accept component : <h2>TL;DR</h2>

<p>I'm using TypeScript and React. I've defined my <code>AppContainer.tsx</code> component, exported it as default. I'm consuming this in the file <code>app.ts</code> where <code>ReactDOM</code> lives to render it to the targetted dom element. But there I receive the following errors (see image). <strong>Read below for more information and links to GitHub repo.</strong></p>

<p><a href="https://i.stack.imgur.com/qPHxN.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/qPHxN.jpg" alt="enter image description here"></a></p>

<p><strong>Question:</strong> What am I doing, or interpreting, wrong? From all code examples I've seen this should work - but maybe (clearly) I'm missing something. <strong>Below is more info and links to the full GitHub repo</strong>.</p>

<hr>

<h2>Environment</h2>

<ul>
<li>react 15.4.2</li>
<li>react-dom 15.4.2</li>
<li>typings: <a href="https://github.com/aredfox/electron-starter/blob/master/typings.json" rel="noreferrer">https://github.com/aredfox/electron-starter/blob/master/typings.json</a></li>
<li>tsconfig: <a href="https://github.com/aredfox/electron-starter/blob/master/tsconfig.json" rel="noreferrer">https://github.com/aredfox/electron-starter/blob/master/tsconfig.json</a></li>
</ul>

<h2>Code</h2>

<h3>File '/components/AppContainer.tsx'</h3>

<pre><code>/// &lt;reference path="../../../typings/index.d.ts" /&gt;

// Top level application component

/*------------------------------------------------------------------------------------*/
/** IMPORTS **/
import * as React from 'react';
import { Component } from 'react';
/*------------------------------------------------------------------------------------*/
/*///*/

/*------------------------------------------------------------------------------------*/
/** COMPONENT **/
export default class AppContainer extends React.Component&lt;{}, {}&gt; {    
    render() {
        return ( &lt;div /&gt; );
    }    
}        
/*------------------------------------------------------------------------------------*/
/*///*/
</code></pre>

<p><a href="https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx" rel="noreferrer">https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx</a></p>

<h3>File 'app.ts'</h3>

<pre><code>/// &lt;reference path="../../typings/index.d.ts" /&gt;
/// &lt;reference path="interfaces.d.ts" /&gt;

// Setting up react inside the host html

/*------------------------------------------------------------------------------------*/
/** IMPORTS **/
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// Components
import AppContainer from './components/AppContainer';
/*------------------------------------------------------------------------------------*/
/*///*/

/*------------------------------------------------------------------------------------*/
/** RENDER TO DOM **/
ReactDOM.render(
    &lt;AppContainer/&gt;,
    document.getElementById('AppContainer')
);
/*------------------------------------------------------------------------------------*/
/*///*/
</code></pre>

<p><a href="https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts" rel="noreferrer">https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts</a></p>

<h2>Quick Links</h2>

<ul>
<li>Git repo: <a href="https://github.com/aredfox/electron-starter" rel="noreferrer">https://github.com/aredfox/electron-starter</a>

<ul>
<li><code>app.ts</code> file <a href="https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts" rel="noreferrer">https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts</a></li>
<li><code>AppContainer.tsx</code> file <a href="https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx" rel="noreferrer">https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx</a></li>
</ul></li>
</ul>
