Soy nuevo en Typescript, pero me obligo a programar porque dicen que es la "mejor" práctica y beneficiosa a largo plazo...
así que ahora estoy tratando de usar react-phone-input-2
https://www.npmjs.com/package/react-phone-input-2
El ejemplo en la página anterior es solo para Javascript estándar. Lo seguí... el widget aparece... sin embargo, no puedo escribir nada dentro de la entrada... En mi editor, el atributo onChange /prop de la etiqueta PhoneInput tiene una línea ondulada roja debajo. Cuando paso el cursor por encima me muestra el siguiente error:
(método) PhoneInputEventsProps.onChange?(valor: cadena, datos: {} | CountryData, evento: React.ChangeEvent, formattedValue: cadena): void El tipo 'Dispatch<SetStateAction>' no se puede asignar al tipo '(valor: cadena, datos : {} | CountryData, evento: ChangeEvent, formattedValue: string) => void'.
Los tipos de parámetros 'valor' y 'valor' son incompatibles. El tipo 'string' no se puede asignar al tipo 'SetStateAction'.ts(2322) index.d.ts(26, 5): el tipo esperado proviene de la propiedad 'onChange' que se declara aquí en el tipo 'IntrinsicAttributes & PhoneInputProps'
Básicamente tengo esto en la parte superior:
const [value, setValue] = useState()Luego, en algún lugar del JSX devuelto, tengo:
<PhoneInput placeholder='Enter phone number' value={value} onChange={setValue} className='block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md' />¿Cómo ajusto el código para que react-phone-input-2 funcione para Typescript?
El problema es que no le da un tipo o valor predeterminado a useState . Esto significa que el valor predeterminado no está undefined y ese es el único tipo que se permitirá para ese estado.
Eso significa que el tipo setValue aquí es (más o menos):
(newValue: undefined) => void Y el tipo de prop onChange es:
( value: string, data: {} | CountryData, event: React.ChangeEvent<HTMLInputElement>, formattedValue: string ) => void Entonces, el primer argumento para onChange será una string , pero su función setValue solo acepta undefined .
Para arreglarlo, solo tienes que darle a tu estado un tipo. O explícitamente:
const [value, setValue] = useState<string | undefined>()O dejando que el tipo se deduzca del valor predeterminado:
const [value, setValue] = useState('') // type inferred from default valueEl error indica que tiene tipos incompatibles. Por lo general, el segundo argumento de una useState() es del tipo Dispatch<SetStateAction> . El argumento onChange requiere algo más. Este cambio mínimo debería funcionar:
<PhoneInput placeholder='Enter phone number' value={value} onChange={(newValue) => setValue(newValue)} className='block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md' />