TypeScript 2.1 自定义元素

Posted 2023-03-07

【中文标题】TypeScript 2.1 自定义元素

【英文标题】：TypeScript 2.1 Custom Elements

【发布时间】：2017-04-26 10:05:46

【问题描述】：

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

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

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

谢谢

【参考方案1】：

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

这只是意味着您现在可以编写常规的 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);

【讨论】：

你。这肯定会让我的生活更轻松。现在你说的很明显了。可惜他们没有在文档中包含这样的示例

我收到以下错误Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function

这很酷！但它只适用于 HTMLElement。为什么我不能扩展 HTMLDiveElement 或 HTMLAnchorElement ？

@Kokodoko 这不是 TypeScript 或 OPs 问题的范围。 :) 欲了解更多信息，请查看developers.google.com/web/fundamentals/web-components/… 或提高声音github.com/w3c/webcomponents/issues/509

你错了。 TypeScript 无法为自定义元素 API V1 输出 正确 ES5 代码，因为 API 本身仅适用于 ES2015 类。 TypeScript 没有特殊的逻辑来解决它，在技术上也不可能。发行说明中的​​信息具有误导性。

【参考方案2】：

目前，当使用 TypeScript 定位 ES5 时，这是不可能。 Custom Elements API V1 需要 ES6/ES2015 风格的类。但是，如果您使用 TypeScript 来定位 ES5（例如为了与 IE 11 兼容）所有类都会被转译为函数。

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

你有两个选择：

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

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