typescript - 如何实例化新的 HTMLElement？

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 {}() 时遇到的错误“object is not a function”。

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

通常 lib.d.ts 只会排除这些无用的签名，但 TypeScript 要求 instanceof 运算符的右侧有一个构造函数。也就是说，写foo instanceof HTMLElement是合法的，但是写foo instanceof []是不合法的，区别在于HTMLElement有一个构造函数。

这里基本上有三个选择:

1. 从 DOM 元素中移除构造签名并移除对 instanceof 右操作数的限制。这是不可取的，因为您真的更喜欢在有人不小心编写了类似 x instanceof foo 而不是 x instanceof Foo 的代码时捕获错误(其中 foo是 Foo 的实例)。
2. 从 DOM 元素中删除构造签名，但保留 instanceof 检查。这很糟糕，因为 foo instanceof HTMLElement 是一个非常合理的写法。
3. 当前情况，存在构造函数但您必须知道不要调用它们。

您不能使用普通构造函数构造 DOM 元素，因为您应该通过 document.createElement。这主要是出于与浏览器如何实现这些对象相关的技术原因。