ts的esModuleInterop配置作用

305 阅读2分钟

WX20250110-180105@2x.png esModuleInterop是TypeScript编译器的一个配置选项,其作用主要体现在以下几个方面:

兼容CommonJS模块的默认导入

• 背景:在CommonJS模块规范中,通常使用module.exports来导出模块内容,而在ES模块规范中,使用export default来指定默认导出。当尝试使用import语法从一个CommonJS模块中导入默认导出时,如果没有开启esModuleInterop,会因为CommonJS模块没有default属性而导致导入失败。

• 作用:开启esModuleInterop后,TypeScript编译器会自动为CommonJS模块添加一个default属性,使得可以使用import d from 'cjs'的方式导入CommonJS模块的默认导出。例如,对于一个CommonJS模块foo.js,其内容为module.exports = { name: 'Kimi' },开启esModuleInterop后,就可以在其他模块中使用import foo from './foo'来导入,此时foo的值为{ name: 'Kimi' }

优化命名空间导入

• 背景:在ES模块规范中,使用import * as name from 'module'的方式进行命名空间导入时,name应该是一个纯对象,不能直接调用。但一些CommonJS模块在导入后可能会被当作函数等其他类型直接调用,这不符合ES模块规范。

• 作用:开启esModuleInterop后,TypeScript编译器会为导入的模块提供一个__importStar工具函数,该函数会对导入的模块进行处理,使其符合ES模块规范中的命名空间导入要求。例如,对于一个CommonJS模块bar.js,其内容为module.exports = class Bar {},开启esModuleInterop后,使用import * as Bar from './bar'导入时,Bar会被正确处理为一个对象,可以通过new Bar.default()来创建实例。

自动开启allowSyntheticDefaultImports

• 背景:allowSyntheticDefaultImports选项允许从没有设置默认导出的模块中默认导入,但不会影响编译后的代码输出,只是去除了类型检查。而esModuleInterop不仅去除了类型检查,还会在编译后的代码中添加相应的逻辑来实现默认导入。

• 作用:当开启esModuleInterop时,会自动开启allowSyntheticDefaultImports选项,这样在使用默认导入时,既能通过类型检查,又能保证编译后的代码能够正确运行。

其他

内容来源kimi