How to use EventTarget in Typescript

Question

Hey I am new to Typescript and I am having some trouble implementing Event Target.

What is the typescript equivalent for event.target.matches that is used in Javascript?

Example code:

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Answer 1

You'd need to cast (type assertion) event.target as something like a HTMLElement to provide access to HTMLElement methods such as matches(). Without the cast, event.targetis typed as EventTarget which is why you are not seeing matches() or other HTMLElement methods being available.

if (!(<HTMLElement> event.target).matches('.dropbtn')) { }

Here is an example in action.

window.onclick = function(event) {
  if (!(<HTMLElement> event.target).matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Per the suggestions from @WsCandy you could also use as as an alternative:

window.onclick = function(event) {
      const target = event.target as HTMLElement;
      if (!target.matches('.dropbtn')) {