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

117

因此，以下代码位于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”上不存在属性“值”。

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

javascript angular typescript

— 海军
source

2

我们可以使用（e.target作为HTMLInputElement）.value

— user1162084

145

event.target这里是一个HTMLElement是所有的HTML元素的父，但不保证具有这样的性质value。TypeScript检测到此错误并引发错误。强制event.target转换为适当的HTML元素以确保它HTMLInputElement具有value属性：

(<HTMLInputElement>event.target).value

根据文档：

输入 $event

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

[...]

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

（强调我的）

— 李安德
source

26

语法更var element = ev.target as HTMLElement

— 简洁

对我来说，HTMLInputElement代替了HTMLElement起作用，因为HTMLElement在接口中没有值。

— Harsha Vardhini

我认为最好的方法是使用onFieldUpdate(event: { target: HTMLInputElement }) {被调用的函数。请参阅下面的答案。

— belvederef

对于Angular 9，请使用“ as”语法。event.target as HtmlInputlement

— Prescol

86

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

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

— 米卡尔·里尔班克（Mikael Lirbank）
source

14

这比类型断言更好。

— JamesYin

2

但是，如果从onChangeReact代码中的属性处理程序引用中调用该函数，则将无法正常工作。react处理程序不希望为React.ChangeEvent设置类型，并且将显示键入错误。我不得不使用强制转换为所选答案（的一个变体）(event.target as HTMLInputElement).value。

— Spiralis

在React组件中，这对我来说似乎很好。也许是React的版本？我们目前在16.8。*。

— hellatan

49

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

(event.target as HTMLInputElement).value

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

— 马特·S。
source

4

这在React尝试将<HTMLInputElement>解释为JSX时确实很有帮助。

— 克里斯托弗·布拉德肖

嘿，谢谢你的分享！这个解决方案适合我。

— 卡洛斯·奎里奥斯

16

我一直在寻找解决与React类似的TypeScript错误的解决方案：

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

我想了解event.target.datasetReact中的一个单击按钮元素：

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

这是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…
}

— 博·史密斯
source

1

问题被标记为Angular，因此React答案似乎不在主题之列。

— 约翰·斯诺

2

不管……它有多个投票，因此这个答案对其他人很有帮助。

— 博·史密斯，

1

奇迹般有效。

onChange={(event: ChangeEvent<HTMLInputElement>): void => {               setTextFilter(event.target.value);             }}

— Vadorequest，

2

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`.

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

— 吉尔和我
source

这对我有用，但是我不确定使用event.currentTarget.value是最好的方法。

— dczii

2

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

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

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

event: Event & { target: HTMLInputElement }

这是Vue.js版本，但该概念适用于所有框架。显然，您可以使用更具体的内容，而不是使用常规内容，而HTMLInputElement可以使用例如HTMLTextAreaElementtextareas。

— 眺望者
source

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

输入 $event

输入 `$event`