Question

所以下面的代码是在Angular 4中，我无法弄清楚为什么它不按预期方式工作。

以下是我的处理程序的片段：

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

HTML元素：

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

代码给了我错误：

'EventTarget'类型中不存在属性'value'。

但正如在console.log中可以看到event.target上确实存在值。

Answer 1

event.target这里是HTMLElement，它是所有HTML元素的父级，但不保证具有属性value。 TypeScript检测到此并抛出错误。将event.target投射到相应的HTML元素，以确保HTMLInputElement具有value属性：

(<HTMLInputElement>event.target).value

每the documentation：

输入 $event

上面的示例将$event转换为any类型。这样可以降低代码的成本。没有类型信息可以揭示事件对象的属性并防止出现愚蠢的错误。

[...]

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

（强调我的）

Answer 2

将HTMLInputElement作为事件类型的通用传递也应该起作用：

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

Answer 3

这是另一个适用于我的修复：

(event.target as HTMLInputElement).value

这应该通过让TS知道event.target是HTMLInputElement来解决错误，value本身就有event。在指定之前，TS可能只知道HTMLInputElement单独是target，因此根据TS，键入的from bottle import request dir(request.POST)是一些随机映射的值，可以是任何值。

Answer 4

我的操作方式如下（比类型断言imho更好）：

onFieldUpdate(event: { target: HTMLInputElement }) {
  this.$emit('onFieldUpdate', event.target.value);
}

这假设您只对target属性感兴趣，这是最常见的情况。如果需要访问event的其他属性，则更全面的解决方案包括使用&类型的交集运算符：

event: Event & { target: HTMLInputElement }

这是Vue.js版本，但该概念适用于所有框架。显然，您可以更具体一些，而不是使用一般的HTMLInputElement，而可以使用例如HTMLTextAreaElement用于文本区域。

Answer 5

我正在寻找解决类似TypeScript错误的方法：

TypeScript中的EventTarget类型不存在属性“数据集”

我想进入React中单击按钮元素的event.target.dataset：

<button
  onClick={onClickHandler}
  data-index="4"
  data-name="Foo Bar"
>
  Delete Candidate
</button>

这是我如何通过TypeScript将dataset值“存在”的方法：

const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  const { name, index } = (event.target as HTMLButtonElement).dataset
  console.log({ name, index })
  // do stuff with name and index…
}

Answer 6

如果没有看到，您应该将event.target.value道具与onChange处理程序配合使用：

index.js:1437 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

或者，如果您要使用onChange以外的其他处理程序，请使用event.currentTarget.value

Answer 7

您还可以创建自己的界面。

    export interface UserEvent {
      target: HTMLInputElement;
    }

       ...

    onUpdatingServerName(event: UserEvent) {
      .....
    }

Answer 8

您可以将其显式解析为“HTMLInputElement”，然后访问'value'

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

Answer 9

如您所知，TypeScript 一直严格遵守元素数据类型。因此，您不能在不指定数据类型的情况下直接访问元素的属性。 event.target 是一个 HTMLElement，它是所有 HTML 元素的父元素，但不保证具有 value 属性。

因此，我们需要对变量 event.target 进行类型转换，然后才能从中访问 value 属性。

OnUpdatingServerName (event: Event) {
  console.log(event);
  var element = event.target as HTMLElement
  this.newserverName = element.value;
}

Answer 10

向事件添加任何类型

event: any

示例

[element].addEvenListener('mousemove', (event: any) =>{
//CODE//
} )

发生的事情是打字稿将事件添加为事件类型，并且由于某种原因它无法识别某些属性。添加任何类型的对象都不再存在此问题，它适用于任何document.[Property]

Answer 11

试试下面的代码：

  console.log(event['target'].value)

它对我有用:-)

TypeScript中的EventTarget类型中不存在属性“value”

11 个答案:

输入 `$event`

TypeScript中的EventTarget类型中不存在属性“value”

11 个答案:

输入 $event

输入 `$event`