地产& # 39;价值# 39;类型'事件目标'

你需要显式地告诉TypeScript你的目标HTMLElement的类型。

方法是使用泛型类型将其转换为合适的类型:

this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)

或者(随你)

this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)

或者(还是偏好问题)

const target = e.target as HTMLTextAreaElement;


this.countUpdate.emit(target.value./*...*/)

这将让TypeScript知道元素是textarea，它将知道value属性。

同样的事情也可以用在任何HTML元素上，只要你给TypeScript更多关于它们类型的信息，它就会给你适当的提示，当然错误也会更少。

为了便于以后使用，你可以直接用目标的类型定义一个事件:

// create a new type HTMLElementEvent that has a target of type you pass
// type T must be a HTMLElement (e.g. HTMLTextAreaElement extends HTMLElement)
type HTMLElementEvent<T extends HTMLElement> = Event & {
target: T;
// probably you might want to add the currentTarget as well
// currentTarget: T;
}


// use it instead of Event
let e: HTMLElementEvent<HTMLTextAreaElement>;


console.log(e.target.value);


// or in the context of the given example
emitWordCount(e: HTMLElementEvent<HTMLTextAreaElement>) {
this.countUpdate.emit(e.target.value);
}

<textarea (keyup)="emitWordCount(myModel)" [(ngModel)]="myModel"></textarea>




export class TextEditorComponent {
@Output() countUpdate = new EventEmitter<number>();


emitWordCount(model) {
this.countUpdate.emit(
(model.match(/\S+/g) || []).length);
}
}

以下是我使用的简单方法:

const element = event.currentTarget as HTMLInputElement
const value = element.value

TypeScript编译器显示的错误已经消失，代码可以正常工作。

fromEvent<KeyboardEvent>(document.querySelector('#searcha') as HTMLInputElement , 'keyup')
.pipe(
debounceTime(500),
distinctUntilChanged(),
map(e  => {
return e.target['value']; // <-- target does not exist on {}
})
).subscribe(k => console.log(k));

下面是另一种指定event.target的方法:

import { Component, EventEmitter, Output } from '@angular/core';


@Component({
selector: 'text-editor',
template: `<textarea (keyup)="emitWordCount($event)"></textarea>`
})
export class TextEditorComponent {


@Output() countUpdate = new EventEmitter<number>();


emitWordCount({ target = {} as HTMLTextAreaElement }) { // <- right there


this.countUpdate.emit(
// using it directly without `event`
(target.value.match(/\S+/g) || []).length);
}
}

这是另一个简单的方法，我用过;

    inputChange(event: KeyboardEvent) {
const target = event.target as HTMLTextAreaElement;
var activeInput = target.id;
}

由于我以稍微不同的方式搜索了两个问题，我复制了我的答案，以防你在这里结束。

在被调用的函数中，你可以用以下方法定义你的类型:

emitWordCount(event: { target: HTMLInputElement }) {
this.countUpdate.emit(event.target.value);
}

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

event: Event & { target: HTMLInputElement }

你也可以更具体，而不是使用HTMLInputElement，你可以使用例如HTMLTextAreaElement的文本区域。

应该使用currentValue，因为currentValue的类型是EventTarget & HTMLInputElement。

角10 +

打开tsconfig.json并禁用strictDomEventTypes。

  "angularCompilerOptions": {
....
........
"strictDomEventTypes": false
}

最好的方法是使用template =>将id添加到输入中，然后使用它的值

& lt;输入类型=“text"#公证锁定(keyup) =" searchNotary(公证锁定.value)"占位符="请求信息;比;

searchNotary(value: string) {
// your logic
}

这样，当严格验证被激活时，你将永远不会有Typescript错误=>参见angular文档

考虑任何美元()

<textarea (keyup)="emitWordCount($any($event))"></textarea>

就我而言，我有:

const handleOnChange = (e: ChangeEvent) => {
doSomething(e.target.value);
}

问题是我没有为ChangeEvent提供类型参数，因此它知道e.target是HTMLInputElement。即使我手动告诉它target是一个输入元素(例如const target: HTMLInputElement = e.target)， ChangeEvent仍然不知道这是有意义的。

解决办法是:

// add type argument
const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
doSomething(e.target.value);
}

角11 +

打开tsconfig.json并禁用strictTemplates。

 "angularCompilerOptions": {
....
........
"strictTemplates": false
}

用户TypeScript内置在实用程序类型Partial<Type>中

在模板中

(keyup)="emitWordCount($event.target)"

在你的组件中

 emitWordCount(target: Partial<HTMLTextAreaElement>) {
this.countUpdate.emit(target.value./*...*/);
}

不要使用其他答案的变通方法，包括转换事件、事件目标或完全禁用类型检查。这不安全。

相反，你应该“拔”;HTML元素的值，并将其作为参数传递。

非常简单的例子:

<input #searchBox type="text" (input)="doSearch(searchBox.value)">

doSearch(text: string): void {
}

所以如果你把它扩展到原来的例子，你应该得到这个:

import { Component, EventEmitter, Output } from '@angular/core';


@Component({
selector: 'text-editor',
template: `
<textarea #text (keyup)="emitWordCount(text.value)"></textarea>
`
})
export class TextEditorComponent {
@Output() countUpdate = new EventEmitter<number>();


emitWordCount(text: string) {
this.countUpdate.emit(
(text.match(/\S+/g) || []).length);
}
}

对于那些在angular 13中遇到这个错误的人，因为是从以前的版本升级的

对我来说，问题是我在我的HTML中使用以下内容(这在以前是允许的)

(keyup)="applyFilter($event.target.value)"

解决方法是:

HTML:

(keyup)="applyFilter($event)"

组件-在我调用的函数中:

applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
// ... etc...
}

现在我可以像以前一样使用filterValue。

我也遇到过类似的问题，我是这样解决的。通过使用这个自定义泛型类型

export type DatasetInjector<T, D extends DOMStringMap> = T & {
dataset: D;
};

它是如何工作的?

在DatasetInjector中，泛型T指定HTML typescript类型，例如htmllinputelement或HTMLTextAreaElement。第二个泛型D用于提供关于输入标记(或任何其他HTML标记)的数据属性的缺失信息。

例子

这里我们为HTMLInputElement添加了数据属性inputId

// Now this can be used as funciton type for onChange handler for input element
// ChangeEventHandler<DatasetInjector<HTMLInputElement, { inputId: string }>>


export type DatasetInjector<HTMLInputElement, D extends DOMStringMap> = HTMLInputElement & {
dataset: D; // D -> { inputId: string }
};

要了解更多信息，请参阅我的文章参考链接