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

【问题标题】：Cannot import .tsx file from .ts file (and vice versa)无法从 .ts 文件导入 .tsx 文件（反之亦然）
【发布时间】：2018-06-24 13:48:24
【问题描述】：

我有一个包含.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，反之亦然？

【问题讨论】：

您的问题提到了write_editor.jsx 和write_editor.tsx。为什么你有一个.jsx 文件？
哦抱歉打错了，全是tsx
您是否已将 Webpack 配置为自动附加 .ts 和 .tsx 扩展？
我做了，这是我的 webpack 配置gist.github.com/LukasBombach/38b5b1f19da819e6f4effee743162c6d
哦等等，自动追加是什么意思？

标签： typescript webpack babeljs

【解决方案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"],
  },
}

【讨论】：

谢谢谢谢！

【解决方案2】：

就我而言，我在使用 typescript-eslint 时遇到了同样的错误。它是由 create-react-app 创建的应用。

方法是在.eslintrc.js中加入这段代码。

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

【讨论】：

【解决方案3】：

在我的例子中，我已将 .jsx 文件重命名为 .tsx，并且必须删除 Parcel 的缓存才能解决它。

【讨论】：