title: How to handle number input in typescript?
body: <p>this is how a regular input field would be handled in react/typescript where <code>value</code> is type string:</p>
  
  <pre><code>const [value, onChange] = useState&lt;string&gt;('');
  
  const onChange = (e: ChangeEvent&lt;HTMLInputElement&gt;) {
    setValue(e.target.value);
  }
  
  return (
    &lt;input
      value={value}
      onChange={onChange}
    /&gt;
  );
  </code></pre>
  
  <p>But I'm having trouble where my input is of type number:</p>
  
  <pre><code>const [value, onChange] = useState&lt;number&gt;();
  
  const onChange = (e: ChangeEvent&lt;HTMLInputElement&gt;) {
    // type error
    setValue(e.target.value);
  }
  
  return (
    &lt;input
      type="number"
      value={value}
      onChange={onChange}
    /&gt;
  );
  </code></pre>
  
  <p>in this case, value is of type number, input is of type number (so hypothetically <code>e.target.value</code> should always be of type number. However according to typescript, <code>event.target.value</code> is always a string. I can cast it to number ie.</p>
  
  <pre><code>const onChange = (e: ChangeEvent&lt;HTMLInputElement&gt;) {
    setValue(Number(e.target.value));
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>keeping value as string and then casting it to number on save is not a viable solution</p>
  
  <p>something i'm temporarily doing is making <code>e.target.value</code> as any:</p>
  
  <pre><code>const onChange = (e: ChangeEvent&lt;HTMLInputElement&gt;) {
    setValue(e.target.value as any);
  }
  </code></pre>
  
  <p>which works great but am I missing something to keep this type safe?</p>