TypeScriptでInputEventを扱うときの正しいアプローチ

TypeScriptでinputイベントのevent.target.valueを参照しようとすると、型エラーとなります。

const inputField = document.getElementById('inputField');

inputField.addEventListener('input', (event) => {
  const value = event.target.value; // Property 'value' does not exist on type 'EventTarget'.
});

これは、event.targetの型が確定していないため発生します。

正しくはevent.targetの型チェックを行って想定される要素ではないことを確認します。

// Input要素の場合
const inputField = document.getElementById('inputField');

inputField.addEventListener('input', (event) => {
  const { target } = event;

  // Input要素以外の場合は終了
  if (!(target instanceof HTMLInputElement)) {
    return;
  }

  const value = target.value; // 👍
});

// TextArea要素の場合
const textareaField = document.getElementById('textareaField');

inputField.addEventListener('input', (event) => {
  const { target } = event;

  // TextArea要素以外の場合は終了
  if (!(target instanceof HTMLTextAreaElement)) {
    return;
  }

  const value = target.value; // 👍
});

一手間かかりますが、これでより型安全にInputEventを扱えるようになります。