Typescript: Which type for input's onChange event?

[eekboom]

This works with react, but not with preact:

<textarea value={textInputValue} onChange={(e: React.FormEvent<HTMLInputElement>) => setTextInputValue(e.target.value) }/>

I get TS2694: Namespace 'React' has no exported member 'FormEvent'.

So, which type can I use here?

[eekboom]

After a lot of struggling the best I could come up was the code below.
However, it just seems so wrong to me, because it uses something that is "internal" and needs to use "currentTarget" (rather than "target").
Why the heck does TargetedEvent<HTMLTextAreaElement> fix the currentTarget to HTMLTextAreaElement, but leaves target simply as TargetedElement? That seems the wrong way around because the currentTarget's type changes as the event bubbles up, but the original target always is an HTMLTextAreaElement.

import {JSXInternal} from "preact/src/jsx";
import GenericEventHandler = JSXInternal.GenericEventHandler;
import TargetedEvent = JSXInternal.TargetedEvent;

const handleInputChanged: GenericEventHandler<HTMLTextAreaElement> = (event: TargetedEvent<HTMLTextAreaElement>) => {
    setTextInputValue(event.currentTarget.value);
};
...

<textarea value={textInputValue} onInput={handleInputChanged}/>

For now it seems to me that preact plus Typescript is just broken.

[rschristian]

Easiest way to type inputs is just:

onInput={(e) => doSomething((e.target as HTMLInputElement).value)}

Edit: If anyone has a better method, I'd love to see it done, but for now, as far as I'm aware, assertions (or ignore comments) are the way to go.

[icatalina]

This overwrites the type, it is a bad practice. If the html element changes for some reason, TS won't alert you.

[rschristian]

If the html element changes for some reason

Well you're not exactly going to be adding an onInput to a <div>.

TS won't alert you.

...as opposed to TS instead throwing errors without the type assertion.

Assertions are not inherently bad practice. If you know what you're asserting is true, then they serve a very valid and useful purpose. Yes, the goal here is to overwrite the type, as it's incorrect.

Now if you have a way to correct the type, I'd love to see that done. But falling short of that, type assertions are far less verbose than any of the alternatives.

[rauschma]

The following works for me:

import { type JSX } from 'preact';

function App() {
  return <div>
    <input
      type="file"
      accept="application/json, text/plain"
      onChange={(event: JSX.TargetedEvent<HTMLInputElement, Event>) => handleFile(event.currentTarget)}
    />
  </div>;
}

function handleFile(elem: HTMLInputElement) {
  console.log(elem.files);
}

The type annotation in the arrow function is optional, but I’ll probably change the code and make event a parameter of handleFile() and wanted to see which non-internal type works.

[marvinhagemeister]

In newer Preact versions the event type is properly inferred, so the JSX.TargetedEvent<HTMLInputElement, Event> shouldn't be needed anymore.

[rauschma]

@marvinhagemeister Right! I only mentioned it (“The type annotation in the arrow function is optional”) because I wanted to figure out what a function handleChangeEvent() would look like:

function handleChangeEvent(event: JSX.TargetedEvent<HTMLInputElement, Event>) {
  // ...
}

AFAICT, there is no simpler type (e.g. ChangeEvent) in this case, right?

[beautyfree]

So what is right solution?

[rschristian]

For now, the type assertion as I listed above is "the solution" as far as I am aware.

[ritschwumm]

i'd vote for the solution @rauschma posted:

• currentTarget is less easy to get wrong because it's guaranteed to go to the correct element
• using a type assertion defeats the purpose of typescript (which is preventing bugs by using types)

i'd probably use a more restricted event type, though

[rauschma]

I'd probably use a more restricted event type, though

Can you be more specific? It’d be great if there were something built-in that’s simpler than JSX.TargetedEvent<HTMLInputElement, Event>.

[ritschwumm]

sorry, i confused onChange with onInput - the latter has InputEvent, the former does not