error " Property 'innerText' does not exist on type 'EventTarget' "?

Question

I have an error:

Property 'innerText' does not exist on type 'EventTarget'.

I'm trying to add event listener and get value from element. Everything works fine but this error shows up in console .

public componentDidMount() {
  const element = document.querySelector(".mdc-list")
  element.addEventListener("click", (e) => {
    this.data.menu.title = e.target.innerText
  })
}

Answer 1

It is a TypeScript issue, cast the event.target to it’ type to tell TypeScript that it has the property you set for it.

const input = event.target as HTMLElement;
this.data.menu.title=input.innerText

Answer 2

You can either make a type guard to narrow down the event target type.

Or just cast the event target to whichever element you're getting as a target:

this.data.menu.title = <HTMLInputElement>(e.target).innerText;