Подтвердить что ты не робот

Создание нового HTMLElement в TypeScript

Я пытаюсь создать новый HTMLDivElement в TypeScript

var elem = new HTMLDivElement();

но браузер бросает

Uncaught TypeError: Illegal constructor.

Обходной путь заключается в использовании

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

но я считаю это неоптимальным по разным причинам.

Почему я не могу создать экземпляр элементов DOM напрямую, если в lib.d.ts?

есть ключевое слово new

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

Ответ 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. Это в основном по техническим причинам, связанным с тем, как браузеры реализуют эти объекты.

Ответ 2

Вы ошиблись синтаксисом машинописи с синтаксисом С#.

Просто замени

var elem = new HTMLDivElement();

ширина

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

или же

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

или же

let elem = document.createElement('div') as HTMLDivElement

(если вам нужно использовать атрибуты HTMLDivElement)

Ответ 3

Если вы расширяете HTMLElement или любой подкласс, такой как HTMLDivElement

Вам также необходимо зарегистрировать пользовательский элемент


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

Смотрите больше здесь: https://javascript.info/custom-elements