Angular编译报错：Property 'value' does not exist on type 'EventTarget'求助

这个错误是因为TypeScript无法推断$event.target的具体类型，默认将其视为EventTarget类型，而该类型没有value属性。以下是几种可行的解决方式：

方式一：在模板中直接断言类型 #

修改HTML模板，将$event.target断言为HTMLInputElement后再获取value：

<div>
  <label>Enter Length</label>
  <input (input)="onChangeLength(($event.target as HTMLInputElement).value)" />
</div>

组件的TypeScript代码保持不变，但注意修正拼写错误：将this.lenght改为this.length，否则赋值不会生效。

方式二：在组件方法中处理事件对象 #

调整模板，直接传递$event给方法，在TypeScript代码中对事件目标进行类型断言：

修改后的HTML模板 #

<div>
  <label>Enter Length</label>
  <input (input)="onChangeLength($event)" />
</div>

修改后的TypeScript代码 #

onChangeLength(event: Event){
  // 将事件目标断言为HTMLInputElement类型
  const inputElement = event.target as HTMLInputElement;
  const value = inputElement.value;
  const parsedValue = parseInt(value);

  if(!isNaN(parsedValue)){
    this.length = parsedValue; // 修正拼写错误lenght→length
  }
}

方式三：使用类型守卫增强类型安全性 #

通过instanceof检查确保事件目标是HTMLInputElement，避免类型断言可能带来的风险：

onChangeLength(event: Event){
  if(event.target instanceof HTMLInputElement){
    const value = event.target.value;
    const parsedValue = parseInt(value);

    if(!isNaN(parsedValue)){
      this.length = parsedValue; // 修正拼写错误lenght→length
    }
  }
}

注意：原代码中this.lenght存在拼写错误，正确应为this.length，即使编译通过，错误的属性名也会导致赋值无效，务必修正。

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