TypeScript 2.1 自定义元素

Question

TypeScript 2.1 显然现在支持编写自定义 html 元素 ("What's new in TypeScript - 2.1")

但是我找不到任何关于它应该如何工作的文档。

谁能解释一下这是如何工作的，最好是举例说明？

谢谢

Answer 1

我在那个页面上唯一能找到关于自定义元素的是处理 super() ES5 调用的新方法 allows TypeScript to be used to define custom elements。

这只是意味着您现在可以编写常规的 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-style 类。但是，如果您使用 TypeScript 将 ES5 作为目标（例如，为了与 IE 11 兼容），all 类将被转换为函数。

这不是 TypeScript 的限制，而是自定义元素的限制 API V1 itself。

您有两个选择：

使用 TypeScript 以 ES2015 为目标，从而完全放弃对 IE11 的支持
使用 TypeScript 以 ES5 为目标并使用：
- 自定义元素的 polyfill API，支持 ES5
- a shim 允许本机自定义元素 API 与 ES5 一起使用（并因此转译 TypeScript）

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

TypeScript 2.1 自定义元素

TypeScript 2.1 Custom Elements

typescript

custom-element

typescript2.1