代码之家 › 专栏 › 技术社区 › Lukas

无法导入。tsx文件来自。ts文件(反之亦然)

babeljs webpack typescript

7

Lukas · 技术社区 · 8 年前

我有一个项目 .ts 和 .tsx 文件,我正在尝试导入 .tsx公司 来自的文件 .ts 文件,如下所示:

src/索引。ts

import WriteEditor from './write_editor';

src/write\u编辑器。tsx公司

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

export default class WriteEditor extends React.Component { /*...*/ }

现在TypeScript告诉我

中出错/src/索引。ts 找不到模块:错误:无法解析“”/在/Users/luke/Projekte/writejs/code/writejs/src中写入编辑器 @ ./src/索引。ts 3:23-48 @多个/src/索引。ts

所以我尝试了这个:

src/索引。ts

import WriteEditor from './write_editor.tsx';

现在我的IDE告诉我不要编写扩展 tsx 我在 src/write\u编辑器。tsx公司 因为TypeScript找不到我的 .ts 来自的文件 .tsx公司 文件

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

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

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

那么我们如何导入 tsx公司 从…起 ts 反之亦然?

3 回复 | 直到 8 年前

1

18

loganfsmyth 8 年前

当你写作时

import WriteEditor from './write_editor';

Web包将自动查找

./write_editor
./write_editor.js
./write_editor.json
(和其他一些人)

因为你正在使用 .ts 和 .tsx ,您需要告诉它在您的网页配置中也使用 resolve.extensions :

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

2

6

Hongbo Miao 7 年前

在我的例子中,我在使用 类型脚本eslint 创建react应用程序 .

方法是将此代码添加到 .eslintrc。js公司 .

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

3

0

James Gentes Paul Melero 5 年前

在我的情况下,我重命名了 .jsx 文件收件人 .tsx 必须删除包裹的缓存才能进行解析。