TypeScript avec React
Types pour props, state, events, generics, FC type, children type, hooks typing
1Quelle est la syntaxe correcte pour typer les props d'un composant React ?
Quelle est la syntaxe correcte pour typer les props d'un composant React ?
Réponse
L'interface Props suivie du typage de la fonction avec Props en paramètre est la syntaxe standard recommandée. Cette approche offre une excellente inférence de type et permet de réutiliser facilement le type Props ailleurs dans le code. Elle est plus explicite que React.FC et permet de mieux contrôler le typage des children.
2Comment typer correctement un state simple avec useState ?
Comment typer correctement un state simple avec useState ?
Réponse
TypeScript infère automatiquement le type du state à partir de la valeur initiale passée à useState. Pour une valeur simple comme un string, il n'est pas nécessaire de spécifier explicitement le type générique. L'inférence automatique est suffisante et rend le code plus concis. Le typage explicite devient utile uniquement pour les unions ou quand la valeur initiale est null.
3Quel est le type correct pour un événement onClick sur un bouton ?
Quel est le type correct pour un événement onClick sur un bouton ?
Réponse
React.MouseEvent<HTMLButtonElement> est le type spécifique pour les événements de clic sur un bouton. Le paramètre générique HTMLButtonElement précise l'élément DOM concerné, ce qui permet d'accéder aux propriétés spécifiques du bouton via event.currentTarget. Utiliser MouseEvent du DOM natif ou un type trop générique ferait perdre cette précision de typage.
Quel type utiliser pour typer les children d'un composant wrapper ?
Quelle est la différence principale entre React.FC et le typage direct ?
+17 questions d'entretien
Autres sujets d'entretien React / Next.js
Les bases de JavaScript
Fondamentaux React
React Hooks
Cycle de vie des composants
React Router
Gestion d'état avec Context
Formulaires & Composants contrôlés
Fetching de données & API
React Query (TanStack Query)
Styling & CSS-in-JS
Fondamentaux Next.js
Data Fetching Next.js
Server Actions Next.js
Routing & Navigation Next.js
API Routes Next.js
Metadata & SEO Next.js
Middleware & Auth Next.js
Testing React
Zustand State Management
Optimisation Performance React
Error Boundaries & Error Handling
Advanced React Patterns
Fonctionnalités avancées Next.js
Déploiement & Production Next.js
Architecture & Design Patterns
React Server Components
Internationalisation Next.js
Sécurité & Best Practices React
Maîtrise React / Next.js pour ton prochain entretien
Accède à toutes les questions, flashcards, tests techniques, exercices de code review et simulateurs d'entretien.
Commencer gratuitement