TypeScript con React
Tipi per props, state, events, generics, tipo FC, tipo children, tipizzazione degli hooks
1Qual è la sintassi corretta per tipizzare le props di un componente React?
Qual è la sintassi corretta per tipizzare le props di un componente React?
Risposta
L'interfaccia Props seguita dalla tipizzazione della funzione con Props come parametro è la sintassi standard raccomandata. Questo approccio offre un'eccellente inferenza dei tipi e permette di riutilizzare facilmente il tipo Props altrove nel codice. È più esplicita di React.FC e permette un migliore controllo sulla tipizzazione dei children.
2Come tipizzare correttamente uno state semplice con useState?
Come tipizzare correttamente uno state semplice con useState?
Risposta
TypeScript deduce automaticamente il tipo dello state dal valore iniziale passato a useState. Per un valore semplice come una stringa, non è necessario specificare esplicitamente il tipo generico. L'inferenza automatica è sufficiente e rende il codice più conciso. La tipizzazione esplicita diventa utile solo per le union o quando il valore iniziale è null.
3Qual è il tipo corretto per un evento onClick su un pulsante?
Qual è il tipo corretto per un evento onClick su un pulsante?
Risposta
React.MouseEvent<HTMLButtonElement> è il tipo specifico per gli eventi di clic su un pulsante. Il parametro generico HTMLButtonElement specifica l'elemento DOM coinvolto, consentendo l'accesso alle proprietà specifiche del pulsante tramite event.currentTarget. L'uso di MouseEvent del DOM nativo o di un tipo troppo generico farebbe perdere questa precisione di tipizzazione.
Quale tipo usare per tipizzare i children di un componente wrapper?
Qual è la differenza principale tra React.FC e la tipizzazione diretta?
+17 domande da colloquio
Altri argomenti di colloquio React / Next.js
Fondamenti di JavaScript
Fondamenti di React
React Hooks
Ciclo di vita dei componenti
React Router
Gestione dello state con Context
Form e Controlled Components
Recupero dati e API
React Query (TanStack Query)
Styling & CSS-in-JS
Fondamentali di Next.js
Data Fetching in Next.js
Server Actions di Next.js
Routing e Navigazione in Next.js
API Routes di Next.js
Metadata & SEO in Next.js
Middleware e Auth in Next.js
Testing React
Zustand State Management
Ottimizzazione delle Performance React
Error Boundaries & Error Handling
Advanced React Patterns
Funzionalità avanzate di Next.js
Deploy e Produzione con Next.js
Architecture & Design Patterns
React Server Components
Internazionalizzazione di Next.js
React Sicurezza & Best Practices
Padroneggia React / Next.js per il tuo prossimo colloquio
Accedi a tutte le domande, flashcards, test tecnici, esercizi di code review e simulatori di colloquio.
Inizia gratis