当前位置: 首页> 房产> 建筑 > Typescript配置文件(tsconfig.json)详解系列四:esModuleInterop和allowSyntheticDefaultImports

Typescript配置文件(tsconfig.json)详解系列四:esModuleInterop和allowSyntheticDefaultImports

时间:2025/7/11 8:38:30来源:https://blog.csdn.net/zzyp1927314/article/details/140673668 浏览次数:0次

Typescript版本

Typescript5.5.2

如果我们使用ESM作为模块系统,那么我们经常会用以下两种方式去导入另一个模块:

// 引入一个对象,包括了所有的export xxx 和 export default
import * as A from './xx';
// 引入export default
import B from './xx';

转换为Commonjs的写法为:

const A = require('xx');
const B = require('xx').default;

但是实际上这种转换并不是完全对等的,因为Commonjs中并没有default(实际上大部分模块系统都没有default)。这种不对等会导致Typescript编译后的js文件无法正常执行。

问题:import X from 'xx'

我们将esModuleInterop设置为false来模拟一下这些问题

{compilerOptions: {"esModuleInterop": false}
}

有如下两个模块分别使用ESM和Commonjs进行导出:

// cjs_default.ts
// Typescript的Commonjs导出写法
export = {name: 1
}
// esm_default.ts
// ESM导出
export default {name: 'name'
}

然后我们使用ESM来引入这两个模块

import esm from './esm_default';
import cjs from './cjs_default';console.log(cjs, esm);

此时编译会报错,原因就是我们之前提到的Commonjs没有默认导出:

ts/index.ts:2:8 - error TS1259: Module '"C:/Users/86159/WebstormProjects/\u9762\u8BD5\u9898/ts/cjs_default"' can only be default-imported using the 'esModuleInterop' flag2 import cjs from './cjs_default';~~~ts/cjs_default.ts:1:11 export = {~~~~~~~~~~2     name: 1~~~~~~~~~~~3 }~This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.Found 1 error in ts/index.ts:2Process finished with exit code 2

这个报错虽然让我们去开启esModuleInterop,但是实际上我们只需要将allowSyntheticDefaultImports这个字段设置为true就好了。

现在代码可以正常编译了:

// cjs_default.js
// 被正常编译为commonjs模块了
module.exports = {name: 1
};// esm_default.js
// 这个exports.__esModule 标识了这个commonjs模块是由ESM模块编译转换的。
Object.defineProperty(exports, "__esModule", { value: true });
// module.exports可以省略module
exports.default = {name: 'name'
};
// index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var esm_default_1 = require("./esm_default");
var cjs_default_1 = require("./cjs_default");
console.log(cjs_default_1.default, esm_default_1.default);

我们执行一下生成的js代码,但是我们并没有正常的从Commonjs导出的模块中得到正确的结果(获得了undefined),虽然我们的类型检查通过了,代码也编译了,但是并没有编译成我们期望的结果。

undefined { name: 'name' }

我们将esModuleInterop设置为true之后代码可以正常编译了,我们看一下编译后的文件:

// cjs_default.js
// 被正常编译为commonjs模块了
module.exports = {name: 1
};// esm_default.js
// 这个exports.__esModule 标识了这个commonjs模块是由ESM模块编译转换的。
Object.defineProperty(exports, "__esModule", { value: true });
// module.exports可以省略module
exports.default = {name: 'name'
};
// index.js
// 开启esModuleInterop为true会在编译文件中生成这个函数,如果在转化import A from 'xx'时调用。
// 对没有default的Commonjs模块系统封装一层(通过有没有__esModule字段判断需不需要封装)     
var __importDefault = (this && this.__importDefault) || function (mod) {return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var esm_default_1 = __importDefault(require("./esm_default"));
var cjs_default_1 = __importDefault(require("./cjs_default"));
console.log(cjs_default_1.default, esm_default_1.default);

 我们执行一下生成的js代码,这次可以正确的输出了:

{ name: 1 } { name: 'name' }

问题:import * as X from 'xx'

{compilerOptions: {"esModuleInterop": true,"allowSyntheticDefaultImports": true,}
}

index.ts代码如下:

import * as esm from './esm_default';
import * as cjs from './cjs_default';console.log(cjs, esm);

 编译一直报类型检查的错误,报错如下:

ts/index.ts:2:22 - error TS2497: This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export.2 import * as cjs from './cjs_default';~~~~~~~~~~~~~~~Found 1 error in ts/index.ts:2

 但是编译后的代码是可以执行的,执行结果如下,感觉还是有点奇怪的:

{ name: [Getter], default: { name: 1 } } { default: { name: 'name' } }

 编译后的代码可以看到,也是注入了转换函数(__importStar 等

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {if (k2 === undefined) k2 = k;var desc = Object.getOwnPropertyDescriptor(m, k);if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {desc = { enumerable: true, get: function() { return m[k]; } };}Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {if (k2 === undefined) k2 = k;o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {if (mod && mod.__esModule) return mod;var result = {};if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);__setModuleDefault(result, mod);return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const esm = __importStar(require("./esm_default"));
const cjs = __importStar(require("./cjs_default"));
console.log(cjs, esm);

问题:import {x} from 'xx'

index.ts代码如下:

import {name
} from './cjs_default';console.log(name);

会报和import * as X from 'xx'一模一样的错误, 但是编译后的代码是可以执行的,执行结果如下:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const cjs_default_1 = require("./cjs_default");
console.log(cjs_default_1.name);

 编译后的代码如下:

总结

allowSyntheticDefaultImports

  • allowSyntheticDefaultImports可以让这种使用ESM模块系统导入default时,目标模块系统没有default的类型检查通过(只影响类型检查,不影响编译结果)

esModuleInterop

  • esModuleInterop设置为true的时候,allowSyntheticDefaultImports如果没有定义,会自动跟着设置为true。
  • esModuleInterop会自动注入工具函数,将没有default的模块系统封装一层,让使用ESM模块系统导入default的结果符合预期。

使用ESM模块系统引入Commonjs模块

方式是否支持备注
import X from 'xx'支持
import * as X from 'xx'不支持报错,能正常编译
import {x} from 'xx'不支持报错,能正常编译

import * as X from 'xx',这种还有工具函数__importStar ,而且官方文档对esModuleInterop的讲解还举了这个例子但是会类型报错很不理解

如果想解决这个问题有几个方案:

1. 使用ts的校验错误忽略@ts-ignore

2. 改写export = 为 export,使用ESM模块系统

export = {name: 1
}// 改写为
const name = 1;
export {name
}// 或者改写为
export default {name
}// 或者改写为
export const name = 1;

3. 如果是引入的是js文件,那可以通过定义d.ts文件避免类型检验错误(虽然js中使用的是commonjs模块系统,但是d.ts定义成ESM模块系统)

关键字:Typescript配置文件(tsconfig.json)详解系列四:esModuleInterop和allowSyntheticDefaultImports

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: