Soy nuevo en TypeScript y estoy tratando de crear un enlace React personalizado para almacenar algunas entradas (y actualizarlas en consecuencia). Quiero hacerlo más general al permitir que el gancho/función almacene la entrada como cadena o número. Pero a partir de ahora en la función onChange, al configurar el estado aparece el siguiente error: Argument of type 'string' is not assignable to parameter of type 'SetStateAction<T>'. Entiendo lo que está mal, pero no tengo idea de cómo solucionarlo. Sé que puedo hacer dos funciones separadas, pero ¿dónde está la diversión en eso? D.
Debería usarse así:
const inputNumber = useInput<number>(1); return(<input type="text" value={inputNumber.value} onChange={inputNumber.onChange} />);Aquí está mi código:
import { useState } from "react"; export default function useInput<T extends string | number>( init: T ): useInputT<T> { const [input, setInput] = useState<T>(init); function onChange(e: React.ChangeEvent<HTMLInputElement>): void { switch (typeof init) { case "string": setInput(e.target.value); break; case "number": setInput(parseInt(e.target.value)); break; } } return { value: input, onChange }; } type useInputT<T> = { value: T; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; };El problema es typeof e.target.value !== T . Su setInput espera que lo configure para escribir T. En sus llamadas setInput, puede convertirlo como T para evitar eso. EX setInput(e.target.value as T)
Aquí hay un pequeño codesandbox https://codesandbox.io/s/interesting-poincare-6h3d5o?file=/src/App.tsx