Question

我正在尝试在TypeScript中实例化新的HTMLDivElement

var elem = new HTMLDivElement();

但浏览器抛出

Uncaught TypeError: Illegal constructor.

解决方法似乎是使用

var elem = document.createElement('div');

但由于种种原因，我认为这不是最理想的。

为什么我不能在 lib.d.ts 中有 new 关键字时直接实例化DOM元素？

declare var HTMLDivElement: {
    prototype: HTMLDivElement;
    new (): HTMLDivElement;
}

Answer 1

请注意，您在此处遇到的错误是“非法构造函数”。例如，如果您要编写new {}()，则会遇到错误“对象不是函数”。

因此，从技术上讲，HTMLDivElement 确实有一个构造函数。只是这个特定的构造函数抛出异常而不是创建对象。

通常lib.d.ts只会排除此类无用的签名，但TypeScript要求instanceof运算符的右侧有一个构造函数。换句话说，编写foo instanceof HTMLElement而不是foo instanceof []是合法的，差异取决于HTMLElement具有构造函数的事实。

这里基本上有三种选择：

从DOM元素中删除构造签名，并删除对instanceof右操作数的限制。这是不可取的，因为你真的更喜欢在有人意外编写代码x instanceof foo而不是x instanceof Foo（其中foo是Foo的实例）时发现错误。
从DOM元素中删除构造签名，但保持instanceof检查。这很糟糕，因为foo instanceof HTMLElement是一个非常合理的事情。
当前情况，构造函数存在，但你必须知道不要调用它们。

您无法使用常规构造函数构造DOM元素，因为您应该通过document.createElement。这基本上是出于与浏览器如何实现这些对象有关的技术原因。

Answer 2

你用c＃语法错误的打字稿语法。

只需替换

var elem = new HTMLDivElement();

宽度

var elem = document.createElement('div');

或

var elem = <HTMLDivElement>(document.createElement('div'));

（如果您需要使用HTMLDivElement属性）

Answer 3

如果您扩展HTMLElement或任何类似HTMLDivElement的子类

您还需要注册自定义元素


class SampleDiv extends HTMLDivElement{
    constructor(){
       super();
    }
}
customElements.define( 'sample-div', SampleDiv );

在此处查看更多信息： https://javascript.info/custom-elements

在TypeScript中实例化新的HTMLElement

3 个答案: