Angular-cli报EventTarget无matches属性错误，但Chrome运行正常求助

这确实是TypeScript严格类型检查带来的典型问题，很多使用Angular+TypeScript的开发者都遇到过类似情况！

你猜的没错，问题根源就是TypeScript的类型系统：

• 在TypeScript中，event.target的默认类型是EventTarget——这个类型只定义了最基础的事件目标属性，并没有包含matches()这类DOM元素特有的方法。
• 而Chrome控制台运行的是原生JavaScript，它不会做静态类型检查，只要运行时event.target确实是DOM元素，就能正常调用matches()，所以不会报错。

下面提供两种常用的解决方法：

方案1：类型断言（快速简洁） #

直接把event.target断言为Element类型，明确告诉TypeScript“我确定这个目标是DOM元素”：

constructor() { 
  window.onclick = (event: MouseEvent) => { 
    // 用类型断言指定target的类型为Element
    if (!(event.target as Element).matches('.dropbtn')) { 
      const dropdowns = document.getElementsByClassName('dropdown-content'); 
      for (let i = 0; i < dropdowns.length; i++) { 
        const openDropdown = dropdowns[i] as Element;
        if (openDropdown.classList.contains('show')) { 
          openDropdown.classList.remove('show'); 
        } 
      } 
    } 
  }; 
}

方案2：类型守卫（更严谨鲁棒） #

如果想避免极端情况（比如event.target不是DOM元素的场景），可以先通过instanceof做类型判断，TypeScript会自动完成类型收窄：

constructor() { 
  window.onclick = (event: MouseEvent) => { 
    const target = event.target;
    // 先确认target是Element类型，再调用matches方法
    if (target instanceof Element && !target.matches('.dropbtn')) { 
      const dropdowns = document.getElementsByClassName('dropdown-content'); 
      for (let i = 0; i < dropdowns.length; i++) { 
        const openDropdown = dropdowns[i];
        if (openDropdown instanceof Element && openDropdown.classList.contains('show')) { 
          openDropdown.classList.remove('show'); 
        } 
      } 
    } 
  }; 
}

两种方案都能解决编译报错问题：如果你能确定event.target一定是DOM元素，方案1更高效；如果想兼顾代码的安全性，方案2会是更稳妥的选择。

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