Создание нового 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