React useState传入number类型Props时报TS2322：string不可分配给number类型

问题原因 #

哪怕你给输入框设置了type="number"，HTML原生input元素的e.target.value返回值永远是字符串类型，你直接把字符串赋值给声明为number类型的strength、speed字段，就会触发这个类型错误，和Props的定义没有关系。

解决方法 #

在更新state的时候把输入值转为数字类型即可，最简单的方式是用Number()包裹输入值：

Strength:
<input
  type="number"
  value={strength}
  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
    setCharacter({ ...character, strength: Number(e.target.value) })
  }
/>
Speed:
<input
  type="number"
  value={speed}
  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
    setCharacter({ ...character, speed: Number(e.target.value) })
  }
/>

如果需要处理用户清空输入的场景，可以加兜底逻辑避免出现NaN：Number(e.target.value) || 0。

内容的提问来源于stack exchange，提问作者user12494839