A continuación se muestra mi código.
const [enteredAge, setEnteredAge] = useState<number | "">(""); Ha definido el tipo para useState como número. Tener un tipo como <number | undefined> tiene sentido que definamos el tipo como number o undefined . Pero en el código anterior he definido <number|""> de esta manera. ¿Significa esto que solo el estado inicial de useState se puede definir "" de esta manera?
Con useState<number | "">(""); su estado se establecerá inicialmente en "" y luego se puede establecer en un número o "" nuevamente, pero no en cualquier otra cadena.
También puede inicializarlo a un número useState<number | "">(42); de la misma manera
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(""); // OKSi el uso es para mantener el valor de una entrada numérica controlada, no lo almacene en una sola variable de estado; en su lugar, almacene la entrada del usuario como un valor de cadena sin procesar y use un valor de estado separado para el tipo de número analizado. Al hacerlo, nunca modificará la entrada del usuario de una manera inesperada (ejemplo: intente ingresar 1e6 en la entrada en el ejemplo de código a continuación y vea cómo se analiza como un valor numérico:
<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>