Recently, I decided to delve into Tauri using vanilla Typescript code.
Oddly enough, when working in vscode, it flagged event.key and foo_input.value as not properties of Event. However, when running the Tauri application, everything worked perfectly fine.
const foo_input = document.querySelector(".foo");
foo_input?.addEventListener("keydown", event => {
if (event.key !== 'Enter') return;
console.log(foo_input.value);
});
Property 'key' does not exist on type 'Event'.ts(2339)
Property 'value' does not exist on type 'Element'.ts(2339)
Here is the element with the .foo class:
<body>
<main>
...
<input type="text" class="foo" placeholder="Lorem ipsum dolor sit amet">
...
</main>
</body>
Realizing that I was actually utilizing KeyboardEvent, I attempted to specify the event.
const foo_input: Element | null = document.querySelector(".foo");
foo_input?.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.key !== 'Enter') return;
console.log(foo_input.value);
});
This attempt resulted in another error message:
Overload 1 of 2, '(type: keyof ElementEventMap, listener: (this: Element, ev: Event) => any, options?: boolean | AddEventListenerOptions | undefined): void | undefined', gave the following error.
Argument of type '"keydown"' is not assignable to parameter of type 'keyof ElementEventMap'.
Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void | undefined', gave the following error.
Argument of type '(event: KeyboardEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
Type '(event: KeyboardEvent) => void' is not assignable to type 'EventListener'.
Types of parameters 'event' and 'evt' are incompatible.
Type 'Event' is missing the following properties from type 'KeyboardEvent': altKey, charCode, code, ctrlKey, and 17 more.ts(2769)
Being a novice in typescript and not frequently programming on the front-end, I am unsure of what is causing this issue, particularly since I mostly relied on solutions found here on stackoverflow. Does anyone have insights into why this is happening?