用于导入commonjs/amd模块的新es6语法,即`import foo = require('foo')`

Question

以前我可以这样做:

import foo = require('foo');

但是现在TypeScript(1.5)支持es6模块语法,在ES6模块语法中实现相同的正确方法是什么.

Answer 1

正确的方法是继续使用旧的导入语法.新的导入语法仅适用于ES模块,旧的导入语法适用于ES6之前的模块.故意这两者是截然不同的.import * as foo from 'foo'导入模块'foo'的所有属性,它不会导入默认值foo.

来自该功能的设计师:

• 导出默认声明始终声明一个名为default的导出成员,并始终作为exports.default的赋值发出.换句话说,export default始终具有ES模块语义.为了与Babel兼容,我们可以选择__esModule在模块具有默认导出时发出标记,但我们实际上不会将该标记用于任何事情.
• 的export =声明,该替代不同的实体,以代替模块本身的出口,总是射出作为赋值到module.exports.在使用的模块中进行其他导出是错误的export =.这是现有的TypeScript行为.
• 使用一个模块export =导出另一模块(是内部或外部模块)可以使用新ES6构建体被导入.特别是,方便的解构输入可以与这些模块一起使用.export =用于导出另一个模块的模式在.d.ts文件中很常见,这些文件提供内部模块的CommonJS/AMD视图(例如angular.d.ts).
• 使用模块export =来导出非模块实体地方本身必须使用现有的导入模块的import x = require("foo")语法是今天的情况.

2016更新: TypeScript编译器在某些时候开始允许import * as foo from 'legacy-module-foo'在某些情况下获取传统模块的默认导入.这违反了ES6规范(第15.2.1.16节,"值"*"表示导入请求是针对目标模块的命名空间对象的.").

当以这种方式导入的旧模块更新为ES6模块时,这些模块的"默认"导入将停止工作(因为* as foo导入应该是导入命名空间对象),如果您不知道这样做,这可能会非常混乱这是一个TypeScript/SystemJS hack.ES规范的未来TypeScript重新调整也可能导致它们中断.

因此,您可能更愿意继续使用上述旧式导入语法来加载旧模块,以避免让您自己和处理代码的其他开发人员混淆ES6命名空间导入的工作方式,并避免混淆重大更改.

Answer 2

从TypeScript 2.7 开始，有一个新esModuleInterop标志可用于启用 CommonJS/AMD/UMD 的默认导入。通过true在您的 中将该标志设置为tsconfig.json，这应该可以按预期工作：

import foo from 'foo';

Answer 3

ES6模块语法的相应语法是:

import * as foo from 'foo';

基本上将foo模块中的所有内容导入名称为的局部变量foo.