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

小编典典

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

all

我将 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);
  }
}

阅读 135

2022-04-25

共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 知道元素是 atextarea并且它会知道 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);
}

2022-04-25