HTMLInputElement event.target.value输出字符串事件，尽管它是范围元素（typescript）

问题：

const exampleNumberType: number = 0;
<input type="range" onChange={
   (event: React.ChangeEvent<HTMLInputElement>) => exampleNumberType = event.target.value
}/>

const exampleNumberType:number=0；
exampleNumberType=event.target.value
}/>

在typescript中，上述代码将引发错误，因为event.target.value的类型是“string”，但由于它是从范围事件输入的，因此它应该是number类型（因为范围元素用于选择数字，而不是字符串）

---

显然，您可以使用

parseInt（）

或类似的方法来转换值并使其符合您需要的类型，但是有一个更优雅的解决方案（请参见下面的答案）.

您可以使用标准javascript方法将

事件.target.value

字符串转换为数字，但我想我找到了一个更优雅的解决方案：

我的答案：

const exampleNumberType: number = 0;
<input type="range" onChange={
   (event: React.ChangeEvent<HTMLInputElement>) => exampleNumberType = event.target.value
}/>

多亏了我，我发现有“event.target”对象的方法，它将以数字或日期（如果需要）的形式返回值

event.target.valueAsNumber

event.target.valueAsDate

因此，没有类型错误的新代码如下所示：

const exampleNumberType: number = 0;
<input type="range" onChange={
   (event: React.ChangeEvent<HTMLInputElement>) => exampleNumberType = event.target.valueAsNumber
}/>

const exampleNumberType:number=0；
exampleNumberType=event.target.valueAsNumber
}/>