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

Question

我有一个包含.ts和.tsx文件的项目，我试图从一个.ts文件中导入一个.tsx文件，代码如下：

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 @ multi ./src/index.ts

所以我尝试了这个：

src/index.ts

import WriteEditor from './write_editor.tsx';

现在我的IDE提示我不要写扩展名tsx，并且我在src/write_editor.tsx中遇到了错误，因为TypeScript无法从.tsx文件中找到我的.ts文件。 然后我去重命名导入，并添加了.ts扩展名。

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

现在我收到了很多错误提示，告诉我不要写扩展。

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

- Lukas

---

你的问题提到了 write_editor.jsx 和 write_editor.tsx。为什么会有一个 .jsx 文件？ - cartant

抱歉，那是一个打字错误，应该全部为 tsx。 - Lukas

你是否已经配置了Webpack自动添加.ts和.tsx扩展名？ - loganfsmyth

我已经完成了，这是我的webpack配置 https://gist.github.com/LukasBombach/38b5b1f19da819e6f4effee743162c6d - Lukas

哦，等等，你说的“auto-append”是什么意思？ - Lukas

Answer 1

当你写作时

import WriteEditor from './write_editor';

Webpack会自动查找:

• ./write_editor
• ./write_editor.js
• ./write_editor.json
• (还有其他一些文件)

由于您使用的是 .ts 和 .tsx 文件，需要在WebPack配置中使用resolve.extensions告诉Webpack也要查找这些文件：

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

- loganfsmyth

Answer 2

在我的情况下，当使用 typescript-eslint 时，我遇到了相同的错误。它是由create-react-app创建的应用程序。

解决方法是在 .eslintrc.js 中添加此代码。

module.exports = {
  // ...
  settings: {
    'import/resolver': {
      'node': {
        'extensions': ['.js','.jsx','.ts','.tsx']
      }
    }
  }
};

- Hongbo Miao

Answer 3

在我的情况下，我将一个 .jsx 文件重命名为 .tsx，然后不得不删除 Parcel 的缓存才能解决这个问题。

- James Gentes