属性“值”在 TypeScript 中的 EventTarget 类型上不存在 [重复]

Question

所以下面的代码是在Angular 4中，我不知道为什么它没有按预期的方式工作。

下面是我的处理程序的一个片段:

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //this wont work
}

超文本标记语言元素：

<input type="text" class="form-control" (input)="onUpdatingServerName($event)">

代码给了我错误：

属性值在类型Event塔吉特上不存在。

但是从< code>console.log中可以看出，该值确实存在于< code>event.target中。

Answer 1

这是另一个对我有用的修复程序：

（event.targetHTMLInpuElement）. value

这应该通过让 TS 知道 event.target 是一个 HTMLInputElement（它本质上具有值）来消除错误。在指定之前，TS 可能只知道事件本身是一个 HTMLInputElement，因此根据 TS，键入的目标是一些随机映射的值，可以是任何东西。

Answer 2

将HTMLInputElement作为泛型传递给事件类型也应该可以:

onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event);
  this.newserverName = event.target.value;
}

Answer 3

event.target这是一个HTMLElement，它是所有超文本标记语言元素的父元素，但不能保证具有属性value。TypeScript检测到这一点并抛出错误。将event.target转换为适当的超文本标记语言元素，以确保它是HTMLInpuElement，它确实具有value属性：

(event.target as HTMLInputElement).value

每个留档：

上面的示例将< code>$event转换为< code>any类型。这以一定的代价简化了代码。没有类型信息可以揭示事件对象的属性并防止愚蠢的错误。

[...]

$event现在是一个特定的键盘事件。并非所有元素都具有值属性，因此它将target强制转换为输入元素。

(强调我的)