TypeScript con React
Tipos para props, state, events, generics, FC type, children type, tipado de hooks
1¿Cuál es la sintaxis correcta para tipar las props de un componente React?
¿Cuál es la sintaxis correcta para tipar las props de un componente React?
Respuesta
La interfaz Props seguida del tipado de la función con Props como parámetro es la sintaxis estándar recomendada. Este enfoque ofrece una excelente inferencia de tipos y permite reutilizar fácilmente el tipo Props en otras partes del código. Es más explícito que React.FC y permite un mejor control del tipado de children.
2¿Cómo tipar correctamente un state simple con useState?
¿Cómo tipar correctamente un state simple con useState?
Respuesta
TypeScript infiere automáticamente el tipo del state a partir del valor inicial pasado a useState. Para un valor simple como un string, no es necesario especificar explícitamente el tipo genérico. La inferencia automática es suficiente y hace el código más conciso. El tipado explícito solo es útil para uniones o cuando el valor inicial es null.
3¿Cuál es el tipo correcto para un evento onClick en un botón?
¿Cuál es el tipo correcto para un evento onClick en un botón?
Respuesta
React.MouseEvent<HTMLButtonElement> es el tipo específico para eventos de clic en un botón. El parámetro genérico HTMLButtonElement especifica el elemento DOM involucrado, lo que permite acceder a las propiedades específicas del botón a través de event.currentTarget. Usar MouseEvent del DOM nativo o un tipo demasiado genérico haría perder esta precisión de tipado.
¿Qué tipo usar para tipar los children de un componente wrapper?
¿Cuál es la diferencia principal entre React.FC y el tipado directo?
+17 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Formularios y Controlled Components
Obtención de datos y API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos de Next.js
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Metadata & SEO en Next.js
Middleware y Auth en Next.js
Testing en React
Zustand State Management
Optimización de Rendimiento en React
Error Boundaries & Error Handling
Advanced React Patterns
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
Internacionalización de Next.js
React Security & Buenas Prácticas
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis