类型保护 React.KeyboardEvent 以重用事件处理程序

问题描述

我创建了一个类似于 Google 的 search-bar-React-Component。 如果我点击“搜索”图标或按下回车键，它应该会根据输入触发搜索。

我想对点击和按键处理程序重用相同的函数：

...
var [searchParam,setSearchParam] = useState('');

function initSearch(
    e:
      | React.MouseEvent<HTMLButtonElement>
      | React.KeyboardEvent<HTMLInputElement>
  ): void {
    if (e.type == 'click' || (e.type == 'keydown' && e.key == 'Enter')) {
      console.log(searchParam);                    /* ⬆️ this throws the error */
    }
  }
...

TypeScript 不断给我以下错误：

'MouseEvent' 类型不存在'属性'键'

我尝试了以下两种方法：

(e instance of KeyboardEvent && e.key == 'Enter') // This is always false,since e is a React.KeyboardEvent

(e instance of React.KeyboardEvent) // KeyboardEvent is not a property of React.

打字保护的好方法是什么？有没有更好的方法来编写函数？

谢谢。

解决方法

原来使用交集类型解决了问题：

function initSearch(
    e:
      | (React.MouseEvent<HTMLButtonElement> & { type: 'click' })  /*⬅️*/
      | (React.KeyboardEvent<HTMLInputElement> & { type: 'keydown' })  /*⬅️*/
  ): void {
    if (e.type == 'click' || (e.type == 'keydown' && e.key == 'Enter')) {
      console.log(searchParam);
    }
  }

我检查了类型定义，结果发现 'type' 属性只定义为 'string'，而不是明确的原始值。

如果我在这里遗漏了一些东西（即 keydown 事件可能以某种方式不包含 e.type == 'keydown' 属性），请告诉我。 感觉毫无必要！