Typescript 将 `jsx` 编译为错误类型的模块答案

【问题标题】：Typescript compiles `tsx` to a wrong type of modueTypescript 将 `jsx` 编译为错误类型的模块
【发布时间】：2018-08-12 07:51:21
【问题描述】：

我正在尝试将 Typescript 与 Node 和 React 一起使用。但是，我正在努力设置 Typescript 编译器以使用正确类型的“模块约定”。我知道 ES6 模块确实可以正常工作，但 Typescript 总是生成非标准的模块语法，由于某种原因，它不起作用。

如果我将此代码保存到.js 文件中，它可以正常工作：

import React, { Component } from 'react';
import './App.css';

let logo = require('./logo.svg');

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <p>{logo}</p>
      </div>
    );
  }
}

export default App;

但是，如果我将其保存到 .tsx 文件中，它会编译为：

"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;

这会导致节点错误react_1.default is undefined。我尝试在 Typescript 编译器中添加一个 esModuleInterop 标志，它添加了这个定义：

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
}

并将require("react") 更改为__importDefault(require("react"))。这解决了第一个问题，但是 react_1.Component 仍然未定义。有没有办法将 Typescript 编译器设置为使用标准 ES6 模块？

【问题讨论】：

标签： node.js reactjs typescript jsx es6-modules

【解决方案1】：

将此添加到tsconfig.json：

"compilerOptions": {
  "module": "es6"
}

【讨论】：