esModuleInterop生成文档中列出的helper。查看生成的代码，我们可以清楚地看到这些代码的作用:

//ts
import React from 'react'
//js
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));

__importDefault:如果模块不是es模块，则require返回的内容将成为默认值。这意味着如果你在commonjs模块上使用默认导入，整个模块实际上是默认的。

__importStar最好在这个公关中描述:

TypeScript将命名空间导入(即import * as foo from "foo")视为等同于const foo = require("foo")。这里的事情很简单，但是如果导入的主要对象是一个原语或具有调用/构造签名的值，则无法解决问题。 ECMAScript基本上说命名空间记录是一个普通对象

Babel首先在模块中要求，并检查名为__esModule的属性。如果__esModule被设置为true，则行为与TypeScript相同，但除此之外，它合成了一个命名空间记录，其中:

1. 所有属性都从所需的模块中提取出来，并作为命名导入提供。
2. 最初需要的模块作为默认导入可用。

所以我们得到这个:

// ts
import * as React from 'react'


// emitted js
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));

allowSyntheticDefaultImports是所有这些的同伴，将其设置为false不会改变所发出的helper(它们看起来仍然相同)。但是如果你对commonjs模块使用默认的导入，它会引发一个typescript错误。因此，如果allowSyntheticDefaultImports为false，则import React from 'react'将引发错误Module '".../node_modules/@types/react/index"' has no default export.。

问题陈述

当我们想要将CommonJS模块导入到ES6模块代码库时，出现了问题。

在这些标志之前，我们必须导入CommonJS模块，使用* (* as something) import:

// node_modules/moment/index.js
exports = moment

// index.ts file in our app
import * as moment from 'moment'
moment(); // not compliant with es6 module spec


// transpiled js (simplified):
const moment = require("moment");
moment();

我们可以看到*在某种程度上等价于exports变量。它工作得很好，但不符合es6模块规范。在规范中，星型导入中的命名空间记录(在我们的例子中是moment)只能是一个普通对象，不可调用(moment()是不允许的)。

解决方案

通过标记esModuleInterop，我们可以按照es6模块规范导入CommonJS模块。现在我们的导入代码看起来像这样:

// index.ts file in our app
import moment from 'moment'
moment(); // compliant with es6 module spec


// transpiled js with esModuleInterop (simplified):
const moment = __importDefault(require('moment'));
moment.default();

它可以工作，并且在es6 modules spec中完全有效，因为moment不是命名空间from star import，而是默认导入。

但它是如何工作的呢?正如你所看到的，因为我们做了默认导入，所以我们在moment对象上调用了default属性。但是我们没有在moment库中的exports对象上声明default属性。关键是__importDefault函数。它将module (exports)赋值给CommonJS模块的default属性:

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

如你所见，我们按原样导入es6模块，但CommonJS模块被包装成一个带有default键的对象。这使得在CommonJS模块中导入默认值成为可能。

__importStar也做类似的工作——它返回的是未受影响的esModules，但将CommonJS模块转换为具有default属性的模块:

// index.ts file in our app
import * as moment from 'moment'


// transpiled js with esModuleInterop (simplified):
const moment = __importStar(require("moment"));
// note that "moment" is now uncallable - ts will report error!

var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};

合成进口

那allowSyntheticDefaultImports呢——它是干什么用的?现在文档应该清楚了:

Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

在moment类型中，我们没有指定默认导出，也不应该指定，因为只有打开标记esModuleInterop时才可用。因此，如果我们想从没有默认导出的第三方模块导入default， allowSyntheticDefaultImports将不会报告错误。

附注:这个答案是我从阅读@Krzysztof Grzybek的答案和我提供的文档链接中得到的理解

// node_modules/moment/index.js
1. exports = moment

// index.ts file in our app
2. import * as moment from 'moment'
3. moment(); // not compliant with es6 module spec


// transpiled js (simplified):
4. const moment = require("moment");
5. moment();

This expression is not callable.
Type 'typeof moment' has no call signatures.

因为，AMD/UMD模块不被视为es6模块，并且使用了两个单独的函数来导入

，即__importStar和__importDefault
https://www.typescriptlang.org/tsconfig#esModuleInterop
，因此第3行试图导入对象，因此它是不可调用的。然而，我所见过的大多数项目都试图保持esModuleInterop:false，因此他们不想将UMD模块与es6模块区别对待