Vue+TypeScript修改元素样式报错：Property 'style' does not exist on type 'EventTarget'

方法1：类型断言为HTMLElement #

直接将event.target断言为通用DOM元素类型HTMLElement，它包含所有DOM元素共有的style属性：

let foo = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (target) {
    target.style.opacity = '1';
  }
};

方法2：断言为特定元素类型（更严谨） #

如果你明确知道触发事件的是某个特定元素（比如按钮、输入框），可以断言为对应的具体类型，比如HTMLButtonElement：

let foo = (event: MouseEvent) => {
  const target = event.target as HTMLButtonElement;
  if (target) {
    target.style.opacity = '1';
  }
};

方法3：使用类型守卫做运行时检查 #

通过instanceof做类型守卫，既保证类型安全，又能让TypeScript自动推断类型：

let foo = (event: MouseEvent) => {
  if (event.target instanceof HTMLElement) {
    event.target.style.opacity = '1';
  }
};

报错原因 #

TypeScript中MouseEvent.target的默认类型是EventTarget，这是一个极其宽泛的类型，涵盖了所有可能触发事件的对象（包括非DOM元素）。由于style是DOM元素特有的属性，TS无法确定event.target一定具备该属性，因此抛出类型错误。通过上述方式明确元素类型后，TS就能识别style属性了。

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