导入路径不能以“.ts”或“.tsx”扩展名结尾

作者

目录

An import path cannot end with a ‘.ts’ extension in TS

  1. 导入路径不能以 TS 中的“.ts”扩展名结尾
  2. 导入路径不能以 TS 中的“.tsx”扩展名结尾

如果您在使用React.js时遇到错误，请单击第二个副标题。

导入路径不能以 TS 中的 ‘.ts’ 扩展名结尾

当我们在导入 TypeScript 文件时包含扩展名时，会出现“导入路径不能以‘.ts’扩展名结尾”的错误。

要解决该错误，请从您的 TypeScript 导入中删除扩展名。

下面是错误如何发生的示例。

索引.ts
// ⛔️ Error: An import path cannot end with a '.ts'
// extension. Consider importing './another-file' instead.ts(2691)
import { sum } from './another-file.ts';

要解决该错误，请.ts在导入文件时删除扩展名。

索引.ts
import { sum } from './another-file';

TypeScript 编译器在将您的 TypeScript 代码转换为 JavaScript 时不会更改导入说明符，因此如果您有类似 的导入
import {sum} from './another-file.ts'，即使在编译后路径也会保留.ts
扩展名。

指定如果使用 Webpack 需要解析的扩展

如果您使用 Webpack，另一种方法是尝试将您需要解析的扩展添加到您的webpack.config.js文件中。

webpack.config.js
module.exports = {
  //... rest
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

如果你使用 Deno，指定你需要解析的扩展

如果你使用 Deno，你必须在导入文件时指定扩展名，所以你有 2 个选项：

  • 为 Deno 安装 VSCode 扩展
  • // @ts-ignore在导入上方使用注释
如果您使用 VSCode 进行代码编辑，请安装 Deno 扩展，错误应该会得到解决。

使用ts-ignore注释

如果这仍然不适合你，你必须使用// @ts-ignore导入上方的注释来忽略错误。

索引.ts
// @ts-ignore
import { sum } from './another-file.ts';

如果您的 linter 规则不允许您在代码中使用 TS 注释，您可以为该文件禁用它。

索引.ts
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-ignore
import { sum } from './another-file.ts';

或者您可以在您的文件中禁用它eslintrc。

.eslintrc
{
  "rules": {
    "@typescript-eslint/ban-ts-comment": "off"
  },
}

关于抑制错误的能力有一个Github 问题
，但在过去 4 年里没有太大的动静。

导入路径在 TS 中不能以 ‘.tsx’ 扩展名结尾

当我们在 React.js 应用程序中导入 TypeScript 文件时包含扩展名时，会出现错误“导入路径不能以‘.tsx’扩展名结尾”。

要解决该错误，请从您的 TypeScript 导入中删除扩展名。

下面是错误如何发生的示例。

索引.ts
// ⛔️ An import path cannot end with a '.tsx' extension.
// Consider importing './App.js' instead.ts(2691)
import App from './App.tsx';

要解决该错误，请.tsx在导入文件时删除扩展名。

索引.ts
import App from './App';

TypeScript 编译器在将您的 TypeScript 代码转换为 JavaScript 时不会更改导入说明符，因此如果您有类似 的导入
，即使在编译后import App from './App.tsx'路径也会保留扩展名。.tsx

如果出于某种原因需要保留扩展名并且使用 Webpack，请尝试将需要解析的扩展名添加到文件中webpack.config.js。

webpack.config.js
module.exports = {
  //... rest
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

If this still doesn’t work for you and you need to keep the extensions, use
// @ts-ignore comments above the imports to ignore the error.

index.ts
// @ts-ignore
import App from './App.tsx';

If you have a linter rule that doesn’t allow you to use TS comments in your
code, you can disable it for the file.

index.ts
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-ignore
import App from './App.tsx';

Or you could disable the rule in your eslintrc file.

.eslintrc
{
  "rules": {
    "@typescript-eslint/ban-ts-comment": "off"
  },
}

If you decide to ignore the error, make sure you have a build step in place that
removes the extensions. If your compiled JavaScript files have imports with
.tsx extensions, your app won’t work.

I’ve also written a detailed guide on
how to use create-react-app with TypeScript.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: