React con TypeScript: i tipi che ti servono davvero

React con TypeScript

React con TypeScript: props, state, eventi, ref, context | We.Inc

Un cheat sheet consultabile dei tipi di React TypeScript: props, children, useState, eventi, ref, context, reducer e componenti generici, ognuno con codice da copiare.

In React con TypeScript tipizzi soprattutto le props di un componente, e l'inferenza si occupa del resto. Descrivi le props con un'interface, usa React.ReactNode per i children, passa un argomento di tipo a useState quando il valore iniziale è troppo ristretto e scegli tipi di evento come React.ChangeEvent<HTMLInputElement> per gli handler. I file con JSX usano l'estensione .tsx.

I tipi più usati

Cosa tipizzare
Tipo

Qualsiasi cosa renderizzabile come children
React.ReactNode

Esattamente un elemento JSX
React.ReactElement

Handler di modifica di un input
React.ChangeEvent<HTMLInputElement>

Handler di clic su un pulsante
React.MouseEvent<HTMLButtonElement>

Handler di invio di un form
React.FormEvent<HTMLFormElement>

Prop di stile inline
React.CSSProperties

Tutte le props di un elemento nativo
React.ComponentProps<"button">

Cerca nel cheat sheet la cosa che vuoi tipizzare, per esempio un handler di clic o un ref, e copia la riga. Più sotto trovi esempi completi e più lunghi per context, reducer e componenti generici.

Scrivi una parola come event, ref o children nella casella di ricerca.
Restringi per gruppo se l'elenco è lungo.
Copia lo snippet accanto alla riga corrispondente.
Leggi gli esempi completi qui sotto per i pattern che richiedono più di una riga.

Lascia lavorare l'inferenza. useState(0) è già un number; aggiungi un argomento di tipo solo per union, valori nullable o array vuoti.
Non annotare i componenti come React.FC per abitudine. Una semplice funzione con props tipizzate è più corta e gestisce i children in modo esplicito.
Passa il mouse su un attributo come onChange nel tuo editor per vedere il tipo di evento esatto che React si aspetta, poi copialo nel tuo handler.
Installa @types/react e @types/react-dom come dipendenze di sviluppo; framework come Next.js li aggiungono per te.

Domande frequenti

Come tipizzo i children?

Aggiungi children: React.ReactNode all'interface delle props. ReactNode copre stringhe, numeri, elementi, array e null. Usa React.ReactElement solo quando il componente deve ricevere un singolo elemento JSX.

Perché il mio valore di useState è tipizzato come never[]?

Un array vuoto non dà al type checker nulla da cui dedurre il tipo. Passa il tipo degli elementi: useState<string[]>([]). Lo stesso vale per i valori iniziali null, come in useState<User | null>(null).

Come tipizzo un ref a un elemento del DOM?

Chiama useRef<HTMLInputElement>(null) e collegalo con ref={inputRef}. Leggi inputRef.current con un controllo su null, perché vale null finché React non monta l'elemento e di nuovo dopo lo smontaggio.

Come passo un ref al mio componente?

La documentazione attuale di React mostra un function component che riceve ref come una normale prop e lo applica all'elemento interno. Tipizza quella prop come React.Ref<HTMLInputElement>. Il codice più vecchio invece avvolge il componente in forwardRef.

Quale valore predefinito dare a createContext?

Quando non esiste un valore predefinito sensato, usa createContext<Value | null>(null) e avvolgi useContext in un piccolo hook che lancia un errore se il valore è null. Così ogni consumer ottiene un tipo non null e un errore chiaro se manca un provider.

Prima le props, il resto viene da sé

La maggior parte degli errori di tipo in un codebase React nasce al confine di un componente. Scrivi un'interface per le props, destrutturale nella firma e il type checker validerà ogni punto in cui il componente viene usato.
Le props facoltative hanno un punto interrogativo e di solito un valore predefinito nella destrutturazione, come size = "md". Le props union come variant: "primary" | "ghost" ti danno l'autocompletamento e rifiutano gli errori di battitura.

Eventi e form

Ogni handler riceve un evento sintetico di React tipizzato in base all'elemento da cui proviene. Usa event.currentTarget per leggere l'elemento a cui è collegato l'handler; il suo tipo deriva dall'argomento generico.
Se preferisci tipizzare l'intero handler, React esporta anche i tipi degli handler, per esempio React.ChangeEventHandler<HTMLInputElement>.

Componenti generici

Una lista o una select che funziona con qualsiasi tipo di elemento può accettare un parametro di tipo. I dati del chiamante fissano il tipo, e le render prop ricevono elementi tipizzati correttamente senza cast.

Esempi completi

Un componente con props e children tipizzati

Le props facoltative hanno valori predefiniti nella firma; children accetta qualsiasi cosa renderizzabile.

Context con un hook sicuro

L'hook lancia un errore chiaro fuori dal provider e restituisce un valore non null al suo interno.

useReducer con una discriminated union

Dentro ogni case l'azione viene ristretta, quindi action.item esiste solo dove deve esistere.

Un componente lista generico

T è fissato dagli elementi che passa il chiamante, quindi renderItem riceve il tipo giusto.

Mettere a fuoco un input tramite una prop ref

Il genitore crea il ref; il figlio lo applica all'input vero e proprio.

Props

Oggetto delle props

Props

Children di qualsiasi tipo

Props

Un solo elemento come figlio

Props

Variante limitata a pochi valori

Props

Inoltrare le props native del pulsante

Props

Prop di stile

Props

Prop di callback

State

State numerico (dedotto)

State

State che può essere null

State

State con array vuoto

State

Union di stati

State

Setter passato come prop

Events

Modifica di un input di testo

Events

Modifica di una select

Events

Clic su un pulsante

Events

Invio di un form

Events

Pressione di un tasto

Events

Tipo dell'intero handler

Refs

Ref a un elemento del DOM

Refs

Ref che contiene l'id di un timer

Refs

Ref ricevuto come prop

Context

Context senza valore predefinito

Reducer

Union di azioni

Tutti

Props

State

Eventi

Ref

Context

Reducer

Cheat sheet React TypeScript

Cerca nel cheat sheet

event, ref, children...

Filtra per gruppo

Copia

{n} di {v} righe mostrate

Nessuna riga corrisponde. Prova una parola più corta.

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito