Note de l'éditeur:Ce guide pour utiliser TypeScript avec React a été mis à jour pour la dernière fois le 2 août 2022 pour inclure un aperçu des avantages de TypeScript lorsqu'il est combiné avec React et des informations sur les fichiers .TSX.

Dans ce tutoriel, vous apprendrez tout ce que vous devez savoir sur l'utilisation de TypeScript dans vos projets React.Vous apprendrez également pourquoi vous devriez utiliser TypeScript dans React, comment installer et configurer TypeScript, et comment utiliser les interfaces TypeScript avec les composants React.

Nous couvrirons ce qui suit avec des exemples:

• Qu'est-ce que React?
• Qu'est-ce que TypeScript?
  • Un sur-ensemble de javascript
• React est-il meilleur avec TypeScript?
  • Vérification des variables et des bogues
  • Code lisible, facilement compréhensible
  • Interfaces
  • Meilleur support pour JSX
  • Support IDE
  • Prise en charge des projets React existants
  • Communauté
• Comprendre les fichiers .tsx dans TypeScript
  • Différence entre .ts et .tsx en dactylographie
• Installation et configuration de TypeScript
• Comment TypeScript Compile React Code?
• Configuration de WebPack pour React et TypeScript
• Ajout de scripts NPM
• Création du fichier index.tsx
• Création de composants React dans TypeScript
• Utilisation d'interfaces de typeScript avec des composants React

Qu'est-ce que React?

Créée par Facebook et à l'origine ouverte en 2013, React est devenu l'une des bibliothèques les plus populaires du Frontend World aujourd'hui.React est facilement extensible et peut inclure des fonctionnalités telles que le routage et les modèles de gestion de l'État avec des bibliothèques commeRedux.React est minime dans son empreinte mais peut être personnalisé pour presque tous les projets.

Pour en savoir plus sur React à un niveau élevé, consultez l'officielRéagir la documentation.

Qu'est-ce que TypeScript?

Manuscritest un langage de programmation gratuit et open source développé et entretenu par Microsoft.Il s'agit d'un sur-ensemble strict de JavaScript qui ajoute un typage statique en option et une programmation orientée objet basée sur les classes à la langue.

Un sur-ensemble de javascript

JavaScript a été initialement créé comme un langage côté client, mais au fil du temps, les développeurs ont compris que JavaScript pouvait être utilisé sur le serveur, en particulier avec l'invention du moteur V8.

JavaScript peut rapidement devenir complexe et ne peut parfois pas être à la hauteur du plein potentiel d'un langage de programmation orienté objet.TypeScript est né pour combler cet écart et pour devenir une alternative pour le développement au niveau de l'entreprise.

TypeScript émet JavaScript lorsqu'il est compilé et est un nom populaire dans le monde JavaScript aujourd'hui.Même les applications JavaScript pures expédient untype.d.tsDéfinition de type pour les développeurs TypeScript.

React est-il meilleur avec TypeScript?

TypeScript peut être utile pour réagir les développeurs à bien des égards.Vous trouverez ci-dessous quelques avantages de l'utilisation de TypeScript dans React:

Vérification des variables et des bogues

TypeScript propose des vérifications de variables en vérifiant le type de données attribué à des variables définies statiquement.Cet global réduit la possibilité d'attribuer les mauvais types à nos variables.

TypeScript effectue également des vérifications de temps de compilation qui aident à signaler les erreurs telles que les affectations de paramètres erronées, les erreurs de syntaxe et bien plus encore.C'est génial car cela réduit la probabilité d'appeler la mauvaise fonction ou de sauter accidentellement une déclaration variable.

Code lisible, facilement compréhensible

La clé de TypeScript est qu'il s'agit d'un script de type statique.Les langages de programmation peuvent être statiques ou dynamiquement typés - la différence est lorsque la vérification du type se produit.Les variables de langue statique sont vérifiées par type.

Interfaces

TypeScript vous permet de définir des définitions de type complexe sous forme d'interfaces.Ceci est utile lorsque vous avez un type complexe que vous souhaitez utiliser dans votre application, comme un objet qui contient d'autres propriétés.Il en résulte des vérifications strictes, ce qui réduit le nombre de bogues possibles que vous pouvez produire sans lui.

Meilleur support pour JSX

JSX signifie JavaScript XML.Il nous permet d'écrire du code HTML directement dans notre projet React.L'utilisation de TypeScript avec React fournit une meilleure intelligence et une complétion de code pour JSX.

Support IDE

TypeScript est également très utile lors de l'utilisation d'ides comme Visual Studio, Visual Studio Code, Atom, WebStorm, Eclipse et bien d'autres.Ceux-ci offrent une meilleure génération d'assiette et d'extraits d'auto, ce qui facilite le développement.

Prise en charge des projets React existants

TypeScript vous permet d'adapter progressivement son utilisation dans vos projets existants.Vous pouvez également configurer le compilateur TypeScript pour ce cas d'utilisation.Trouvez une liste de compilateurs de typeScript dans le fonctionnaireDocumentation dactylographiée.

Communauté

Enfin, TypeScript est un langage open source soutenu par Microsoft.Il est largement aimé et utilisé par des millions de développeurs dans le monde.Parce qu'il est si largement utilisé, il est facile de trouver un support et des réponses à vos questions si vous êtes coincé lors de l'apprentissage ou de l'utilisation de TypeScript.

Compréhension.tsxFichiers dans TypeScript

L'introduction de.tsxdans TypeScript est venu plusieurs versions après TypeScript v1.0.Selon les notes de publication de TypeScript v1.6 où.tsxL'extension a été introduite, la nouvelle extension a été conçue pour faire deux choses:

• Activer JSX à l'intérieur des fichiers TypeScript
• Faire le nouveaucommeopérateur la façon par défaut de lancer

L'introduction de.tsxa également abouti à trois choses supplémentaires:

• Les bundlers JavaScript comme WebPack, Esbuild et d'autres peuvent exécuter différents plugins pour.tsxdes dossiers
• Les coureurs de test comme Jest ne peuvent exécuter un environnement de test différent uniquement pour.tsxdes dossiers
• Nouvelle prise en charge linguistique par les éditeurs de code

Différence entre.tset.tsxen dactylographie

L'introduction de.tsxL'extension du fichier a provoqué la nécessité de clarification.De nombreux développeurs voulaient connaître la différence entre la nouvelle extension de fichier et la.ts.

La différence est en fait assez simple!Le.tsL'extension de fichier est utilisée lorsque vous créez des fonctions, des classes, des réducteurs, etc. qui ne nécessitent pas l'utilisation de la syntaxe et des éléments JSX, tandis que le.tsxL'extension de fichier est utilisée lorsque vous créez un composant React et utilisez des éléments JSX et une syntaxe.

Installation et configuration de TypeScript

Maintenant que nous avons passé en revue un aperçu général, passons à l'installation.Il y a deux façons d'installer et de commencer avec TypeScript

• En utilisantNPM
• En utilisantcreate-react-app

Pour installer TypeScript en utilisantNPM, exécutez ce qui suit dans votre terminal:

NPM Install -g TypeScript

Parce que nous avons installé TypeScript à l'échelle mondiale, nous devons le lier afin queNPMconnaît l'emplacement.

Pour ce faire, nous courons:

lien npm TypeScript

Une fois le NPM terminé, vous pouvez vérifier que TypeScript est installé correctement:

TSC --v // version 4.7.4

Ce qui précède imprimera le numéro de version de TypeScript installé.

Pour commencer avec un projet après une installation réussie, créez un dossier qui conservera l'application.

Créer un nouveau répertoire:

MKDIR TypeScript-React-Project

Changer le répertoire dans le nouveau dossier:

> CD TypeScript-react-project

Initier le projet:

npm init

Pour installer TypeScript aveccreate-react-app, exécutez la ligne unique suivante dans votre terminal:

NPX CREATE-REACT-APP.

La commande ci-dessus créera une structure de dossiers simple pour votre application, puis installera tous les modules nécessaires et mettra votre projet opérationnel pour vous.

Pour ce tutoriel, nous utiliserons lenpm initméthode.

Comment TypeScript Compile React Code?

TypeScript vérifie toujours un fichier appelétsconfig.jsonDans le dossier racine du projet pour les instructions.Quand il trouve letsconfig.jsonFichier, il charge les paramètres définis dans le fichier et les utilise pour construire le projet.

Un projet TypeScript est compilé de l'une des manières suivantes:

• En invoquantTSCsans fichiers d'entrée, auquel cas le compilateur recherche letsconfig.jsonFichier commençant dans le répertoire actuel et poursuivant la chaîne du répertoire parent
• En invoquantTSCsans fichiers d'entrée et un--projet(ou juste-p) Option de ligne de commande qui spécifie le chemin d'accès d'un répertoire contenant untsconfig.jsonfichier, ou un chemin vers un.jsonfichier contenant les configurations

Lorsque les fichiers d'entrée sont spécifiés sur la ligne de commande,tsconfig.jsonLes fichiers sont ignorés.

Si vous n'avez pas letsconfig.jsonFichier dans votre dossier racine, allez-y pour le créer et ajoutez le code suivant:

?: vrai, "modularesolution": "nœud",}}

La configuration JSON ci-dessus définit deux sections principales: lecompilleroptionsetexclureparamètres.

Dans les options du compilateur, une cible deES6a été mis en.Cela signifie que la cible de moteur JavaScript sera définie surES6mais compilera àChaleurcomme cible.Notez qu'il y a aussi une clé appeléeJSX, qui est défini surréagir.Cela indique à TypeScript de compiler les fichiers JSX en tant que fichiers React.Ceci est similaire à la courseTSC  --jsx réagir. Leest une sortieest le dossier de sortie après compilation.

Dans leexclurebloc,node_modulesest défini pour cela.TypeScript ne scannera pas lenode_modulesdossier pour tout fichier de type dactylographié lors de la compilation.

Si vous connaissez TypeScript et sa configuration, vous vous demandez peut-être pourquoiinclurela section est manquante.C'est parce que nous allons configurerwebpackPour gérer la prise des fichiers d'entrée, les transmettre à TypeScript pour la compilation et le retour d'un script JavaScript groupé pour les navigateurs.

Vous pouvez en savoir plus sur d'autres options de configuration dans leDocs dactylographiés.

Configuration de WebPack pour React et TypeScript

webpackest un outil qui vous permet de compiler les modules JavaScript et est également connu sous le nom de Bundler de module.

Pour commencer avecwebpack dans TypeScript, nous devons installer webpack et un plugin webpack appeléts-chargeur.Pour ce faire, exécutez la commande suivante dans le terminal:

NPM Installer WebPack WebPack-Cli TS-chargedeur

Qu'est-ce quets-chargeur?Comme son nom l'indique,ts-chargeurest le chargeur TypeScript pour WebPack.En termes simples, c'est un plugin qui aide WebPack à bien fonctionner avec TypeScript.

Tout comme TypeScript, WebPack vérifie également un fichier appeléwebpack.config.jspour la configuration.

S'il n'existe pas déjà, créez un nouveau fichier appeléwebpack.config.jset ajouter le code suivant:

const path = require ('path'); module.exports = {entrée: './src/index.tsx', module: {règles: [{test: /\.tsx?$/, use: 'ts-chargeher', exclure: / node_modules /,},],}, résoudre: {extensions: [' .tsx ',' .ts ',' .js '],}, output: {filename:' bundle.js ', path: path.resolve (__ dirname, 'dist'),},};

Le code ci-dessus dirigera WebPack pour entrer via le./src/index.tsfichier, charger et compiler tous les.tset.tsxfichiers via lets-chargeur, puis sorti unbundle.jsdossier dans notredistrannuaire.

AjouterNPMscripts

Après tout configuré jusqu'à présent, ne serait-il pas logique si vous pouviez simplement exécuter une commande commeNPM Run Magicchaque fois que vous souhaitez créer un paquet?Oui, ce serait le cas.Alors, ouvrez lepackage.jsonfichier dans le répertoire racine du projet et mettre à jour lescriptsSection avec:

"Scripts": {"Magic": "WebPack"}

Création duindex.tsxdéposer

Après que toutes les configurations ont été effectuées ci-dessus, il est temps de créer le fichier de point de saisie principal de notre projet, mais avant de le faire, nous devons installer ce qui suit:

NPM Install React React-Dom @ Types / React @ Types / React-Dom

Ensuite, créez un nouveau dossierSRCpuis un fichier dans leSRCdossier appeléindex.tsxdans la racine et ajouter le code suivant:

Importer * en tant que réagir de "React"; Importer * comme Reactdom à partir de "React-Dom"; Reactdom.render ( 
 Bonjour, bienvenue à React et TypeScript 
 , document.getElementById ("racine"));

Ci-dessus est une simple configuration de réact, sauf qu'elle utilise TypeScript.Pour compiler le fichier, exécutez la commande ci-dessous dans votre terminal:

NPM Run Magic

Un dossier de construction avec un fichier nommébundle.jsa été créé.

Ce paquet nouvellement créé fonctionne-t-il comme prévu?Créer un nouveauindex.htmlFichier qui fait référence à la nouvelle version pour découvrir:

<! Doctype html>  <éadf>   Pour commencer avec TypeScript et reactjs    <! - C'est là que React Rendersen -> 
  div> 
 
 Ce composant montre le logo Logrocket. 
 
 Pour plus d'informations sur Logrocket, veuillez visiter https://logrocket.com 
 );}}

Le bloc de code ci-dessus est un simple composant de réaction qui renvoie un logo et un texte.

Pour rendre ce nouveau composant accessible pour réagir, nous devons importer et utiliser le composant dans la baseindex.tsxdéposer.Mettre à jour leindex.tsxfichier à:

Importer * en tant que réagir à partir de "React"; Importer * en tant que Reactdom de "React-dom"; Importer FirstComponent de './Components/FirstComponent'ReactDom.render ( 
 Bonjour, bienvenue pour réagir et type  h1>   div>, document.getElementById ("root"));

En regardant le bloc de code ci-dessus, vous voyez que les différences sont sur les lignes 3 et 7, où vous avez importé le nouveau composant et le rendu respectivement.

Si vous exécutez leNPM Run MagicCommandez et accédez à votre navigateur, vous verrez:

Utilisation d'interfaces de typeScript avec des composants React

L'un des principes de base de TypeScript est que la vérification du type se concentre sur la forme que les valeurs ont.Ceci est parfois appelé «typage de canard» ou «sous-typage structurel».

Dans TypeScript, les interfaces remplissent le rôle de nommer ces types et sont un moyen puissant de définir des contrats dans votre code et des contrats avec du code en dehors de votre projet.

Pour voir comment vous pouvez utiliser les interfaces avec vos composants React, créez un fichierUserInterface.tsdans leSRCdossier et ajoutez le code suivant:

Exporter l'interface par défaut utilisateur {name: string;Âge: nombre;Adresse: String;dob: date;}

Le bloc de code ci-dessus définit une interface utilisateur simple, qui sera transmise sous forme d'accessoires dans un nouveau composant.Étant donné que cette interface est fortement tapée, remarquez que vous ne pouvez pas transmettre un entier pour la touche de nom, car la valeur est une chaîne.

Créez un nouveau composant dans notreComposantsdossier appeléUserComponent.tsxet ajouter le code suivant:

Importer * en tant que réagir à partir de "React"; Importer userInterface à partir de '../UserInterface'Export class de défaut UserComponent étend React.Component  {Constructor (props: userInterface) {super (props);} render () {return (
 
 composant utilisateur 
 Bonjour,  {this.props.name}  
 Vous êtes  {this.props.age} âgé des années  /b> 
 Vous vivez à:  {this.props.address}  
 Vous êtes né:  {this.props.dob.todatestring ()} 
);}}

Le bloc de code ci-dessus est très explicite.LeInterface utilisateurcréé plus tôt a été importé et transmis comme les accessoires duComposant d'utilisation.Dans le constructeur, nous avons vérifié que les accessoires passés sont du type UserInterface et dans la fonction de rendu, les données seront affichées sur notre page.

Après avoir créé notreComposant d'utilisation, Mettez à jour leindex.tsxdéposer:

Importer * en tant que react à partir de "React"; import * en tant que Reactdom de "React-dom"; Importer FirstComponent de './Components/FirstComponent'Import UserComponent de' ./components/userComponent'Reactdom.Render (
 
Bonjour, bienvenue à React and TypeScript 
   div>, document.getElementById ("root"));
MAINTENANTNPM Run MagicAccédez à votre navigateur et affichez les modifications mises à jour.Tu devrais voir:
Conclusion
Dans ce tutoriel, nous avons démontré comment utiliser TypeScript avec React.Nous avons également parcouru comment configurerwebpackavects-chargeurPour compiler les fichiers TypeScript et émettre une version finale.
La base de code de ce tutoriel est disponible ici pour que vous puissiez jouer avec surGithub.
Visitehttps://logrocket.com/signup/Pour obtenir un ID d'application.
Installez LOGROCKING via NPM ou Script Tag.LOGROCKING.INIT ()doit être appelé côté client, pas côté serveur.
NPM
Étiquette de script
$ NPM je -sauvegarder Raquette 
//Code:
importer Raquette depuis 'LOGROCKING'; 
Raquette.init('app / id'));
Ajouterà votre html:
<scénario SRC="https://cdn.lr-ingest.com/logrocket.min.js"></ /scénario>
<scénario>fenêtre.Raquette && fenêtre.Raquette.init('app /identifiant'));scénario>
(Facultatif) Installez des plugins pour des intégrations plus profondes avec votre pile:
Middleware Redux
middleware NGRX
Plugin Vuex
Commencez maintenant