如果 esModuleInterop 是 true 配置 TypeScript 转译，我是否需要明确的 allowSyntheticDefaultImports？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52576203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Do I ever need explicit allowSyntheticDefaultImports if esModuleInterop is true configuring TypeScript transpilation?
提问by Konrad Viltersten
I need confirmation on the following theory. According to TS docs, there are two options that can be set in tsconfig.json.
我需要确认以下理论。根据TS 文档，有两个选项可以在tsconfig.json 中设置。
--allowSyntheticDefaultImports:Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
--esModuleInterop:Emit __importStar and __importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.
--allowSyntheticDefaultImports：允许从没有默认导出的模块中默认导入。这不会影响代码发出，只是类型检查。
--esModuleInterop：发出 __importStar 和 __importDefault 帮助程序以实现运行时 babel 生态系统兼容性，并启用 --allowSyntheticDefaultImports 以实现类型系统兼容性。
When I google around, I see both being set to true(at least in regard to the behavior I'm aiming at). However, as far I understand the docs, TS and transpilation to JS, it makes no sense to use them both.
当我在 google 周围搜索时，我看到两者都被设置为true（至少就我所针对的行为而言）。但是，据我了解文档、TS 和转译为 JS，同时使用它们是没有意义的。
The way I figure, I might use the latter only and entirely remove the former. However, being cautious and humble, I'm not entirely certain and worry that I'm doing something less bright without realizing it at the moment.
我认为，我可能只使用后者并完全删除前者。然而，作为谨慎和谦虚，我并不完全确定并担心我目前正在做一些不那么聪明的事情而没有意识到这一点。
I fear that it's something inappropriate that's going to bite me in the donkey later on causing hours of lamenting and hair-pulling while desperately trouble-shooting. The basis for the skepticism is that both options are available, so I'm inferring that there are four cases where all the combinations (true/falseetc.) are required but I can't imagine which they are.
我担心这是不合适的事情，稍后会在驴子上咬我，导致数小时的哀叹和拉扯头发，同时拼命解决问题。怀疑的基础是这两个选项都可用，所以我推断有四种情况需要所有组合（真/假等），但我无法想象它们是哪一种。
Is it entirely safe to skip --allowSyntheticDefaultImportsif --esModuleInterop: truein compilerOptions? ANd if so, why do we have that option?
如果--esModuleInterop: truein compilerOptions跳过--allowSyntheticDefaultImports是否完全安全？如果是这样，为什么我们有这个选择？
Bonus question: when is it required with all the four combinations (true/false) for those two options?
额外问题：这两个选项的所有四种组合（true/false）何时需要？
采纳答案by Burt_Harris
If you mean can you leave allowSyntheticDefaultImportsundefined and define only esModuleInterop, the answer should be YES moving forward, but there has been an issue with this. PR #26866seems to be a fix, only merged September 17, so it there may be some risk in the short term.
如果您的意思是 can you leave allowSyntheticDefaultImportsundefined 和 define only esModuleInterop，那么答案应该是 YES 向前推进，但是这存在一个问题。 PR #26866好像是一个修复，9 月 17 日才合并，所以短期内可能会有一些风险。
As why both exist, I believe these were both a part of addressing compatibility issues with imports of Babel-transpiled modules, the original PR added the allowSyntheticDefaultImports option to certain compile-time messages, but in practice didn't address the runtime behavior of the imports. So --esModuleInterop was added later. See TypeScript-Handbook/#816for discussion of how to update the docs...
至于为什么两者都存在，我相信这些都是解决 Babel 转译模块导入兼容性问题的一部分，原始 PR 在某些编译时消息中添加了 allowSyntheticDefaultImports 选项，但实际上并没有解决进口。所以后来添加了--esModuleInterop。有关如何更新文档的讨论，请参阅TypeScript-Handbook/#816...
回答by Souldrinker
Well, my understanding is that the allowSyntheticDefaultImportsis for being able to load CommonJS libraries in a simpler way if you target es6+ (in dev time) while esModuleInteropis for simplifying these imports (in runtime) if you target for example AMD (like I do).
好吧，我的理解是，allowSyntheticDefaultImports如果您的目标是 es6+（在开发时间），esModuleInterop则能够以更简单的方式加载 CommonJS 库，而如果您的目标是 AMD（就像我一样），则是为了简化这些导入（在运行时）。
According to the docs you shouldn't need to specify allowSyntheticDefaultImportsexplicitly if you have esModuleInteropenabled, but the reason I had to enable also the allowSyntheticDefaultImportsis that Resharper seems to look at that that flag when doing syntax checking in Visual Studio. Sure it built and worked ok anyway with only esModuleInterop, but I got a lot of red warnings from Resharper until I enabled also the other flag.
根据文档，您不需要allowSyntheticDefaultImports明确指定是否已esModuleInterop启用，但我还必须启用的原因allowSyntheticDefaultImports是 Resharper 在 Visual Studio 中进行语法检查时似乎会查看该标志。当然它只用 就可以构建和工作esModuleInterop，但是我从 Resharper 收到了很多红色警告，直到我也启用了另一个标志。
