在打字稿中定义<数字 | >

Question

下面是我的代码。

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

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

Answer 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

Answer 2

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

TS游乐场链接

<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>