无法从 .ts 文件导入 .tsx 文件（反之亦然）

我有一个项目.ts and .tsx文件，我正在尝试导入.tsx文件来自.ts文件，像这样：

src/index.ts

import WriteEditor from './write_editor';

src/write_editor.tsx

import Events from './events';
import Actions from './actions';

export default class WriteEditor extends React.Component { /*...*/ }

现在 TypeScript 告诉我

./src/index.ts 中出现错误 找不到模块：错误：无法解析“/Users/luke/Projekte/writejs/code/writejs/src”中的“./write_editor” @ ./src/index.ts 3:23-48 @多./src/index.ts

所以我尝试了这个：

src/index.ts

import WriteEditor from './write_editor.tsx';

现在我的 IDE 告诉我不要编写扩展tsx我得到一个错误src/write_editor.tsx因为 TypeScript 找不到我的.ts文件来自.tsx file.

然后我去重命名导入并添加.ts扩展

import Events from './events.ts';
import Actions from './actions.ts';

现在，我收到大量错误消息，告诉我根本不要编写扩展。

那么我们如何导入tsx from ts反之亦然？

当你写的时候

import WriteEditor from './write_editor';

webpack会自动寻找

• ./write_editor
• ./write_editor.js
• ./write_editor.json
• （还有其他一些）

既然你正在使用.ts and .tsx，你需要告诉它在你的 Webpack 配置中也寻找那些resolve.extensions https://webpack.js.org/configuration/resolve/#resolve-extensions:

{
  resolve: {
    extensions: [".js", ".json", ".ts", ".tsx"],
  },
}