title: Typescript compiles `tsx` to a wrong type of modue
body: <p>I'm trying to use Typescript together with Node and React. However I'm struggling to set up the Typescript compiler to use the correct type of the “module convention”. I know that ES6 modules do work correctly, but Typescript always generates a non-standard module syntax that, for some reason, just doesn't work.</p>
  
  <p>.</p>
  
  <p>If I save this code into a <code>.js</code> file, it works correctly:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import './App.css';
  
  let logo = require('./logo.svg');
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h1 className="App-title"&gt;Welcome to React&lt;/h1&gt;
          &lt;/header&gt;
          &lt;p className="App-intro"&gt;
            To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
          &lt;/p&gt;
          &lt;p&gt;{logo}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>However, if I save it to a <code>.tsx</code> file, it compiles to this:</p>
  
  <pre class="lang-js prettyprint-override"><code>"use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  const react_1 = require("react");
  require("./App.css");
  let logo = require('./logo.svg');
  class App extends react_1.Component {
      render() {
          return (react_1.default.createElement("div", { className: "App" },
              react_1.default.createElement("header", { className: "App-header" },
                  react_1.default.createElement("img", { src: logo, className: "App-logo", alt: "logo" }),
                  react_1.default.createElement("h1", { className: "App-title" }, "Welcome to React")),
              react_1.default.createElement("p", { className: "App-intro" },
                  "To get started, edit ",
                  react_1.default.createElement("code", null, "src/App.js"),
                  " and save to reload."),
              react_1.default.createElement("p", null, logo)));
      }
  }
  exports.default = App;
  </code></pre>
  
  <p>Which results in a Node error <code>react_1.default is undefined</code>. I tried adding a <code>esModuleInterop</code> flag to the Typescript compiler, which added this definition:</p>
  
  <pre class="lang-js prettyprint-override"><code>var __importDefault = (this &amp;&amp; this.__importDefault) || function (mod) {
      return (mod &amp;&amp; mod.__esModule) ? mod : { "default": mod };
  }
  </code></pre>
  
  <p>and changed <code>require("react")</code> to <code>__importDefault(require("react"))</code>. That fixes the first problem, however <code>react_1.Component</code> is still undefined. Is there a way to set the Typescript compiler to use the standard ES6 modules?</p>