TypeScript 和 JS 模块导入误区

Question

我以为我了解导入的工作原理，但今天发现我不了解。

拥有纯 javascript 模块，例如：

function MyClass() { ... }

util.inherits(MyClass, EventEmitter);

MyClass.prototype.someMethod = funtion(x) { ... }

...

module.exports = MyClass;

现在我在 TypeScript 文件中导入这个模块（因为我认为它使用与 ES6 导入相同的语法）并发现它有效：

import * as MyWebSocket from '../utils/websocket';

而这 - 不是：

import MyWebSocket from '../utils/websocket';

这也不起作用：

import { MyWebSocket } from '../utils/websocket';

据我所知，如果模块导出带有 default 关键字的内容，如 export default X（等同的 ES5 语法是 module.exports = X），import X from Y 应该可以工作。如果导出非默认的东西，import { X } from Y 应该可以工作（ans similat ES5 语法是 module.exports = { X }）。

但我知道我错了。你能帮我解决一下吗？

Answer 1

module.exports = something 不是 ES5 语法，实际上 ES5 规范中没有 "module"。这个模块系统调用了Node.JS.

采用的CommonJS

要使 module.exports = X 中的 import X from Y 在 TypeScript 中工作，您应该启用 esModuleInterop: true，否则，您必须使用 import * as X from Y.

TypeScript 和 JS 模块导入误区

TypeScript and JS module import misunderstanding

ecmascript-5

node-modules

typescript

ecmascript-6