TypeScript 中 An import path cannot end with a ‘.ts’ extension 错误

当我们在导入 TypeScript 文件时包含扩展名时，会出现“An import path cannot end with a ‘.ts’ extension”的错误。 要解决该错误，需要从我们的 TypeScript 导入中删除扩展名。

下面是发生上述错误的一个示例。

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

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

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

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

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

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

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

1. 为 Deno 安装 VSCode 扩展
2. 在导入上方使用 // @ts-ignore 注释

如果我们使用 VSCode 进行代码编辑，请安装 Deno 扩展，错误应该会得到解决。

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

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

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

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

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

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

有一个关于抑制“An import path cannot end with a ‘.ts’ extension”错误的能力的 Github 问题，但在过去 4 年里没有太大的变化。

总结

当我们在导入 TypeScript 文件时包含扩展名时，会出现“An import path cannot end with a ‘.ts’ extension”的错误。 要解决该错误，请从我们的 TypeScript 导入中删除扩展名。

火焰兔

海报 链接