When I try to define an event that I receive from a Svelte-managed input element, TypeScript informs me that my JSDoc type does not match what I receive from the on:input. On my page, I have an input field with the following handler:
<input id="description" on:input={handleInput}
And in my JavaScript code, I wrote:
/** @param {InputEvent & { target: HTMLInputElement}} event */
const handleInput = (event) => {
const fullInput = event.target.value;
const singleChar = event.data;
const cursorPosition = event.target.selectionStart;
// ...
The types are recognized correctly within handleInput(). However, TypeScript raises an error for on:input in the HTML:
Type '(event: InputEvent & { target: HTMLInputElement;}) => void' is not assignable to type 'FormEventHandler<HTMLInputElement>'.
Types of parameters 'event' and 'event' are incompatible.
Type 'Event & { currentTarget: EventTarget & HTMLInputElement; }' is not assignable to type 'InputEvent & { target: HTMLInputElement; }'.
Type 'Event & { currentTarget: EventTarget & HTMLInputElement; }' is missing the following properties from type 'InputEvent': data, dataTransfer, inputType, isComposing, and 5 more.js(2322)
Why do these types clash and is there any solution to this issue?