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

Property 'value' does not exist on type EventTarget in TypeScript

提问by Ravy

So the following code is in Angular 4 and I can't figure out why it doesn't work the way as expected.

所以下面的代码在 Angular 4 中，我不明白为什么它不能按预期的方式工作。

Here is a snippet of my handler:

这是我的处理程序的片段：

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

HTML element:

HTML 元素：

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

The code gives me the error:

代码给了我错误：

Property 'value' does not exist on type 'EventTarget'.

类型“EventTarget”上不存在属性“value”。

But as it can be seen in the console.logthat value does exist on the event.target.

但正如可以看出，该console.log值确实存在于event.target.

回答by Andrew Li

event.targethere is an HTMLElementwhich is the parent of all HTML elements, but isn't guaranteed to have the property value. TypeScript detects this and throws the error. Cast event.targetto the appropriate HTML element to ensure it is HTMLInputElementwhich does have a valueproperty:

event.target这里是一个HTMLElement是所有的HTML元素的父，但不保证具有这样的性质value。TypeScript 检测到这一点并抛出错误。演员event.target到相应的HTML元素，以确保它HTMLInputElement里面确实有一个value特性：

(<HTMLInputElement>event.target).value

Per the documentation:

根据文档：

Type the $event

The example above casts the $eventas an anytype. That simplifies the code at a cost. There is no type information that could reveal properties of the event object and prevent silly mistakes.

[...]

The $eventis now a specific KeyboardEvent. Not all elements have a valueproperty so it casts targetto an input element.

输入 $event

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

[...]

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

(Emphasis mine)

（强调我的）

回答by Mikael Lirbank

Passing HTMLInputElement as a generic to the event type should work too:

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

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

回答by Matt S.

Here's another fix that works for me:

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

(event.target as HTMLInputElement).value

(event.target as HTMLInputElement).value

That should get rid of the error by letting TS know that event.targetis an HTMLInputElement, which inherently has a value. Before specifying, TS likely only knew that eventalone was an HTMLInputElement, thus according to TS the keyed-in targetwas some randomly mapped value that could be anything.

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

回答by Beau Smith

I was looking for a solution to a similar TypeScript error with React:

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

Property 'dataset' does not exist on type EventTarget in TypeScript

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

I wanted to get to event.target.datasetof a clicked button element in React:

我想event.target.dataset在 React 中找到一个点击的按钮元素：

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

Here is how I was able to get the datasetvalue to "exist" via TypeScript:

以下是我如何dataset通过 TypeScript使值“存在”：

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

回答by JillAndMe

You should use event.target.valueprop with onChange handler if not you could see :

event.target.value如果不能看到，您应该将prop 与 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`.

Or If you want to use other handler than onChange, use event.currentTarget.value

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

回答by belvederef

The way I do it is the following (better than type assertion imho):

我这样做的方式如下（比类型断言更好）：

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

This is a Vue.js version but the concept applies to all frameworks. Obviously you can go more specific and instead of using a general HTMLInputElementyou can use e.g. HTMLTextAreaElement.

这是一个 Vue.js 版本，但这个概念适用于所有框架。显然你可以更具体，而不是使用一般HTMLInputElement你可以使用 eg HTMLTextAreaElement。