地产& # 39;价值# 39;不存在类型EventTarget在TypeScript

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

(event.target as HTMLInputElement).value

每的文档:

键入$event

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

[…]

$event现在是一个特定的KeyboardEvent。并不是所有元素都有__ABC2属性，所以它将target强制转换为输入元素。

(强调我的)

下面是另一个对我有用的方法:

(event.target as HTMLInputElement).value

这应该消除错误，让TS知道event.target是一个HTMLInputElement，它固有地有一个value。在指定之前，TS可能只知道event单独是一个HTMLInputElement，因此根据TS，输入的target是某个随机映射的值，可以是任何值。

将HTMLInputElement作为泛型传递给事件类型也可以工作:

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

我正在用React寻找一个类似的TypeScript错误的解决方案:

在TypeScript中的EventTarget类型上不存在属性'dataset'

我想在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…
}

你应该使用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

我这样做的方式如下(比类型断言更好):

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

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

event: Event & { target: HTMLInputElement }

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

添加任意类型的事件

event: any

例子

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

发生的事情是typescript添加了"事件"(在这种情况下单击)作为事件类型，由于某种原因它不识别某些属性。将其添加为any类型不再存在此问题，这适用于任何document.[Property]

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

    export interface UserEvent {
target: HTMLInputElement;
}


...


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

试试下面的代码:

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

这对我有用:-)

您可以显式地将其解析为“HTMLInputElement"然后访问value

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

如你所知，TypeScript一直严格遵循元素数据类型。因此，如果不指定元素的数据类型，就不能直接访问元素的属性。event.target是一个HTMLElement，它是所有HTML元素的父元素，但不保证具有属性价值。

因此，我们需要对变量event.target进行类型转换，然后只有我们可以从它访问value属性。

OnUpdatingServerName (event: Event) {
console.log(event);
var element = event.target as HTMLElement
this.newserverName = element.value;
}

在模板中-

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

在组件中-

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

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

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

然后像这样使用它:

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

这适用于我的ANGULAR HTML组件!!

$any($event.target).value

声明接口

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

哪种类型可以作为不同输入事件的类型重用

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

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

阅读更多在这里。

反应有一些接口，比如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'>