javascript - 为什么在 JavaScript 中使用 TypeScript 类需要 `.default` ？

Question

我有一个 TypeScript 类，它是 npm 包的一部分。为了维护，我将类分解成多个类，并通过继承构建最终的导出类。我认为这对我的问题无关紧要，但我认为最好公开这一点信息。我在 ChildClass.ts 中这样定义类:

export default ChildClass extends ParentClass{…}

Tsc 的 outDir 为“build”。
package.json 文件有一个属性 "main": "build/ChildClass.js"

同时使用 npm link 和 npm pack 我可以部署包并在 TypeScript 演示包中毫无问题地使用它。但是，如果我尝试在 JavaScript 演示中使用该包，

const ChildClass = require('my-package')
const childClass = new ChildClass()

我得到了错误
不能对类型缺少调用或构造 signature.ts(2351) 的表达式使用“new”

如果我通过添加 .default 来更改 new 语句，如下所示:

const childClass = new ChildClass.default()

它有效。我通过查看编译的 Javascript 弄清楚了这一点。必须使用 .default 让我感到震惊，因为期望我的包的(假设的)JavaScript 消费者知道这是一件不合理的事情。我还发现，如果我避免使用 export default 并只使用 export，那么包的工作方式更可预测，所以这就是我所做的。现在我可以使用了

const {ChildClass} = require('my-package')
const childClass = new ChildClass()

和类似的语法

import {ChildClass} from 'my-package'
const childClass = new ChildClass()

typescript 。

不过，我还是想知道这个神奇的 .default 属性是什么以及我为什么需要它。

此外，我发现的与此错误相关的所有其他引用资料似乎与我所看到的内容无关；我认为记录下来可能会帮助遇到类似错误的其他人。

Answer 1

背景:

ECMAScript 语言规范 specified export default 的导出名称只是 "default"。因此，您可以将其视为名为 "default" 的普通导出。

将 ES6 模块编译为 CommonJS 只有事实上的标准，因为 ECMAScript 语言规范从未提及过它。目前的转译器(TypeScript 和 Babel)只是将所有导出内容放到 module.exports 中，默认导出内容不再特殊。

只有当消费者也理解上述“标准”(例如TypeScript、Babel和Webpack)时，他们才会将import ChildClass from 'my-package语句转换为const ChildClass = require( 'my-package').default 给你。当然，Node.js 是分开处理 CommonJS 和 ES6 模块的，并没有这样做。

(实际上它更复杂，因为 Babel 混合了 import DefaultExport from 'some-package' 和 import * as AllExports from 'some-package，现代模块消费者必须尝试两者)

---

解决方案:

TypeScript 有一个 special syntax export = 与传统的 CommonJS 消费者一起工作(它不是在 JavaScript 中)。如果您将 export default class ChildClass... 更改为 export = class ChildClass...，它应该会按预期工作。