TypeScript 运行需要带有 .js 扩展名的导入

在本文中，我们将介绍在使用 TypeScript 运行 Node.js 时，通过 ts-node/esm.js loader 进行导入时需要带有 .js 扩展名的问题以及解决方法。

阅读更多：TypeScript 教程

问题描述

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于开发服务器端和命令行工具。而 TypeScript 是 JavaScript 的超集，它添加了静态类型和其他语言特性。通过使用 ts-node/esm.js 这个 loader，我们可以在开发过程中直接运行 TypeScript 文件。

然而，在一些情况下，当我们使用 ts-node/esm.js 进行导入时，可能会遇到一个问题，即被导入的文件需要带有 .js 扩展名。否则，Node.js 在解析文件时会报错。

例如，我们有一个 TypeScript 文件 example.ts，其中导入了一个名为 otherModule 的模块：

import { otherModule } from './otherModule';

如果我们尝试运行这个 TypeScript 文件，使用以下命令：

ts-node/esm.js example.ts

则可能会得到以下错误信息：

Error [ERR_MODULE_NOT_FOUND]: Cannot find module './otherModule'

这是因为在默认情况下，Node.js 需要导入的文件都带有 .js 扩展名。然而，在 TypeScript 文件中，我们通常不带有该扩展名，因为 TypeScript 编译器已经知道如何处理这些导入语句。

解决方法

要解决这个问题，我们可以通过以下两种方法来确保在使用 ts-node/esm.js loader 运行 TypeScript 文件时正确导入模块。

方法一：为导入的文件添加 .js 扩展名

最简单的方法是在导入模块时手动添加 .js 扩展名。这样，Node.js 将能够正确解析模块路径。

修改 example.ts 文件中的导入语句如下：

import { otherModule } from './otherModule.js';

然后，使用以下命令来运行 TypeScript 文件：

ts-node/esm.js example.ts

这样，Node.js 将能够正确地找到并加载 otherModule.js 模块。

方法二：配置 tsconfig.json 文件

另一种方法是通过配置 TypeScript 的 tsconfig.json 文件来告诉编译器为导入的文件添加 .js 扩展名。

在项目的根目录下创建或修改 tsconfig.json 文件，并添加以下内容：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

在这个配置中，我们通过设置 "moduleResolution": "node" 来告诉 TypeScript 使用 Node.js 的模块解析方式。然后，设置 "resolveJsonModule": true 来支持导入 JSON 文件，以及设置 "esModuleInterop": true 来使导入的模块按照 CommonJS 格式进行导出。

然后，我们只需简单地导入模块，而无需添加 .js 扩展名：

import { otherModule } from './otherModule';

现在，使用以下命令来运行 TypeScript 文件：

ts-node/esm.js example.ts

Node.js 将能够正确地找到并加载 otherModule 模块。

示例说明

为了更好地理解上述解决方法，请考虑以下示例。

假设我们有一个名为 otherModule.js 的模块，它导出一个名为 greet 的函数：

// otherModule.js
export function greet(name) {
  return `Hello, ${name}!`;
}

我们还有一个 TypeScript 文件 example.ts，用于导入并使用 otherModule 模块：

// example.ts
import { greet } from './otherModule';

console.log(greet('TypeScript'));

如果我们直接运行 example.ts 文件，不论是使用方法一还是方法二，输出都将为：

Hello, TypeScript!

这表明我们成功地导入并使用了 otherModule 模块，无需在导入语句中添加 .js 扩展名。

总结

通过使用 ts-node/esm.js loader 运行 TypeScript 文件时，如果遇到导入模块需要带有 .js 扩展名的问题，我们可以采用以下两种方法解决：

• 方法一：为导入的文件添加 .js 扩展名。
• 方法二：通过配置 tsconfig.json 文件告诉 TypeScript 为导入的文件添加 .js 扩展名。

无论采用哪种方法，都能够确保在使用 TypeScript 运行 Node.js 时正确导入模块，并避免出现找不到模块的错误。