How to handle number input in typescript?

Question

this is how a regular input field would be handled in react/typescript where value is type string:

const [value, onChange] = useState<string>('');

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(e.target.value);
}

return (
  <input
    value={value}
    onChange={onChange}
  />
);

But I'm having trouble where my input is of type number:

const [value, onChange] = useState<number>();

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  // type error
  setValue(e.target.value);
}

return (
  <input
    type="number"
    value={value}
    onChange={onChange}
  />
);

in this case, value is of type number, input is of type number (so hypothetically e.target.value should always be of type number. However according to typescript, event.target.value is always a string. I can cast it to number ie.

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(Number(e.target.value));
}

but now if some number is typed in and the user backspaces it to make it empty, the value changes to 0 - the field can never be empty.

keeping value as string and then casting it to number on save is not a viable solution

something i'm temporarily doing is making e.target.value as any:

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(e.target.value as any);
}

which works great but am I missing something to keep this type safe?

Answer 1

In general, you'll want to make your variable a string for everything to work well.

Then when you want to use it as a number, convert it at that point. You can easily convert it to a number using something like +value or parseFloat(value)

The input uses a string type for a reason. And this way you keep the typesafety that typescript provides.