Utiliser TypeScript

TypeScript est une méthode populaire pour ajouter des définitions de types aux bases de code JavaScript. Nativement, TypeScriptprend en charge le JSXet vous pouvez obtenir une prise en charge complète de React Web en ajoutant@types/reactet@types/react-domà votre projet.

Installation

Tous lesframeworks React de qualité productionoffrent une prise en charge pour l'utilisation de TypeScript. Suivez le guide spécifique au framework pour l'installation :

• Next.js
• Remix
• Gatsby
• Expo

Ajouter TypeScript à un projet React existant

Pour installer la dernière version des définitions de types de React :

npm install --save-dev @types/react @types/react-dom

Les options de compilation suivantes doivent être définies dans votretsconfig.json:

1. domdoit être inclus danslib(Remarque : si aucune optionlibn'est spécifiée,domest inclus par défaut).
2. jsxdoit être défini sur l'une des options valides.preservedevrait suffire pour la plupart des applications.documentation jsxpour savoir quelle valeur choisir.

TypeScript avec les composants React

Écrire du TypeScript avec React est très similaire à écrire du JavaScript avec React. La principale différence lors du travail avec un composant est que vous pouvez fournir des types pour les props de votre composant. Ces types peuvent être utilisés pour la vérification de la correction et pour fournir une documentation en ligne dans les éditeurs.

En prenant lecomposant MyButtondu guideDémarrage rapide, nous pouvons ajouter un type décrivant letitledu bouton :

Cette syntaxe en ligne est la manière la plus simple de fournir des types pour un composant, bien qu'elle puisse devenir lourde une fois que vous commencez à avoir plusieurs champs à décrire. Au lieu de cela, vous pouvez utiliser uneinterfaceou untypepour décrire les props du composant :

Le type décrivant les props de votre composant peut être aussi simple ou complexe que nécessaire, bien qu'il doive s'agir d'un type objet décrit avec soittypesoitinterface. Vous pouvez apprendre comment TypeScript décrit les objets dansTypes Objets, mais vous pourriez aussi être intéressé par l'utilisation desTypes Unionpour décrire une prop qui peut être l'un de plusieurs types différents, et le guideCréation de Types à partir de Typespour des cas d'utilisation plus avancés.

Exemples de Hooks

Les définitions de types de@types/reactincluent des types pour les Hooks intégrés, vous pouvez donc les utiliser dans vos composants sans configuration supplémentaire. Ils sont conçus pour prendre en compte le code que vous écrivez dans votre composant, donc vous obtiendrez destypes inférésla plupart du temps et idéalement, vous n'aurez pas besoin de gérer les détails de fourniture des types.

Cependant, nous pouvons examiner quelques exemples de comment fournir des types pour les Hooks.

useState

LeHook useStateréutilisera la valeur passée comme état initial pour déterminer le type de la valeur. Par exemple :

Cela attribuera le typeboolean à enabled, etsetEnabledsera une fonction acceptant soit un argumentboolean, soit une fonction qui retourne unboolean. Si vous souhaitez fournir explicitement un type pour l'état, vous pouvez le faire en fournissant un argument de type à l'appel deuseState :

Ce n'est pas très utile dans ce cas, mais un cas courant où vous pourriez vouloir fournir un type est lorsque vous avez un type union. Par exemple,statusici peut être l'une de plusieurs chaînes de caractères différentes :

Ou, comme recommandé dans lesPrincipes pour structurer l'état, vous pouvez regrouper l'état lié dans un objet et décrire les différentes possibilités via des types objet :

useReducer

LeHook useReducerest un Hook plus complexe qui prend une fonction réductrice et un état initial. Les types pour la fonction réductrice sont inférés à partir de l'état initial. Vous pouvez éventuellement fournir un argument de type à l'appel deuseReducerpour fournir un type pour l'état, mais il est souvent préférable de définir le type sur l'état initial à la place :

Nous utilisons TypeScript à quelques endroits clés :

• interface Statedécrit la forme de l'état du réducteur.
• type CounterActiondécrit les différentes actions qui peuvent être dispatchées vers le réducteur.
• const initialState: Statefournit un type pour l'état initial, et aussi le type qui est utilisé paruseReducerpar défaut.
• stateReducer(state: State, action: CounterAction): Statedéfinit les types pour les arguments et la valeur de retour de la fonction réductrice.

Une alternative plus explicite à la définition du type surinitialStateest de fournir un argument de type àuseReducer:

useContext

LeHook useContextest une technique pour transmettre des données dans l'arborescence des composants sans avoir à passer des props à travers les composants. Il est utilisé en créant un composant fournisseur et souvent en créant un Hook pour consommer la valeur dans un composant enfant.

Le type de la valeur fournie par le contexte est inféré à partir de la valeur passée à l'appel decreateContext :

Cette technique fonctionne lorsque vous avez une valeur par défaut qui a du sens - mais il y a parfois des cas où vous n'en avez pas, et dans ces cas,nullpeut sembler raisonnable comme valeur par défaut. Cependant, pour permettre au système de types de comprendre votre code, vous devez explicitement définirContextShape | nullsur lecreateContext.

Cela entraîne le problème que vous devez éliminer le| nulldans le type pour les consommateurs du contexte. Notre recommandation est que le Hook effectue une vérification à l'exécution de son existence et lance une erreur lorsqu'il n'est pas présent :

useMemo

LeHook useMemova créer/réaccéder à une valeur mémorisée à partir d'un appel de fonction, en réexécutant la fonction uniquement lorsque les dépendances passées en second paramètre changent. Le résultat de l'appel du Hook est inféré à partir de la valeur de retour de la fonction dans le premier paramètre. Vous pouvez être plus explicite en fournissant un argument de type au Hook.

useCallback

LeHook useCallbackfournit une référence stable à une fonction tant que les dépendances passées dans le second paramètre sont les mêmes. CommeuseMemo, le type de la fonction est inféré à partir de la valeur de retour de la fonction dans le premier paramètre, et vous pouvez être plus explicite en fournissant un argument de type au Hook.

Lorsque vous travaillez en mode strict de TypeScript,useCallbacknécessite d'ajouter des types pour les paramètres de votre rappel. En effet, le type du rappel est inféré à partir de la valeur de retour de la fonction, et sans paramètres, le type ne peut pas être entièrement compris.

Selon vos préférences de style de code, vous pourriez utiliser les fonctions*EventHandlerdes types React pour fournir le type du gestionnaire d'événements en même temps que la définition du rappel :

Types utiles

Il existe un ensemble assez vaste de types qui proviennent du paquet@types/react, il vaut la peine d’y jeter un œil lorsque vous vous sentez à l’aise avec l’interaction entre React et TypeScript. Vous pouvez les trouverdans le dossier React de DefinitelyTyped. Nous allons couvrir ici quelques-uns des types les plus courants.

Événements DOM

Lorsque vous travaillez avec des événements DOM dans React, le type de l’événement peut souvent être inféré à partir du gestionnaire d’événements. Cependant, lorsque vous souhaitez extraire une fonction pour la passer à un gestionnaire d’événements, vous devrez définir explicitement le type de l’événement.

Il existe de nombreux types d’événements fournis dans les types React – la liste complète peut être trouvéeiciet elle est basée sur lesévénements les plus populaires du DOM.

Pour déterminer le type que vous recherchez, vous pouvez d’abord consulter les informations de survol du gestionnaire d’événements que vous utilisez, qui afficheront le type de l’événement.

Si vous avez besoin d’utiliser un événement qui n’est pas inclus dans cette liste, vous pouvez utiliser le typeReact.SyntheticEvent, qui est le type de base pour tous les événements.

Enfants (Children)

Il existe deux approches courantes pour décrire les enfants d’un composant. La première consiste à utiliser le typeReact.ReactNode, qui est une union de tous les types possibles pouvant être passés comme enfants en JSX :

C’est une définition très large des enfants. La seconde consiste à utiliser le typeReact.ReactElement, qui ne concerne que les éléments JSX et non les primitives JavaScript comme les chaînes de caractères ou les nombres :

Notez que vous ne pouvez pas utiliser TypeScript pour décrire que les enfants sont un certain type d’éléments JSX, vous ne pouvez donc pas utiliser le système de types pour décrire un composant qui n’accepte que des enfants<li>.

Vous pouvez voir un exemple des deux typesReact.ReactNodeetReact.ReactElementavec le vérificateur de types danscette aire de jeux TypeScript.

Props de style

Lorsque vous utilisez des styles en ligne dans React, vous pouvez utiliserReact.CSSPropertiespour décrire l’objet passé à la propstyle. Ce type est une union de toutes les propriétés CSS possibles, et c’est un bon moyen de vous assurer que vous passez des propriétés CSS valides à la propstyle, et d’obtenir de l’auto-complétion dans votre éditeur.

Pour aller plus loin

Les pages de documentation individuelles des API peuvent contenir une documentation plus approfondie sur la façon de les utiliser avec TypeScript.

Nous recommandons les ressources suivantes :

• Le manuel TypeScriptest la documentation officielle de TypeScript et couvre la plupart des fonctionnalités clés du langage.
• Les notes de version de TypeScriptdétaillent en profondeur les nouvelles fonctionnalités.
• React TypeScript Cheatsheetest un aide-mémoire maintenu par la communauté pour utiliser TypeScript avec React, couvrant de nombreux cas limites utiles et offrant une plus grande étendue que ce document.
• TypeScript Community Discordest un excellent endroit pour poser des questions et obtenir de l'aide sur les problèmes liés à TypeScript et React.