为什么 ES2015 类不能在 TypeScript 中可靠地转译？答案

【问题标题】：Why can't ES2015 classes be reliably transpiled in TypeScript?为什么 ES2015 类不能在 TypeScript 中可靠地转译？
【发布时间】：2019-06-06 08:03:51
【问题描述】：

我最近在MDN 上偶然发现了以下声明：

请注意，ES2015 类无法可靠地转译 Babel 6 或针对旧版浏览器的 TypeScript。您可以使用 Babel 7 或 Babel 6 的 babel-plugin-transform-builtin-classes，并在 TypeScript 中定位 ES2015，而不是 legacy。

对于 TypeScript > 3.x.x，此声明是否已经过时，或者任何人都可以解释 TypeScript 转译有哪些缺点？

在tsconfig.json 中将target 设置为ES5 时，我没有注意到问题，除了必须填充更多功能（如预期的那样）。

了解这些问题（如果存在），在处理自定义元素和 Web 组件时会非常有帮助。

【问题讨论】：

鉴于它链接到的 babel 插件，我认为这是关于转译作为或扩展内置类的类。
我也是这么想的，但是没找到证据，也没找到详细的后果。

标签： typescript ecmascript-6 web-component custom-element

【解决方案1】：

正如 Custom Element polyfill 的 Github 页面中所解释的，自定义元素被定义为 HTMLElement 类的扩展，它需要一个无法用 ES5 Javascript 完美模拟的新 ES6 功能：super()/Reflect.construct() ：

规范要求元素调用 HTMLElement 构造函数。通常，ES5 样式类会执行类似 HTMLElement.call(this) 的操作来模拟 super()。但是，HTMLElement 必须作为构造函数调用，而不是作为普通函数调用，即使用 Reflect.construct(HTMLElement, [], MyCEConstructor)，否则会抛出异常。

【讨论】：