blocks|key|2726319|text|注意，你在这里得到的错误是“非法构造函数”。这与错误"object+is+not+a+function“是不同的，例如，如果你要编写new+{}()，你会得到这样的错误。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2726320|因此，从技术上讲，HTMLDivElement确实有一个构造函数。只是这个特殊的构造函数抛出了一个异常，而不是创建一个对象。|2726321|通常，lib.d.ts只会排除这些无用的签名，但TypeScript要求instanceof操作符的右侧有一个构造函数。换句话说，编写foo+instanceof+HTMLElement是合法的，但编写foo+instanceof+[]是不合法的，区别是由HTMLElement具有构造函数这一事实决定的。|2726322|这里基本上有三个选择：|2726323|2726324|从DOM元素中删除构造签名，并删除对instanceof右操作数的限制。这是不可取的，因为您真的希望捕获以下错误:有人意外地编写了x+instanceof+foo之类的代码，而不是x+instanceof+Foo+(其中foo是DOM元素的构造签名的实例，但保留instanceof检查)。这很糟糕，因为foo+instanceof+HTMLElement是一个非常合理的编写方法。|ordered-list-item|2726325|H119当前的情况，即构造函数存在，但您必须知道不能调用它们。|2726326|您不能使用普通构造函数来构造DOM元素，因为您应该通过document.createElement。这基本上是由于与浏览器如何实现这些对象相关的技术原因。|2726327|entityMap^0|1U|8|0|9|E|0|3|8|10|A|1V|Q|2T|H|3K|B|0|0|0|I|A|1T|G|2I|G|32|3|3N|A|48|Q|0|0|R|M|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1C|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1R|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|U|$]]

Note that the error you get here is "Illegal constructor". This is different from the error "object is not a function" that you would get if you were to write <code>new {}()</code>, for example.

So, technically, <code>HTMLDivElement</code> does have a constructor. It's just that this particular constructor throws an exception rather than creating an object.

Normally <code>lib.d.ts</code> would just exclude such useless signatures, but TypeScript requires that the right-hand side of the <code>instanceof</code> operator have a constructor. In other words, it's legal to write <code>foo instanceof HTMLElement</code>, but not <code>foo instanceof []</code>, and the difference is determined by the fact that <code>HTMLElement</code> has a constructor.

There were basically three choices on the table here:

<ol>
<li>Remove the construct signature from the DOM elements and remove the restriction on <code>instanceof</code>'s right operand. This is undesirable because you'd really prefer to catch errors where someone accidentally writes code like <code>x instanceof foo</code> instead of <code>x instanceof Foo</code> (where <code>foo</code> is an instance of <code>Foo</code>).</li>
<li>Remove the construct signature from DOM elements, but keep the <code>instanceof</code> check in place. This is bad because <code>foo instanceof HTMLElement</code> is a very reasonable thing to write.</li>
<li>The current situation, where the constructors exist but you have to know not to call them.</li>
</ol>

You can't construct DOM elements using normal constructors because you're supposed to go through <code>document.createElement</code>. This is basically for technical reasons relating to how browsers implement these objects.

blocks|key|2726329|text|您在c#语法中使用了错误的typescript语法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2726330|只需替换|2726331|var+elem+=+new+HTMLDivElement();|code-block|syntax|javascript|2726332|具有以下任一项|2726333|var+elem+=+document.createElement('div');|2726334|或|2726335|var+elem+=+<HTMLDivElement>(document.createElement('div'));|2726336|2726337|let+elem+=+document.createElement('div')+as+HTMLDivElement|2726338|(如果需要使用HTMLDivElement属性)|2726339|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|Q|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|R|3|S|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|T|3|U|5|6|7|16|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

You have mistaken typescript syntax with c# syntax. 

Just replace

<pre><code>var elem = new HTMLDivElement();
</code></pre>

with one of the following

<pre><code>var elem = document.createElement('div');
</code></pre>

or

<pre><code>var elem = &lt;HTMLDivElement&gt;(document.createElement('div'));
</code></pre>

or

<pre><code>let elem = document.createElement('div') as HTMLDivElement
</code></pre>

(if you need to use HTMLDivElement attributes)

blocks|key|145696|text|如果您扩展HTMLElement或HTMLDivElement之类的任何子类|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|145697|您还需要注册自定义元素|145698|class+SampleDiv+extends+HTMLDivElement{
++++constructor(){
+++++++super();
++++}
}
customElements.define('sample-div',+SampleDiv,+{+extends:+'div'+});|code-block|syntax|javascript|145699|点击此处查看更多信息：https://javascript.info/custom-elements|145700|entityMap|0|LINK|mutability|MUTABLE|url|https://javascript.info/custom-elements^0|5|B|H|E|0|0|0|B|13|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

If you extend <code>HTMLElement</code> or any subclass like <code>HTMLDivElement</code> 

You also need to register the custom element 

<pre class="lang-js prettyprint-override"><code>
class SampleDiv extends HTMLDivElement{
 constructor(){
 super();
 }
}
customElements.define('sample-div', SampleDiv, { extends: 'div' });
</code></pre>

See more here: 
<a href="https://javascript.info/custom-elements" rel="nofollow noreferrer">https://javascript.info/custom-elements</a>

I am trying to instantiate new HTMLDivElement in TypeScript

<pre><code>var elem = new HTMLDivElement();
</code></pre>

but the browser throws 

<pre><code>Uncaught TypeError: Illegal constructor.
</code></pre>

The workaround seems to be to use 

<pre><code>var elem = document.createElement('div');
</code></pre>

but I find this suboptimal for various reasons. 

Why can't I instantiate DOM elements directly when there is a new keyword for in in the lib.d.ts?

<pre><code>declare var HTMLDivElement: {
 prototype: HTMLDivElement;
 new (): HTMLDivElement;
}
</code></pre>

Instantiating new HTMLElement in TypeScript

TypeScript

我正在尝试在TypeScript中实例化新的HTMLDivElementvar elem = new HTMLDivElement();但是浏览器抛出Uncaught TypeError: Illegal constructor.解决方法似乎是使用var elem = document.createElement('d...

问在TypeScript中实例化新HTMLElement
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TypeScript中实例化新HTMLElementEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TypeScript中实例化新HTMLElement
EN