“EventTarget”类型上不存在属性“值”

Question

我将 TypeScript 版本 2 用于 Angular 2 组件代码。

对于下面的代码，我收到错误“’EventTarget’ 类型上不存在属性’值’”，可能是什么解决方案。谢谢！

e.target.value.match(/\S+/g) || []).length

 import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'text-editor',
  template: `
    <textarea (keyup)="emitWordCount($event)"></textarea>
  `
})
export class TextEditorComponent {
  @Output() countUpdate = new EventEmitter<number>();

  emitWordCount(e: Event) {
    this.countUpdate.emit(
            (e.target.value.match(/\S+/g) || []).length);
  }
}

原文由 user584018 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要明确告诉 TypeScript 您的目标 HTMLElement 的类型。

这样做的方法是使用泛型类型将其转换为正确的类型：

 this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)

或（如你所愿）

 this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)

或（再次，偏好问题）

 const target = e.target as HTMLTextAreaElement;

this.countUpdate.emit(target.value./*...*/)

这会让 TypeScript 知道元素是 textarea 并且它会知道 value 属性。

任何类型的 HTML 元素都可以这样做，只要您向 TypeScript 提供有关其类型的更多信息，它就会以适当的提示和当然更少的错误来回报您。

为了使将来更容易，您可能希望直接使用其目标类型定义事件：

 // create a new type HTMLElementEvent that has a target of type you pass
// type T must be a HTMLElement (e.g. HTMLTextAreaElement extends HTMLElement)
type HTMLElementEvent<T extends HTMLElement> = Event & {
  target: T;
  // probably you might want to add the currentTarget as well
  // currentTarget: T;
}

// use it instead of Event
let e: HTMLElementEvent<HTMLTextAreaElement>;

console.log(e.target.value);

// or in the context of the given example
emitWordCount(e: HTMLElementEvent<HTMLTextAreaElement>) {
  this.countUpdate.emit(e.target.value);
}

原文由 smnbbrv 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于那些在 Angular 13 中遇到此错误的人，因为从以前的版本升级

对我来说，问题是我在我的 HTML 中使用了以下内容（之前是允许的）

 (keyup)="applyFilter($event.target.value)"

对此的修复是：

HTML：

 (keyup)="applyFilter($event)"

组件 - 在我调用的函数中：

 applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    // ... etc...
}

现在我可以像以前一样再次使用 filterValue 了。

原文由 James D 发布，翻译遵循 CC BY-SA 4.0 许可协议