如何在TypeScript+原生JS中正确类型化事件监听器以访问target.value

你遇到的核心问题是：MouseEvent 的 target 属性默认是 EventTarget 类型，TypeScript 无法确定它具体是哪个 DOM 元素，所以直接访问属性会报错。另外要注意：原生 <button> 元素本身没有 value 属性（除非你手动给它设置），如果是想获取按钮显示的文本，应该用 innerText 或 textContent。

下面是两种可行的解决方案：

方案一：用类型断言明确元素类型 #

通过类型断言将 e.currentTarget（推荐用这个，它始终指向绑定事件的元素，不会因按钮内部有子元素出现偏差）转为 HTMLButtonElement：

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

    return dataKeys.map((spot) => {
      const newBtn = document.createElement('button');
      newBtn.innerText = spot;
      // 若需要value属性，手动设置
      // newBtn.value = spot;

      newBtn.addEventListener('click', (e: MouseEvent) => {
        const btn = e.currentTarget as HTMLButtonElement;
        // 获取按钮文本
        console.log(btn.innerText);
        // 若设置了value，可直接访问
        // console.log(btn.value);
      });
      return newBtn;
    });
  }
};

方案二：给addEventListener指定泛型 #

利用 TypeScript 对 addEventListener 的泛型支持，直接明确事件关联的元素类型，回调里的 currentTarget 会自动推导为正确类型：

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

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

      // 指定泛型为HTMLButtonElement，明确事件类型
      newBtn.addEventListener<'click', MouseEvent>(
        'click',
        (e) => {
          // e.currentTarget自动识别为HTMLButtonElement
          console.log(e.currentTarget.innerText);
        }
      );
      return newBtn;
    });
  }
};

关键说明 #

• target 和 currentTarget 的区别：target 是触发事件的实际元素（比如按钮内的图标），currentTarget 是绑定事件的元素（即按钮本身），后者更安全。
• 若要访问 value 属性，必须先给按钮手动设置 newBtn.value = 'xxx'，否则 TypeScript 会提示原生按钮无此属性。

内容的提问来源于stack exchange，提问作者Collaxd