用于导入 commonjs/amd 模块的新 es6 语法，即`import foo = require('foo')` [英] New es6 syntax for importing commonjs / amd modules i.e. `import foo = require('foo')`

问题描述

以前我可以这样做:

import foo = require('foo');

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

But now that TypeScript (1.5) supports es6 module syntax, what is the correct way to achieve the same in ES6 module syntax.

推荐答案

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

The correct way is to continue using the old import syntax. The new import syntax is for ES modules only, the old import syntax is for pre-ES6 modules. The two are distinct, intentionally so. import * as foo from 'foo' imports all the properties of the module 'foo', it does not import the default value as 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") 导入 语法就像今天的情况一样.

• An export default declaration always declares an exported member named default and is always emitted as an assignment to exports.default. In other words, export default consistently has ES module semantics. For compatibility with Babel we could optionally emit an __esModule marker when a module has a default export, but we wouldn't actually use that marker for anything.
• An export = declaration, which substitutes a different entity to be exported in place of the module itself, is always emitted as an assignment to module.exports. It is an error to have other exports in a module that uses export =. This is the existing TypeScript behavior.
• A module that uses export = to export another module (be that an internal or external module) can be imported using the new ES6 constructs. In particular, the convenient destructuring imports can be used with such modules. The pattern of using export = to export another module is common in .d.ts files that provide a CommonJS/AMD view of an internal module (e.g. angular.d.ts).
• A module that uses export = to export a non-module entity in place of the module itself must be imported using the existing import x = require("foo") syntax as is the case today.

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

2016 update: The TypeScript compiler at some point started allowing import * as foo from 'legacy-module-foo' to get the default import of a legacy module in certain circumstances. This is a violation of the ES6 specification (§15.2.1.16, "The value "*" indicates that the import request is for the target module’s namespace object.").

当您以这种方式导入的遗留模块更新为 ES6 模块时，这些模块的默认"导入将停止工作(因为 * as foo 导入是假设导入命名空间对象)，如果您不知道这样做是 TypeScript/SystemJS hack，这可能会非常令人困惑.未来 TypeScript 对 ES 规范的重新调整也有可能导致它们中断.

When legacy modules you import in this manner are updated to ES6 modules, the "default" imports for those modules will stop working (because * as foo imports are supposed to be importing namespace objects), which may be extremely confusing if you don’t know that doing this is a TypeScript/SystemJS hack. It is also possible that a future TypeScript realignment to the ES specification will cause them to break.

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

As such, you should probably prefer to continue to use the legacy import syntax described above to load legacy modules to avoid confusing yourself and other developers working on your code about how ES6 namespace imports work, and to avoid confusing breaking changes.

这篇关于用于导入 commonjs/amd 模块的新 es6 语法，即`import foo = require('foo')`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！