Soy un novato en TypeScript y estoy aprendiendo cómo funcionan los tipos en TypeScript.
También estoy usando MaterialUI en este proyecto.
Recibo un error que dice que estoy tratando de asignar any valor a una variable de string . Pero estoy tratando de dar un valor de string a una variable de string .
Déjame explicarte mi proyecto:
Aquí recibo un JSON de otra carpeta import ProjectData from '../../../../data/projectData.json';
Aquí estoy tratando de mapear sobre el archivo ProjectData JSON y pasando Project a un controlador onClick
{ProjectData.map((Project) => { return ( <Grid item xs={12} sm={12} md={6} lg={4} xl={3}> <Box onClick={() => { handleCardClick(Project)}}> ....Aquí está mi función handleCardClick:
const handleCardClick = (Project: ProjectJSONData) => { setSelectedProject({ projectTitle: {Project.projectTitle}, thumbnail: {Project.projectThumbnail}, userName: {Project.username}, profileImage: {Project.userProfileImage}, openToCollab: {Project.openToCollab}, tags: {Project.tags}, }) }; y mi useState: const [selectedProject, setSelectedProject] = useState<ProjectDataType | null>(null);
Estos son los dos tipos que he definido:
ProjectJSONData es para el JSON que estoy recibiendo
type ProjectJSONData = { projectTitle: string; ProjectThumbnail: string; username: string; userProfileImage: string; openToCollab: string; tags: string[]; }; ProjectDataType es uno personalizado que he hecho.
type ProjectDataType = { projectTitle: string; thumbnail: string; userName: string; profileImage: string; openToCollab: boolean; tags: string[]; }; Recibo mi error en la definición de handleCardClick .
En ProjectDataType , tiene el tipo openToCollab como boolean . En ProjectJSONData , tiene el tipo openToCollab como string
Este
projectTitle: {Project.projectTitle} no es una sintaxis javascript o mecanografiada válida. Los { } no hacen lo que crees que hacen.
Tu quieres esto:
const handleCardClick = (Project: ProjectJSONData) => { setSelectedProject({ projectTitle: Project.projectTitle, thumbnail: Project.ProjectThumbnail, userName: Project.username, profileImage: Project.userProfileImage, openToCollab: Project.openToCollab, tags: Project.tags, }) }; Además, openToCollab es string en un tipo y boolean en el otro.
Y, por último, usa Project.projectThumbnail pero el tipo tiene lo declarado con una P mayúscula, por lo que debe usar Project.ProjectThumbnail .
Con esos cambios, todo funciona bien.