在处理来自输入字段的事件时，我通常会遇到这个问题，比如key up。但是请记住，事件可以起源于任何地方，例如文档上的keyup侦听器，其中没有关联的值。所以为了正确地提供信息，我提供了一个额外的类型:

interface KeyboardEventOnInputField extends KeyboardEvent {
  target: HTMLInputElement;
}
...

  onKeyUp(e: KeyboardEventOnInputField) {
    const inputValue = e.target.value;
    ...
  }

如果函数的输入类型是Event，你可能需要告诉typescript它实际上是什么:

  onKeyUp(e: Event) {
    const evt = e as KeyboardEventOnInputField;
    const inputValue = evt.target.value;
    this.inputValue.next(inputValue);
  }

例如，这在Angular中是必需的。

JLRishe的答案是正确的，所以我只是在我的事件处理程序中使用这个:

if (event.target instanceof Element) { /*...*/ }

我用这个:

onClick({ target }: MouseEvent) => {
    const targetElement: HTMLElement = target as HTMLElement;
    
    const listFullHeight: number = targetElement.scrollHeight;
    const listVisibleHeight: number = targetElement.offsetHeight;
    const listTopScroll: number = targetElement.scrollTop;
    }

对于typescript，我们可以利用类型别名，如下所示:

type KeyboardEvent = {
  target: HTMLInputElement,
  key: string,
};
const onKeyPress = (e: KeyboardEvent) => {
  if ('Enter' === e.key) { // Enter keyboard was pressed!
    submit(e.target.value);
    e.target.value = '';
    return;
  }
  // continue handle onKeyPress input events...
};

使用typescript，我使用了一个只适用于我的函数的自定义接口。示例用例。

  handleChange(event: { target: HTMLInputElement; }) {
    this.setState({ value: event.target.value });
  }

在这种情况下，handleChange将接收一个目标字段为HTMLInputElement类型的对象。

在后面的代码中，我可以使用

<input type='text' value={this.state.value} onChange={this.handleChange} />

更清晰的方法是将接口放到一个单独的文件中。

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

然后使用下面的函数定义:

  handleChange(event: HandleNameChangeInterface) {
    this.setState({ value: event.target.value });
  }

在我的用例中，明确定义了handleChange的唯一调用者是输入文本的HTML元素类型。

您可以创建自己的扩展Event的通用接口吗?像这样的东西?

interface DOMEvent<T extends EventTarget> extends Event {
  readonly target: T
}

然后你可以这样使用它:

handleChange(event: DOMEvent<HTMLInputElement>) {
  this.setState({ value: event.target.value });
}