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告诉我

./src/index.ts中的错误找不到模块：错误：无法解决＆＃39; ./ write_editor＆＃39; in＆＃39; / Users / luke / Projekte / writejs / code / writejs / src＆＃39; @ ./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个文件{1}}档案。

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

.ts

现在我收到很多或错误告诉我根本不写扩展名。

那么我们如何从import Events from './events.ts'; import Actions from './actions.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"],
  },
}

Answer 2

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

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

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

Answer 3

就我而言，我已将一个 .jsx 文件重命名为 .tsx，并且不得不删除 Parcel 的缓存以使其解决。

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

3 个答案: