Τύπος HTMLElement στην TypeScript

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

html<div></div>

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

typescriptlet elem: HTMLElement;

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

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

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

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