typescript - Kako stvoriti novu instancu HTMLElementa?

Pokušavam instancirati novi HTMLDivElement u TypeScriptu

var elem = new HTMLDivElement();

ali preglednik baca

Uncaught TypeError: Illegal constructor.

Zaobilazno rješenje izgleda da je korištenje

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

ali ovo smatram suboptimalnim iz raznih razloga.

Zašto ne mogu izravno instancirati DOM elemente kada postoji ključna riječ new u lib.d.ts?

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

Odgovor #1

Imajte na umu da je pogreška koju ovdje dobivate „Nelegalni konstruktor“. Ovo se razlikuje od pogreške „objekt nije funkcija“ koju biste dobili ako biste, na primjer, napisali new {}().

Dakle, tehnički, HTMLDivElement ima konstruktor. Samo što ovaj određeni konstruktor baca iznimku umjesto da stvori objekt.

Obično bi lib.d.ts jednostavno isključio takve beskorisne potpise, ali TypeScript zahtijeva da desna strana operatora instanceof ima konstruktor. Drugim riječima, legalno je napisati foo instanceof HTMLElement, ali ne foo instanceof [], a razlika se određuje činjenicom da HTMLElement ima konstruktor.

Ovdje su u osnovi postojale tri mogućnosti:

  1. Uklonite potpis konstrukta iz DOM elemenata i uklonite ograničenje na desni operand instanceof. To je neželjeno jer biste zapravo radije uhvatili pogreške gdje netko slučajno napiše kod poput x instanceof foo umjesto x instanceof Foo (gdje je foo instanca Foo).
  2. Uklonite konstrukcijski potpis s DOM elemenata, ali zadržite provjeru instanceof. Ovo je loše jer je foo instanceof HTMLElement vrlo razumna stvar za napisati.
  3. Trenutna situacija, gdje konstruktori postoje, ali morate znati da ih ne pozivate.

Ne možete konstruirati DOM elemente koristeći normalne konstruktore jer biste trebali koristiti document.createElement. Ovo je u osnovi zbog tehničkih razloga koji se odnose na način na koji preglednici implementiraju ove objekte.

Odgovor #2

Pogrešno ste zamijenili sintaksu TypeScripta sa sintaksom C#-a.

Samo zamijeni

var elem = new HTMLDivElement();

s jednim od sljedećih

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

ili

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

ili

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

(ako trebate koristiti atribute HTMLDivElementa)

Odgovor #3

Ako proširite HTMLElement ili neku podklasu poput HTMLDivElement

Također morate registrirati prilagođeni element

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

Pogledajte više ovdje: https://javascript.info/custom-elements

Povezani članci