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

Posted 2023-03-13

【中文标题】无法从 .ts 文件导入 .tsx 文件（反之亦然）

【英文标题】：Cannot import .tsx file from .ts file (and vice versa)

【发布时间】：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

哦等等，自动追加是什么意思？

【参考方案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 的缓存才能解决它。