Esto tiene que ser una solución simple, pero no puedo encontrar nada que explique cómo resuelve este problema. Estoy usando Next.js y Typescript para hacer que un componente muestre una imagen y use ganchos para modificar dicha imagen. El problema es que, cuando paso una cadena al parámetro que se escribe como cadena, aparece este error: Type '{ source: string; }' is not assignable to type 'string'.ts(2322)
Dado este componente:
const ImageToggleOnMouseOver = (source: string) : JSX.Element => { ... }Cuando trato de usarlo, me sale el error anterior:
return ( <div> <ImageToggleOnMouseOver source='/heads_up.jpg' /> </div> ); Cuando se proporciona como source: any funciona bien, pero ¿no debería funcionar también la cadena ya que espero pasar una cadena después de todo?
tipo correcto del componente debe ser
const ImageToggleOnMouseOver = ({source} :{source: string}) : JSX.Element => { ... }Debe cambiar la declaración en el componente. Está tratando de asignar el objeto props de { source: string } a un parámetro declarado como (source: string) . Necesitas cambiar la definición de la función a esto:
const ImageToggleOnMouseOver = ({source}: {source: string}) : JSX.Element => { ... } Al desempaquetar el objeto props y recuperar el prop de source , puede especificar las propiedades que necesita en la función y está especificando el tipo de props .