键盘事件：属性'value'在类型'EventTarget'上不存在。

Question

我复制了一些 Angular 官方页面上的代码，但是 Visual Code 显示了一个错误：

这一行出现了错误：

map((e: KeyboardEvent) => e.target.value),

错误。

Property 'value' does not exist on type 'EventTarget'.

以下是来自 Angular 官方网站 的代码:

import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

const searchBox = document.getElementById('search-box');

const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => e.target.value),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
);

typeahead.subscribe(data => {
 // Handle the data from the API
});

- matt

---

这里的 EventTarget 是什么类型？ - Sachin Gupta

输入元素... - matt

你能提供一个 MCVE 吗？我这边无法重现这个问题。 - Nino Filiu

@matt 问题解决了吗？ - Saddam Pojee

Answer 1

由于TypeScript无法推断事件类型，您需要明确编写HTMLElement的类型，这是您的目标。例如，如果其类型是HTMLInputElement，则可以编写以下行：

map((e: KeyboardEvent) => (<HTMLInputElement>e.target).value),

这将解决你的问题。

- Saddam Pojee

---

你知道如何从鼠标事件中获取e.target.value吗？上述方法对我不起作用 :( - jschuss

Answer 2

尝试使用这种类型的输入方式，而不是使用KeyboardEvent，请使用ChangeEvent：

map((e: React.ChangeEvent<HTMLInputElement>) => e.target.value),

- Vova