tsconfig之esModuleInterop属性

背景

如下代码

import fs from 'fs';

fs.copyFile('');
1
2
3

当 esModuleInterop 为 false 时，typescript 提示报错如下 TS1192: Module '"fs"' has no default export.

为什么会出现这种报错呢，因为 fs 模块的确没有默认导出。因为 fs 是遵循 cjs 规范写的。即类似于这种导出：

module.exports = fs = {
  copyFile,
  copyFileSync,
}
1
2
3
4

如何解决

方案一

使用如下方式导入 fs 包

import * as fs from 'fs'

fs.copyFile('');
1
2
3

可以看下两种不同的导入方式编译后的结果

编译前

import fs from 'fs';
import * as fsBak from 'fs';

fs.copyFile('', '', () => {});
fsBak.copyFile('', '', () => {});
1
2
3
4
5

编译后

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = require("fs");
const fsBak = require("fs");
fs_1.default.copyFile('', '', () => { });
fsBak.copyFile('', '', () => { });
1
2
3
4
5
6

看到编译后的结果可以发现使用 import fs from 'fs'; 进行导入的，最终编译调用方法时，会从 default 属性中去调用方法，
因为 import 的默认导入认为模块的导出是使用 export default 进行的。但如果是 commonjs 模块它们并不是这样的。
所以 fs_1.default.copyFile 是不存在的。

方案二

开启 esModuleInterop 为 true

编译前

import fs from 'fs';

fs.copyFile('', '', () => {});
1
2
3

编译后

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = __importDefault(require("fs"));
fs_1.default.copyFile('', '', () => { });
1
2
3
4
5
6
7

可以看出 typescript 生成了一个 __importDefault 函数，它的作用是：
如果目标模块是 esm，就直接返回目标模块；否则将目标模块挂在一个对象的 default 上，返回该对象

var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
};
1
2
3

编译前

import * as fsBak from 'fs';

fsBak.copyFile('', '', () => {});
1
2
3

编译后

"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 fsBak = __importStar(require("fs"));
fsBak.copyFile('', '', () => { });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

可以看出 typescript 生成了一个 __importStar 函数，它的作用是：

• 如果目标模块是 esm，就直接返回目标模块
• 否则将目标模块上所有的除了 default 以外的属性挪到 result 上
• 将目标模块自己挂到 result.default 上

总结

esModuleInterop 选项的作用是支持使用 import cjs from 'cjs' 的方式引入 commonjs 包。