Type guarding React.KeyboardEvent to reuse event handlers - user-input

Question

I created a search-bar-React-Component that resembles the one by Google.
It should fire off a search based on the input if I either click on the 'search' icon or if I hit the enter key.
I want to reuse the same function for both the click and the keydown handler:
...
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 keeps giving me the following error:
'Property 'key' does not exist on type 'MouseEvent<HTMLButtonElement, MouseEvent>'
I tried both of the following:
(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.
What is a good way to typeguard? Is there a better way to write the function?
Thank you.

Answer 1

Turns out using an intersection type solved the problem:
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);
}
}
I checked the type definitions, turns out the 'type' property is only defined as 'string', not as a definite primitive value.
In case I'm missing something here (i.e. that a keydown event can somehow not include the e.type == 'keydown' property), please let me know.
It feels unnecessarily hacky!