"Property 'value' does not exist on type 'EventTarget'"的意思是：类型 'EventTarget' 上不存在属性'value'。

26 浏览
0 Comments

"Property 'value' does not exist on type 'EventTarget'"的意思是：类型 'EventTarget' 上不存在属性'value'。

我正在使用TypeScript版本2来编写Angular 2组件代码。

以下代码会报错\"属性\'value\'不存在于类型\'EventTarget\'上\"，解决方法是什么？谢谢！

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

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'text-editor',
  template: `
     ` }) export class TextEditorComponent { @Output() countUpdate = new EventEmitter(); emitWordCount(e: Event) { this.countUpdate.emit( (e.target.value.match(/\S+/g) || []).length); } }

admin 更改状态以发布 2023年5月19日
0

2 答案

0 Comments

这里是我使用的简单方法：

const element = event.currentTarget as HTMLInputElement
const value = element.value

TypeScript编译器显示的错误已经消失，代码可以运行。

0
0 Comments

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

方法是使用通用类型将其强制转换为适当的类型：

this.countUpdate.emit((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 = Event & {
  target: T; 
  // probably you might want to add the currentTarget as well
  // currentTarget: T;
}
// use it instead of Event
let e: HTMLElementEvent;
console.log(e.target.value);
// or in the context of the given example
emitWordCount(e: HTMLElementEvent) {
  this.countUpdate.emit(e.target.value);
}

0