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

Question

我保持打字稿反应组件在不同的文件中，所以我使用下面的语句导入我的子组件。

//app.tsx

import {SideBar} from "./sidebar"

但当打字稿编译app.tsx到app.jsx，import语句开关要求（ “侧边栏”）。由于require语句需要带有“.jsx”扩展名的“sidebar.jsx”，因此我在javascript上发生错误。有没有办法让我自动化？

我tsconfig设置为：

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

也许我需要添加一些相应的TSconfig文件？

在此先感谢。

Answer 1

选项1

我得到的JavaScript错误的需要声明需要有“sidebar.jsx”与“.jsx”扩展名。

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

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

如果是的话甚至使用TS-装载机：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。