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

Question

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

这是我的处理程序的 sn-p：

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”类型上不存在属性“值”。

但正如在console.log 中看到的那样，event.target 上确实存在该值。

Answer 1

event.target 这里是 HTMLElement，它是所有 HTML 元素的父元素，但不能保证具有 value 属性。 TypeScript 检测到这一点并抛出错误。将 event.target 转换为适当的 HTML 元素，以确保它是具有 value 属性的 HTMLInputElement：

(<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 来消除错误，而 HTMLInputElement 本质上是一个 value。在指定之前，TS 可能只知道 event 单独是一个 HTMLInputElement，因此根据 TS，键入的 target 是一些随机映射的值，可以是任何东西。

Answer 4

我一直在寻找使用 React 的类似 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 5

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

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

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

event: Event & { target: HTMLInputElement }

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

Answer 6

在模板中 -

`(keyup)="value2=$any($event.target).value"`

在组件中-

getInput(event: Event) {
  this.value1 = (event.target as HTMLInputElement).value;
}

Answer 7

如果你看不到，你应该使用 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 8

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

    export interface UserEvent {
      target: HTMLInputElement;
    }

       ...

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

Answer 9

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

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

Answer 10

如您所知，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 11

我建议创建一个实用程序类型：

interface MyEvent<T extends EventTarget> extends Omit<Event, 'target'> {
  target: T;
}

然后像这样使用它：

function onChange({ target: { value } }: MyEvent<HTMLInputElement>) => {
  doSomethingWith(value);
}

Answer 12

试试下面的代码：

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

它对我有用 :-)

Answer 13

为事件添加任何类型

event: any

例子

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

发生的情况是打字稿将“事件”（在本例中为单击）添加为事件类型，并且由于某种原因它无法识别某些属性。添加它的任何类型不再存在这个问题，这适用于任何document.[Property]