typescript - 无法从 .ts 文件导入 .tsx 文件(反之亦然)

Question

我有一个包含 .ts 和 .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 告诉我

ERROR in ./src/index.ts Module not found: Error: Can't resolve './write_editor' in '/Users/luke/Projekte/writejs/code/writejs/src' @ ./src/index.ts 3:23-48 @ multi ./src/index.ts

所以我尝试了这个:

src/index.ts

import WriteEditor from './write_editor.tsx';

现在我的 IDE 告诉我不要编写扩展 tsx 并且我在 src/write_editor.tsx 中收到错误，因为 TypeScript 找不到我的 .ts 来自 .tsx 文件的文件。

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

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

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

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

Answer 1

当你写作时

import WriteEditor from './write_editor';

Webpack会自动寻找

• ./write_editor
• ./write_editor.js
• ./write_editor.json
• (以及其他一些)

由于您使用的是 .ts 和 .tsx，因此您需要使用 resolve.extensions 告诉它在您的 Webpack 配置中查找它们:

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