在一个函数中处理 React.KeyboardEvent 或 React.MouseEvent

Question

我正在尝试获取一个函数来处理单击和键盘事件，因为我正在尝试使我的网络应用程序键盘可访问。当我使用|该类型的符号时，出现错误：

Property 'key' does not exist on type 'KeyboardEvent<Element> | MouseEvent<Element, MouseEvent>'.
  Property 'key' does not exist on type 'MouseEvent<Element, MouseEvent>'.

我目前的功能：

const handleChange = (e: React.KeyboardEvent | React.MouseEvent): void => {
  if (e.type !== 'mousedown' || e.key !== ' ') return;

  ...other stuff...
}

有人能给我指明正确的方向，使其按预期工作吗？我可以只编写单独的函数，但我认为将其保留在一个函数中会很好。

Answer 1

您可以使用类型断言来执行此操作（https://basarat.gitbook.io/typescript/type-system/type-assertion）：

const handleChange = (e: React.KeyboardEvent | React.MouseEvent): void => {
  if (e.type !== 'mousedown' || (e as React.KeyboardEvent).key !== ' ') return;

  ...other stuff...
}