属性'data'在类型"事件"上不存在。TS(2339)

Question

我有一个HTML文本区域，当用户在上面键入时，我需要打印用户输入到控制台的字符。

所以我尝试了以下代码

HTML(index.html(：

<textarea id="editor"></textarea>

TypeScript(script.ts(:

const editor = document.getElementById("editor") as HTMLTextAreaElement;
editor.addEventListener("input", e => {
console.log(e.data);
});

这和我预期的一样好，但当将TypeScript代码编译为JavaScript时，编译器会给出以下错误：

script.ts:4:19 - error TS2339: Property 'data' does not exist on type 'Event'.
4     console.log(e.data);
~~~~

Found 1 error in script.ts:4

我该如何解决这个问题？

Answer 1

您可以检查事件e是否是InputEvent的实例，因为InputEvent具有data属性。

editor.addEventListener("input", e => {
if (e instanceof InputEvent)
console.log(e.data);
});

或者您可以提前返回：

editor.addEventListener("input", e => {
if (!(e instanceof InputEvent))
return;
console.log(e.data);
// ...
});

Answer 2

您需要告诉typescript，event不是一个通用事件，而是一个输入事件(因为只有输入事件具有属性data(

所以这样的东西会起作用：

const x = function (event: InputEvent) {console.log(event.data)}
document.getElementById("test")?.addEventListener("input", x)

通过使用Generics等(但由于我还不精通它们，我真的不知道如何做到(，你可能也可以在一行中实现这一点(无需删除x(