typing an eventlistenner on vanilla + typescript

September 19, 2022

how can i type correctly so my event listenner has access to target.value for example in typescript + vanilla js?

I did some tests with MouseEvent, HTMLButtonElement and I can’t get a result.

const Database = {
  createDataKeys() {
    const dataKeys = Object.keys(database);

    return dataKeys.map((spot) => {
      const newBtn = document.createElement('button');

      newBtn.innerText = spot;

      newBtn.addEventListener('click', (e: MouseEvent) => {
        console.log(e.target.);
      });
      return newBtn;
    });
  }
};

>Solution :

You’ll need to narrow it down, not every target has a value !

  newBtn.addEventListener('click', (e: MouseEvent) => {
    if (e.target instanceof HTMLInputElement) {
      console.log(e.target.value);
    }
  });

Playground