tsconfig配置文件增加“esModuleInterop“: true，有什么作用？

在 TypeScript 中，"esModuleInterop": true是一个模块互操作性配置 ，核心作用是解决 ES 模块（ESM）与 CommonJS 模块之间的兼容问题，让两种模块系统的导入/导出语法能更自然地协同工作。

TypeScript 支持两种主流模块规范：

ES 模块（ESM） ：使用 import/export语法（如 import foo from 'foo'、export default bar），是现代 JS 的标准模块系统。
CommonJS ：Node.js 传统的模块系统，使用 require()/module.exports（如 const foo = require('foo')、module.exports = bar）。

两者的默认导出逻辑完全不同：

ESM 的 export default是明确的"默认导出"，对应 import foo from 'foo'。
CommonJS 没有"默认导出"的概念，module.exports本质是一个对象（所有导出都挂在这个对象上）。如果强行用 import foo from 'foo'导入 CommonJS 模块，TS 会默认认为你要取 module.exports.default------但大多数 CommonJS 模块并没有设置 exports.default，导致导入结果不符合预期（比如得到 undefined）。

开启该配置后，TypeScript 会自动处理两种模块系统的"翻译"工作，主要带来以下便利：

这是最常见的痛点。例如，你想导入 Node.js 内置的 fs模块（CommonJS）：

未开 esModuleInterop：必须用命名空间导入或整体导入：

import * as fs from 'fs'→ 使用时需 fs.readFileSync()；

若强行写 import fs from 'fs'，TS 会认为你要取 fs.default（但实际 fs模块没有这个属性），导致 fs为 undefined。
开了 esModuleInterop：可以直接用默认导入：

import fs from 'fs'→ TS 会自动将 fs映射到 module.exports（即 CommonJS 的导出对象），等价于 const fs = require('fs')。

为了兼容两种模块系统，TS 会在编译后的 JS 代码中插入辅助函数 （如 __importDefault、__importStar），负责将 CommonJS 模块"包装"成 ESM 风格的对象：

__importDefault(mod)：将 CommonJS 模块的 module.exports作为"默认导出"（对应 import foo from 'foo'）。
__importStar(mod)：将 CommonJS 模块的 module.exports作为"命名空间导出"（对应 import * as foo from 'foo'）。

这些辅助函数是 TS 内置的，无需手动维护，确保编译后的代码能在 Node.js 或浏览器中正确运行。

esModuleInterop: true会自动启用 另一个配置 allowSyntheticDefaultImports: true（允许用默认导入语法导入没有显式默认导出的模块）。因此不需要再单独设置后者。

假设你有一个 CommonJS 模块 utils.js：

复制代码

// utils.js（CommonJS）
module.exports = {
  add: (a, b) => a + b,
  sub: (a, b) => a - b
};

未开 esModuleInterop：导入时必须用命名空间或整体导入：

复制代码

import * as utils from './utils'; // 正确，utils 是 { add, sub } 的对象
import utils from './utils';      // 错误！TS 认为要取 utils.default（不存在）

开了 esModuleInterop：可以用默认导入，更符合直觉：

复制代码

import utils from './utils'; // 正确！TS 自动将 module.exports 作为默认导出
console.log(utils.add(1, 2)); // 3（正常工作）

编译后的代码体积：辅助函数会增加极小的代码量（可忽略），不影响性能。
与 module配置的配合 ：通常搭配 module: "CommonJS"（Node.js 环境）或 module: "ESNext"（现代浏览器/打包工具）使用，效果最佳。
不要与 noEmitHelpers冲突 ：如果手动关闭了辅助函数生成（noEmitHelpers: true），需要自己引入 @babel/helpers或类似库，否则会报错。

esModuleInterop: true是 TypeScript 中提升模块互操作性的关键配置，它让你可以：

惠州西湖