Cómo hacer este jsx en mecanografiado. En javascript, se ve así. ¡Pero en mecanografiado, no sé cómo lograr este código exacto!
const Users = ({details,deleteUser}) => { return ( <> <div> {details.map(detail => ( <tr key={detail.del}> <td>{detail.del}</td> <td>{detail.name}</td> <td>{detail.email}</td> <td>{detail.pass}</td> <td>{detail.contact}</td> <td className='delete-btn' onClick={() => deleteUser(detail.del)}> Delete </td> </tr> ))} </div> </> )}Como primero, debe definir su tipo de accesorios:
type User = { del: string; name: string; email: string; pass: string; contact: string; }; type UsersProps = { details: User[]; deleteUser: (del: string) => void; };Después de esto, debe aplicar el tipo a los accesorios del componente:
const Users = (props: UsersProps) => { const {details,deleteUser} = props; return ( <> <div> {details.map(detail => ( <tr key={detail.del}> <td>{detail.del}</td> <td>{detail.name}</td> <td>{detail.email}</td> <td>{detail.pass}</td> <td>{detail.contact}</td> <td className='delete-btn' onClick={() => deleteUser(detail.del)}> Delete </td> </tr> ))} </div> </> ) }; De esta manera, TypeScript le mostrará cualquier error tipográfico, por ejemplo, si escribe detail.mail en lugar de detail.email , ts lo resaltará.
Al principio, necesita la interfaz del Usuario en mecanografiado.
export default interface IUser { id: number, name: string, image: string, ...others }Luego, debe definir los parámetros pasados, debería verse como la interfaz de usuario. Así será el código.
{details<IUser[]>.map(detail => ( <tr key={detail.del}> <td>{detail.del}</td> <td>{detail.name}</td> <td>{detail.email}</td> <td>{detail.pass}</td> <td>{detail.contact}</td> </tr> ))}