Typescript [React]不将.tsx导入转换为.jsx导入

Question

我将typescript反应组件保存在不同的文件中，因此我使用以下语句导入我的子组件。

// app.tsx

＆＃13;

＆＃13;

import {SideBar} from "./sidebar"

＆＃13;

＆＃13;

＆＃13;

但是当typescript将app.tsx编译为app.jsx时，import语句将切换为require（＆＃34; sidebar＆＃34;）。我在javascript上收到错误，因为require语句需要有＆＃34; sidebar.jsx＆＃34;用＆＃34; .jsx＆＃34;延期。有没有办法让我自动化？

我的tsconfig设置为：

＆＃13;

＆＃13;

{
    "compilerOptions": {
        "jsx": "preserve",
        "target": "ES5",
        "noImplicitAny":false,
		"module": "commonjs",
        
    }
}

＆＃13;

＆＃13;

＆＃13;

也许我需要在tsconfig文件中添加一些东西？

提前致谢。

Answer 1

选项1

  

我在javascript上收到错误，因为require语句需要“sidebar.jsx”扩展名为“.jsx”。

修复此错误，例如如果您使用的是webpack，则可以将.jsx添加为可解析的路径。

resolve: {
  // Add `.jsx` as a resolvable extension.
  extensions: ['', '.webpack.js', '.web.js', '.jsx']
},

如果是这样，甚至可以使用ts-loader：https://github.com/TypeStrong/ts-loader而不是jsx: preserve而不是jsx: react。更多：https://basarat.gitbooks.io/typescript/content/docs/jsx/tsx.html

选项2

使用module: es6代替"module": "commonjs",，打字稿不会将import重写为require。