背景

如下代码

import fs from fs;

fs.copyFile();

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

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

module.exports = fs = {
          
   
  copyFile,
  copyFileSync,
}

如何解决

方案一

使用如下方式导入 fs 包

import * as fs from fs

fs.copyFile();

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

编译前

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

fs.copyFile(, , () => {
          
   });
fsBak.copyFile(, , () => {
          
   });

编译后

"use strict";
Object.defineProperty(exports, "__esModule", {
          
    value: true });
const fs_1 = require("fs");
const fsBak = require("fs");
fs_1.default.copyFile(, , () => {
          
    });
fsBak.copyFile(, , () => {
          
    });

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

方案二

开启 esModuleInterop 为 true

编译前

import fs from fs;

fs.copyFile(, , () => {
          
   });

编译后

"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(, , () => {
          
    });

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

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

编译前

import * as fsBak from fs;

fsBak.copyFile(, , () => {
          
   });

编译后

"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(, , () => {
          
    });

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

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

总结

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