typescript - 在 addEventListener 的回调中接收到的事件怎么可能为空？

Question

input!.addEventListener('keyup', (event) => {
  console.log(event.target.value);
});

TS 编译器声称 event可能是 null .这怎么可能？根据定义，这是一个回调函数，只要有 keyup 就会被调用。事件。
我知道这可以通过以下方式轻松解决: (event.target as HTMLSelectElement).value .我不是在问这个问题的解决方案。我很好奇 TS 是什么。
为什么/如何才能 event是 null在该事件的回调函数中？

Answer 1

EventTarget类型不继承自 HTMLElement默认情况下，因为 html 元素 不是唯一的 可以作为事件目标的事物。
基于 this

Element, Document, and Window are the most common event targets, but other objects can be event targets, too. For example XMLHttpRequest, AudioNode, AudioContext, and others.

所以如果你的 input是 HTMLElement EventTarget不能为空并且您已经有了解决方案 ( (event.target as HTMLSelectElement).value )。
但正如我所说的 EventTarget是一个比 Element 更抽象的接口(interface)在 typescript 中它位于 EventTarget | null类型。

Event.target: EventTarget | null