Do I ever need explicit allowSyntheticDefaultImports if esModuleInterop is true configuring TypeScript transpilation?

I need confirmation on the following theory. According to TS docs, there are two options that can be set in tsconfig.json.

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

  2. --esModuleInterop: Emit __importStar and __importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.

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.

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/false etc.) are required but I can't imagine which they are.

Is it entirely safe to skip --allowSyntheticDefaultImports if --esModuleInterop: true in compilerOptions? ANd if so, why do we have that option?

Bonus question: when is it required with all the four combinations (true/false) for those two options?


If you mean can you leave allowSyntheticDefaultImports undefined and define only esModuleInterop, the answer should be YES moving forward, but there has been an issue with this. PR #26866 seems to be a fix, only merged September 17, so it there may be some risk in the short term.

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/#816 for discussion of how to update the docs...

Well, my understanding is that the allowSyntheticDefaultImports is for being able to load CommonJS libraries in a simpler way if you target es6+ (in dev time) while esModuleInterop is for simplifying these imports (in runtime) if you target for example AMD (like I do).

According to the docs you shouldn't need to specify allowSyntheticDefaultImports explicitly if you have esModuleInterop enabled, but the reason I had to enable also the allowSyntheticDefaultImports is 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.

According to the relevant documentation here : https://webpack.js.org/guides/typescript/, both options have different significance. Based on the project code and dependent library syntax, either/both options may be required.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

  • Understanding esModuleInterop in tsconfig file
    I was checking out someone .tsconfig file and there I spotted --esModuleInterop This is his .tsconfig file { "compilerOptions": { "moduleResolution": "node", "target": "es6", "module": "commonjs", "lib": ["esnext"], "strict": true, "sourceMap": true, "declaration": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "declarationDir": "./dist", "outDir": "./dist", "typeRoots": ["node_modules/@types"] }, "include": ["src/**/*.ts"], "exclude": ["node_modues"] } Here, My primary question is what is "esModuleInterop"
  • “……解析为非模块实体并且无法使用此构造导入”是什么意思?(What does “… resolves to a non-module entity and cannot be imported using this construct” mean?)
    问题 我有一些TypeScript文件: MyClass.ts class MyClass { constructor() { } } export = MyClass; 我的功能 function fn() { return 0; } export = fn; MyConsumer.ts import * as MC from './MyClass'; import * as fn from './MyFunc'; fn(); 这在尝试使用new时给我错误 模块“ MyClass”解析为非模块实体,无法使用此构造导入。 当尝试调用fn() 无法调用类型缺少调用签名的表达式。 是什么赋予了? 回答1 为什么它不起作用 import * as MC from './MyClass'; 这是ES6 / ES2015风格的import语法。 确切的含义是“获取从./MyClass加载的模块名称空间对象,并在本地将其用作MC ”。 值得注意的是,“模块名称空间对象”仅由具有属性的普通对象组成。 ES6模块对象不能作为函数或new调用。 再说一遍: ES6模块命名空间对象不能作为函数或new调用。 您import使用* as X从模块import的事物定义为仅具有属性。 在降级的CommonJS中,可能不会完全遵循此标准,但是TypeScript会告诉您该标准定义的行为是什么。 有什么用?
  • How can I disable all typescript type checking?
    I would like to use TypeScript in the future, but for right now, I have chosen to install TypeScript in Create React App. (Later, I will go back and add types) Therefore, I would like to disable all type checks. Right now, when I do something like this: <PlaceSearchBar placeSearchChanged={this.placeSearchChanged} /> class PlaceSearchBar extends React.Component { ... } I get an error: Type error: Type '{ placeSearchChanged: (place: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<PlaceSearchBar> & Readonly<{ children?: ReactNode; }> & Readonly<{}>'
  • Cannot find name 'it' in Jest TypeScript
    I try to create an intial setup for Jest in React + TypeScript. I have completed the initial setup and try to check whether the test runs. When I run the test using the command npm test, I am getting the following error: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`. I have installed the types for Jest as well as removed the types in tsconfig.json, but still I am getting the same error. { "compilerOptions": { "target": "es6", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true,
  • React脚手架集成Typescript
    最近一直想搭建个集成React,TypeScript的开发环境,但是无从下手,一番摸索后总算折腾出来了,记录下步骤。 React有create-react-app,这种脚手架的方式好处很明显,支持ES6新增语法、api,每次保存自动更新改变的内容(不用再每次手动关闭重启Node服务器),所以弄出脚手架: $ npx create-react-app react_typescript $ cd react_typescript 有了脚手架,然后需要集成typescript,查阅官方文档从Javascript迁移到Typescript,步骤如下: 安装Typescript: $ npm install typescript 根目录下创建配置文件tsconfig.json,写入以下内容: { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module":
  • Problem with Visual Studio Code using “react-jsx” as jsx value with create-react-app
    I'm struggling with following "error" in VSCode : Argument for '--jsx' option must be: 'preserve', 'react-native', 'react' Hence, react-scripts (create-react-app) automatically sets the jsx key to react-jsx value, when react value seems to work. Actually, the code works perfectly and displays the page I want, but the IDE is underlining kinda everything as errors, saying : Cannot use JSX unless the '--jsx' flag is provided. Here is my tsconfig.json : { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true
  • 如何将JSON文件导入TypeScript文件?(How to import JSON File into a TypeScript file?)
    问题 我正在使用Angular Maps构建地图应用程序,并希望导入JSON文件作为定义位置的标记列表。 我希望将此JSON文件用作app.component.ts中的marker []数组。 而不是在TypeScript文件中定义标记的硬编码数组。 导入此JSON文件以在我的项目中使用的最佳过程是什么? 任何方向都非常感谢! 回答1 直到最近的打字稿更新之前,Aonepathan的单行代码都为我工作。 我发现Jecelyn Yeen的帖子建议将该代码段发布到您的TS定义文件中 使用以下内容将文件typings.d.ts添加到项目的根文件夹中 declare module "*.json" { const value: any; export default value; } 然后像这样导入您的数据: import * as data from './example.json'; 2019年7月更新: Typescript 2.9(文档)引入了一种更好,更智能的解决方案。 脚步: 在tsconfig.json文件中的此行添加resolveJsonModule支持: "compilerOptions": { ... "resolveJsonModule": true } import语句现在可以假定默认导出: import data from './example.json'; 现在
  • 打字稿:错误TS2693:'Promise'仅指一种类型,但在此处被用作值(typescript: error TS2693: 'Promise' only refers to a type, but is being used as a value here)
    问题 我正在尝试将Typescript用于我的AWS Lambda,并且在使用promise的地方遇到以下错误。 error TS2693: 'Promise' only refers to a type, but is being used as a value here. 我尝试在代码中使用以下变体 使用Promise构造函数 responsePromise = new Promise((resolve, reject) => { return reject(new Error(`missing is needed data`)) }) 使用Promise.reject responsePromise = Promise.reject(new Error(`Unsupported method "${request.httpMethod}"`)); 版本号 以下是我的开发依赖项中的版本: "typescript": "^2.2.2" "@types/aws-lambda": "0.0.9", "@types/core-js": "^0.9.40", "@types/node": "^7.0.12", tsconfig.json的内容 { "compileOnSave": true, "compilerOptions": { "module": "commonjs", //
  • Is there a way to use --esModuleInterop in tsconfig as opposed to it being a flag?
    Typescript v 2.7 released really neat flag called --esModuleInterop https://www.typescriptlang.org/docs/handbook/compiler-options.html, I am trying to figure out if there is a way to use it with tsconfig.json as currently it doesn't seem to be documented : http://www.typescriptlang.org/docs/handbook/tsconfig-json.html Unless it somehow works with module? Main use case I want to achieve is to be able to import things like this import React from "react" as opposed to import * as React from "react" And do so from my tsconfig if possible
  • 找不到模块“模块名称”的声明文件。 '/path/to/module-name.js'隐式具有'any'类型(Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type)
    问题 我阅读了TypeScript模块解析的工作原理。 我有以下存储库:@ ts-stack / di。 编译后的目录结构如下: ├── dist │ ├── annotations.d.ts │ ├── annotations.js │ ├── index.d.ts │ ├── index.js │ ├── injector.d.ts │ ├── injector.js │ ├── profiler.d.ts │ ├── profiler.js │ ├── providers.d.ts │ ├── providers.js │ ├── util.d.ts │ └── util.js ├── LICENSE ├── package.json ├── README.md ├── src │ ├── annotations.ts │ ├── index.ts │ ├── injector.ts │ ├── profiler.ts │ ├── providers.ts │ └── util.ts └── tsconfig.json 在我的package.json中,我写了"main": "dist/index.js" 。 在Node.js中,一切正常,但是TypeScript: import {Injector} from '@ts-stack/di'; 找不到模块'@ ts-stack
  • 搭建自己的React+Typescript环境
    前言 前阵子在自己学习React,最开始上手使用的creat-react-app来创建自己的项目,2版本之后的create-react-app已经支持了很多功能,比如sass、数据mock、typescript支持等等,也升级了相关依赖babel、webpack到一个最新的版本,具体可以参照Create React App 中文文档,但是它将项目的webpack配置等内容给藏起来了,想要自己配置的话还要npm run eject才可见,不过对于我这种初学者已经足够了,但是本着折腾的精神,在掘金看了好多大佬的配置文章,终于折腾出一个自己的项目模板,如果有什么问题或者不对的地方,希望大佬们能及时指出,最后有项目地址~ 项目简介 主要的依赖以及版本 webpack4+babel7+typescript3+react16.8+antd3+react-router5+eslint5+ 初始化项目 1.创建一个目录,名字按自己喜好来 mkdir react-ts-template cd react-ts-template 2.初始化项目,填写项目信息 yarn init -y 或者 npm init -y 安装webpack yarn add webpack -D 或者 npm i webpack -D yarn add webpack-cli -D 或者 npm i webpack-cli
  • 打字稿ReferenceError:导出未定义(Typescript ReferenceError: exports is not defined)
    问题 尝试按照官方手册实施模块时,出现以下错误消息: 未捕获的ReferenceError:未定义导出在app.js:2 但无处在我的代码做我曾经使用的名称exports 。 我怎样才能解决这个问题? 档案文件 应用程序 let a = 2; let b:number = 3; import Person = require ('./mods/module-1'); 模块1.t export class Person { constructor(){ console.log('Person Class'); } } export default Person; tsconfig.json { "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "sourceMap": true, "outDir": "scripts/" }, "exclude": [ "node_modules" ] } 回答1 编辑: 根据您是否不再以es5目标,此答案可能不起作用,我将尽力使答案更完整。 原始答案 如果未安装CommonJS(定义了导出),则必须从tsconfig.json删除以下行: "module": "commonjs", 根据评论,仅此功能可能不适用于更高版本的tsc 。
  • 在if语句中的布尔值(boolean in an if statement)
    问题 今天,我考虑到我在学校作业中检查变量是对还是错的方式,对代码进行了评论。 我写的代码是这样的: var booleanValue = true; function someFunction(){ if(booleanValue === true){ return "something"; } } 他们说最好这样写: var booleanValue = true; function someFunction(){ if(booleanValue){ return "something"; } } 我对“ === true”部分的评论是,它不是必需的,并且可能引起混乱。 但是我的想法是,最好检查变量是否为布尔值,特别是因为Javascript是一种松散类型的语言。 在第二个示例中,字符串也将返回“ something”; 所以我的问题; 将来松散“ === true”部分是否更整洁,还是检查变量类型的优良作法。 编辑:在我的“真实”代码中,布尔值表示是否已删除图像,因此boolValue唯一应具有的值是true或false。 例如,0和1不应在该变量中。 回答1 首先,事实是: if (booleanValue) 将满足if语句的任何truthy值booleanValue包括true ,任何非零数量,任何非空字符串值,任何物体或阵列基准,等... 另一方面: if
  • 开始使用 TypeScript 和 React
    原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些关于 TypeScript 比较好的博文,跟随这些博文,我最近开始使用 TypeScript。今天,我将展示如何从零开始建立一个 TypeScript 工程,以及如何使用 Webpack 管理构建过程。我也将陈述关于 TypeScript 的第一印象,尤其是使用 TypeScript 和 ReactJS。 我不会深入到 TypeScript 语法的具体细节,你可以阅读 TypeScript handbook 或者免费书籍 TypeScript Deep Dive,它们是关于 TypeScript 比较好的入门材料。 **更新:**如果你想用德语阅读这篇文章,你可以 thanks to the awesome folks at Reactx.de 安装配置 TypeScript 第一步要做的事情是使用 Yarn 将 TypeScript 安装到本地的node_modules目录,首先,使用yarn init创建一个工程: yarn init yarn add typescript 当你安装了 TypeScript,你就可以使用 tsc 命令行工具,这个工具可以编译 TypeScript
  • 在TypeScript中导入json文件(Importing json file in TypeScript)
    问题 我有一个类似于以下内容的JSON文件: { "primaryBright": "#2DC6FB", "primaryMain": "#05B4F0", "primaryDarker": "#04A1D7", "primaryDarkest": "#048FBE", "secondaryBright": "#4CD2C0", "secondaryMain": "#00BFA5", "secondaryDarker": "#009884", "secondaryDarkest": "#007F6E", "tertiaryMain": "#FA555A", "tertiaryDarker": "#F93C42", "tertiaryDarkest": "#F9232A", "darkGrey": "#333333", "lightGrey": "#777777" } 我正在尝试将其导入.tsx文件。 为此,我将其添加到类型定义中: declare module "*.json" { const value: any; export default value; } 我正在这样导入。 import colors = require('../colors.json') 在文件中,我将颜色primaryMain用作colors.primaryMain 。 但是我得到一个错误: 属性
  • Magento XML使用之前/之后放置块几乎没有用(Magento XML using before/after to place blocks hardly ever works)
    问题 我是Magento的前端开发人员,已经建立了很多自己的主题,我想更好地了解Magento的XML块定位... 我通常使用local.xml文件来操作所有内容,我可以定义一个块,如下所示: <cms_index_index> <reference name="root"> <block type="core/template" name="example_block" as="exampleBlock" template="page/html/example-block.phtml"/> </reference> </cms_index_index> 这将在主页( cms_index_index )上创建一个块,并且由于该块是在root下创建的,所以我通常通过添加以下内容来调用该块: <?php echo $this->getChildHtml('exampleBlock') ?> ...到1column.phtml (或2columns-left / right.phtml , 3columns.phtml等)。 通过将cms_index_index替换为适当的页面标记,可以将该块放置在任何页面上。 在整个核心XML文件和教程中,我看到了类似以下内容的内容: <reference name="root"> <block type="core/template" name=
  • 为什么我会使用push_back而不是emplace_back?(Why would I ever use push_back instead of emplace_back?)
    问题 C ++ 11向量具有新功能emplace_back 。 与push_back (依靠编译器优化来避免复制)不同, emplace_back使用完美转发将参数直接发送到构造函数以就地创建对象。 在我看来, emplace_back可以完成push_back可以做的所有事情,但是在某些情况下它会做得更好(但永远不会更糟)。 我必须使用push_back原因是什么? 回答1 在过去的四年中,我已经对这个问题进行了很多思考。 我得出的结论是,大多数关于push_back与emplace_back解释emplace_back没有完整介绍。 去年,我在C ++ Now上发表了有关C ++ 14中类型归纳的演讲。 我从13:49开始讨论push_back与emplace_back ,但是在此之前有有用的信息提供了一些支持证据。 真正的主要区别与隐式构造函数与显式构造函数有关。 考虑以下情况:我们有一个要传递给push_back或emplace_back 。 std::vector<T> v; v.push_back(x); v.emplace_back(x); 在优化编译器处理完这一点之后,就生成的代码而言,这两个语句之间没有任何区别。 传统观点认为, push_back将构造一个临时对象,然后将其移入v而emplace_back将转发该参数并直接将其构造而无需复制或移动。
  • 在构造函数中抛出异常是否永远不安全?(Is it ever not safe to throw an exception in a constructor?)
    问题 我知道从析构函数中抛出异常并不安全,但是从构造函数中抛出异常永远不安全吗? 例如,对于全局声明的对象会发生什么? 用gcc进行的快速测试让我中止了,这是否总是可以保证的? 您将使用什么解决方案来解决这种情况? 在任何情况下构造函数都可以引发异常而不会留下我们期望的东西。 编辑:我想我应该补充一点,我试图理解在什么情况下我可能会发生资源泄漏。 看起来明智的做法是在抛出异常之前手动释放在构建过程中获得的部分资源。 在今天之前,我从来不需要在构造函数中引发异常,因此尝试了解是否存在任何陷阱。 即这也安全吗? class P{ public: P() { // do stuff... if (error) throw exception } } dostuff(P *p){ // do something with P } ... try { dostuff(new P()) } catch(exception) { } 分配给对象P的内存会释放吗? EDIT2:忘记提及在这种特殊情况下,dostuff将对P的引用存储在输出队列中。 P实际上是一条消息,而dostuff接收该消息,将其路由到适当的输出队列并发送。 本质上,一旦掌握了东西,它就会在东西内部释放。 我想我想在P周围放置一个autoptr并在添加东西后在autoptr上调用release以防止内存泄漏,这是正确的吗?
  • Why does the argument for Array.prototype.includes(searchElement) need the same type as array elements?
    I honestly don't know if something is wrong with my settings or of if this is a typescript feature. In the following example: type AllowedChars = 'x' | 'y' | 'z'; const exampleArr: AllowedChars[] = ['x', 'y', 'z']; function checkKey(e: KeyboardEvent) { if (exampleArr.includes(e.key)) { // <-- here // ... } } The typescript compiler complains that Argument of type 'string' is not assignable to parameter of type 'AllowedChars'. But where am I assigning? Array.prototype.includes returns a boolean (which I am not storing). I could silence the error by a type assertion, like this: if (exampleArr
  • TypeScript 中高级应用与最佳实践
    TypeScript 中高级应用与最佳实践当我们讨论 TypeScript 时,我们在讨论什么?TypeScript 的定位JavaScript 的超集编译期行为不引入额外开销不改变运行时行为始终与 ESMAScript 语言标准一致 (stage 3 语法)TypeScript 中的 Decorator 较为特殊,为 Angular 团队和 TypeScript 团队交易的结果,有兴趣可自行搜索相关资料。而且近期 EcmaScript 规范中的 decorator 提案内容发生了剧烈变动,建议等此语法标准完全稳定后再在生产项目中使用。本文只讨论图中蓝色部分。类型的本质是契约JSDoc 也能标注类型,为什么要用 TypeScript?JSDoc 只是注释,其标注没有约束作用TS 有—checkJs 选项,但不好用TS 会自动推断函数返回值类型,为什么要多此一举标注出来?契约高于实现检查返回值是否写错写 return 时获得提醒开始之前几组 VSCode 快捷键代码补全 control + 空格 ctrl + 空格快速修复 command + . ctrl + .重构(重命名)fn + f2 f2一个网站TypeScript Playground初始化项目自行配置123456789"compilerOptions": { "esModuleInterop": true,