Un aide-mémoire consultable des types React TypeScript : props, children, useState, événements, refs, contexte, reducers et composants génériques, chacun avec du code à copier.
Avec React et TypeScript, vous typez surtout les props d'un composant, et l'inférence s'occupe du reste. Décrivez les props avec une interface, utilisez React.ReactNode pour children, passez un argument de type à useState quand la valeur initiale est trop restrictive, et choisissez des types d'événements comme React.ChangeEvent<HTMLInputElement> pour les handlers. Les fichiers contenant du JSX utilisent l'extension .tsx.
Les types les plus utilisés
Cherchez dans l'aide-mémoire ce que vous essayez de typer, comme un handler de clic ou une ref, et copiez la ligne. Des exemples détaillés plus longs pour le contexte, les reducers et les composants génériques suivent.
Ajoutez children: React.ReactNode à l'interface des props. ReactNode couvre les chaînes, les nombres, les éléments, les tableaux et null. N'utilisez React.ReactElement que lorsque le composant doit recevoir un seul élément JSX.
Un tableau vide ne donne au vérificateur rien à inférer. Passez le type des éléments : useState<string[]>([]). Il en va de même pour les valeurs initiales null, comme dans useState<User | null>(null).
Appelez useRef<HTMLInputElement>(null) et attachez-la avec ref={inputRef}. Lisez inputRef.current avec une vérification de null, car la valeur est null jusqu'à ce que React monte l'élément, et de nouveau après son démontage.
La documentation actuelle de React montre un composant fonction qui reçoit ref comme une prop ordinaire et la place sur l'élément interne. Typez cette prop en React.Ref<HTMLInputElement>. Le code plus ancien enveloppe plutôt le composant dans forwardRef.
Quand il n'existe pas de valeur par défaut sensée, utilisez createContext<Value | null>(null) et enveloppez useContext dans un petit hook qui lève une erreur si la valeur est null. Chaque consommateur obtient alors un type non null et une erreur claire si un provider manque.
Les props facultatives reçoivent des valeurs par défaut dans la signature, children accepte tout ce qui peut être rendu.
Le hook lève une erreur claire hors du provider et renvoie une valeur non null à l'intérieur.
Dans chaque case, l'action est affinée, donc action.item n'existe que là où il doit exister.
T est fixé par les éléments que passe l'appelant, donc renderItem reçoit le bon type.
Le parent crée la ref, l'enfant la place sur le vrai champ.
Props
Objet de props
Props
Children de tout type
Props
Un seul élément comme enfant
Props
Variante limitée à quelques valeurs
Props
Transmettre les props natives d'un bouton
Props
Prop style
Props
Prop de callback
State
State numérique (inféré)
State
State pouvant être null
State
State tableau vide
State
Union de statuts
State
Setter passé en prop
Events
Changement d'un champ texte
Events
Changement d'un select
Events
Clic sur un bouton
Events
Soumission de formulaire
Events
Appui sur une touche
Events
Type du handler entier
Refs
Ref vers un élément du DOM
Refs
Ref contenant un identifiant de timer
Refs
Ref reçue en prop
Context
Contexte sans valeur par défaut
Reducer
Union d'actions
Tout
Props
State
Événements
Refs
Contexte
Reducer
Rechercher dans l'aide-mémoire
event, ref, children...
Filtrer par groupe
Copier
{n} lignes affichées sur {v}
Aucune ligne ne correspond. Essayez un mot plus court.
Commencer gratuitement · Sans carte bancaire