TypeScript 中的 EventTarget 类型上不存在属性“值”[重复]

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

(event.target as HTMLInputElement).value

每the documentation：

键入 $event 上面的示例将 $event 转换为 any 类型。这以某种代价简化了代码。没有类型信息可以揭示事件对象的属性并防止愚蠢的错误。 [...] $event 现在是一个特定的 KeyboardEvent。并非所有元素都具有 value 属性，因此它将目标转换为输入元素。

（强调我的）

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

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

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

(event.target as HTMLInputElement).value

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

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

在模板中 -

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

在组件中 -

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

我这样做的方式如下（优于类型断言恕我直言）：

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

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

event: Event & { target: HTMLInputElement }

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

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

$any($event.target).value

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

如果看不到，则应将 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

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

阅读更多here。

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

    export interface UserEvent {
      target: HTMLInputElement;
    }

       ...

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

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

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

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

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

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

然后像这样使用它：

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

声明接口

export interface HTMLInputEvent extends Event {
  target: HTMLInputElement & EventTarget;
}

可以重新用作不同输入事件的类型

public onChange(event: HTMLInputEvent) {
  const value = event.target.value;
}

React 有一些界面，例如 ChangeEvent 用于 onChange，FormEvent 用于 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" 
/>

请试试这个

<input type = 'text' [value] = 'value' (input) = 'data = $any($event.target).value'>

试试下面的代码：

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

这个对我有用 ：-）

将任何类型添加到事件

event: any

例子

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

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