Τύπος HTMLElement στην TypeScript

Για τα DOM elements υπάρχουν επίσης οι δικοί τους τύποι δεδομένων. Ας δούμε τη δουλειά με DOM elements με ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε το ακόλουθο div:

<div></div>

Ας πάρουμε μια αναφορά σε αυτό το div σε μια μεταβλητή. Όλα τα DOM elements ανήκουν στον τύπο HTMLElement. Ας ορίσουμε αυτόν τον τύπο στη μεταβλητή μας:

let elem: HTMLElement;

Ας γράψουμε τώρα σε αυτή τη μεταβλητή την αναφορά στο div μας:

let elem: HTMLElement = document.querySelector('div');
console.log(elem);

Όλα τα div, εκτός από το ότι είναι DOM elements με τύπο HTMLElement, ανήκουν επίσης στον τύπο HTMLDivElement (παρόμοιοι τύποι υπάρχουν και για άλλες ετικέτες). Ας ορίσουμε έναν πιο ακριβή τύπο για το στοιχείο μας:

let elem: HTMLDivElement = document.querySelector('div');
console.log(elem);

Δημιουργήστε μια μεταβλητή που θα περιέχει promise.

Δημιουργήστε μια μεταβλητή που θα περιέχει DOM element.

Δημιουργήστε μια μεταβλητή που θα περιέχει μια αναφορά στην ετικέτα ul.