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

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

根据文件:

输入 $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.在指定之前,TS可能只知道event单独是一个HTMLInputElement,因此根据TS,键入的target是一些随机映射的值,可以是任何东西.

Answer 4

在模板中 -

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

在组件中 -

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

Answer 5

这在 ANGULAR HTML 组件中对我有用！

$any($event.target).value

来源链接： https://www.tektutorialshub.com/angular/property-value-does-not-exist-on-type-eventtarget-error-in-angular/

Answer 6

我一直在寻找针对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…
}

Answer 7

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

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

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

event: Event & { target: HTMLInputElement }

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

Answer 8

要解决此问题，请使用 $any 类型转换函数($any($event.target).value)来停止模板中的类型检查。

在这里阅读更多内容。

Answer 9

React有一些接口，例如ChangeEventfor onChange、FormEventfor onSubmit等

我也尝试做类似的事情，下面的解决方案对我有用

handleChange (e : React.ChangeEvent<HTMLInputElement>) {
  console.log(e.currentTarget.value);
}


<input 
   autoFocus
   value={this.state.account.username}
   onChange={this.handleChange}
   id="username" 
   type="text" 
   className="form-control" 
/>