定义 <数字 | ''> 在打字稿中答案

【问题标题】：Defining <number | ''> in typescript定义 <数字 | ''> 在打字稿中
【发布时间】：2022-01-09 01:36:30
【问题描述】：

下面是我的代码。

const [enteredAge, setEnteredAge] = useState<number | "">("");

已将 useState 的类型定义为数字。拥有像<number | undefined> 这样的类型是有意义的，我们将类型定义为number 或undefined。但是在上面给定的代码中，我以这种方式定义了<number|"">。这是否意味着只有useState 的初始状态可以这样定义""？

【问题讨论】：

我认为这意味着您可以使用数字或空字符串对其进行初始化。（顺便说一句，我不太了解打字稿）
@evolutionxbox 是的，没错

标签： javascript reactjs typescript types use-state

【解决方案1】：

使用useState<number | "">("");，您的状态最初将设置为""，然后可以再次设置为数字或“”，但不能设置为任何其他字符串。

你也可以用同样的方法将它初始化为一个数字useState<number | "">(42);。

const [state, setState] = useState<number | "">("");
const [stateNum, setStateNum] = useState<number | "">(42);

setState("Foo"); // Error: Argument of type '"Foo"' is not assignable to parameter of type 'SetStateAction<number | "">'.ts(2345)

setState(0); // OK
setState(""); // OK

【讨论】：

【解决方案2】：

如果用于保存受控数字输入的值，请不要将其存储在单个状态变量中 - 相反，将用户输入存储为原始字符串值，并为解析后的数字使用单独的状态值类型。通过这样做，您将永远不会以意外的方式修改用户输入（例如：尝试在下面的代码示例中的输入中输入1e6，看看它是如何被解析为数值的：

TS Playground link

<div id="root"></div>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script><script>Babel.registerPreset('tsx', {presets: [[Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]]});</script>
<script type="text/babel" data-type="module" data-presets="tsx,react">

/**
 * The following line is here because this Stack Overflow snippet uses the
 * UMD module for React. In your code, you'd use the commented `import` lines
 * below it.
 */
const {useEffect, useState} = React;

// import ReactDOM from 'react-dom';
// import {default as React, Dispatch, ReactElement, SetStateAction, useEffect, useState} from 'react';

type NumberParsingFunction = (input: string) => number;

type NumericInputData = {
  rawValue: string;
  setRawValue: Dispatch<SetStateAction<string>>;
  value: number;
};

const defaultNumberParsingFunction: NumberParsingFunction = str => Number(str);

function useNumericInput (parseFn: NumberParsingFunction = defaultNumberParsingFunction): NumericInputData {
  const [rawValue, setRawValue] = useState('');
  const [value, setValue] = useState(parseFn(rawValue));
  useEffect(() => setValue(parseFn(rawValue)), [rawValue, setValue]);
  return {rawValue, setRawValue, value};
}

function Example (): ReactElement {
  const {rawValue, setRawValue, value} = useNumericInput();
  useEffect(() => console.log({rawValue, value}));
  return (<input type="number" onChange={ev => setRawValue(ev.target.value)} value={rawValue} />);
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>

【讨论】：