TypeScript 2.1自定义元素

Question

TypeScript 2.1显然现在支持编写自定义html元素（“ TypeScript 2.1的新功能”）

但是，我一直找不到有关应该如何工作的任何文档。

谁能通过理想的例子提供解释，说明它应该如何工作？

谢谢

Answer 1

super()我在该页面上能找到的关于自定义元素的唯一内容是ES5 中处理调用的新方法允许使用 TypeScript 来定义自定义元素。

这仅仅意味着您现在可以编写常规 ES2015 代码来定义自定义元素，并且新的 TypeScript 编译器将为它输出正确的ES5 代码。以前，输出的代码不会通过调用执行正确的操作super()，这会破坏自定义元素类。

没有这方面的 TypeScript 示例，因为这并不是 TypeScript 特有的。它只是遵循自定义元素标准：

class MyCustomElement extends HTMLElement {
    constructor() {
        super();
        this.foo = "bar";
    }

    doSomething() {
        console.log(this.foo);
    }
}

customElements.define("my-custom-element", MyCustomElement);

Answer 2

目前，当使用 TypeScript 以ES5为目标时，这是不可能的。自定义元素 API V1需要ES6/ES2015 样式的类。但是，如果您使用 TypeScript 以ES5为目标（例如，为了与 IE 11 兼容），所有类都会被转换为函数。

这不是 TypeScript 的限制，而是 Custom Elements API V1本身的限制。

您有两个选择：

1. 使用 TypeScript 以 ES2015 为目标，从而完全放弃 IE11 支持
2. 使用 TypeScript 以 ES5 为目标并使用：
   • 自定义元素 API 的填充，支持 ES5
   • 允许将本机自定义元素 API 与 ES5（以及转译的 TypeScript）一起使用的垫片

TypeScript 2.1 的发行说明具有误导性；这根本不是 TypeScript 问题。有关更多背景信息，请参阅本期。