Javascript/Typescript class 数字与字符串的最佳实践问题

Question

我是新手。我没有意识到，在我的 Typescript/React 解决方案中，即使我将属性定义为数字并且我将输入类型设为“数字”，但无论何时将该状态值放入输入字段它会将其更改为字符串（除非您采取任何措施来处理它）。

在我的例子中，我最初从 xml soap 调用中插入值。此项目的内部 html 是“100.00”。我将此项目 (BaseFare) 的 class 声明为数字而不是字符串，并且状态最初设置为 100.00（作为数字）。它呈现在表单上，在我进行更改的那一刻，它变回字符串“199.00”。

我在部分代码中对 BaseFare 进行了计算，因此我必须对此函数执行 parseInt 以使其处理现在的字符串。

我的问题是... 您在什么时候决定将其定义为字符串还是数字。做 parseInt 很好。但我不喜欢属性最初是一个数字然后变为 sting 的事实。然后，因为我认为对于其他查看代码的人来说，他们可能认为属性从数字变为字符串很奇怪，如果我要将其定义为数字，那么我的 handleChange函数绝对应该将 setState 设置为数字，以便始终将值视为数字。

只是想知道一直这样做的人的意见...

处理从输入字段更新值并将其记录为数字的最佳最现代方法是什么。我已经将 valueAsNumber 视为处理此问题的常用方法...

handleChange(e) {
    this.setState({
        [e.target.name]: e.target.valueAsNumber || e.target.value
    });
}

看来，如果它是一个真实的数字并且我需要对其进行计算，那么“正确”的方法是将其定义为一个数字并将其保留为一个数字。是吗？

Answer 1

DOM 在内部将值存储为字符串，显示给用户的是字符串。

因此，您可以选择如何处理它。在 <input type="number" /> 上，您发现 valueAsNumber 可用于转换，或者您可以自己进行转换。

我认为唯一重要的是在 EventHandler 中处理转换。

另外，为了简单起见，您可以使用表单库，例如react-hook-form that will take care of that，这样您就不必处理那种细节。有了它，您需要做的就是：

const MyForm : FC = () =>
  const { register, watch } = useForm<{thatInput: number}>();

  const { thatInput } = watch();

  return (
    <...>
      <input type="number" name="thatInput" ref={register({valueAsNumber: true})} />
      <div>the value is: {thatInput}</div>
    </...>
  );
}

Answer 2

TypeScript 中的 number 类型支持浮点数

let inputValue: number = 3.14
console.log(inputValue)   //this is valid code

那么我猜你的问题是 input type="number"

数字类型有一个 step 值控制哪些数字有效（连同 max 和 min），默认为 1。这个值也被实现用于步进按钮（即向上按步进）。

只需将此值更改为合适的值即可。对于金钱，大概需要小数点后两位：

<input type="number" step="0.01">

或

<input type="number" step="any">

Javascript/Typescript class 数字与字符串的最佳实践问题

Best Practice question for Javascript/Typescript class number vs. string

javascript

html

reactjs

typescript

html-input