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。