JavaScript est un langage de programmation faiblement typé. Pour cette raison, il est très indulgent et les erreurs de programmation risquent de passer inaperçues pendant le développement. TypeScript, une bibliothèque de vérification de type JavaScript, résout ce problème en appliquant des types sur des valeurs. Cet article vous apprendra comment créer un projet React avec TypeScript.
Créer un projet React avec TypeScript
La commande create-react-app vous permet de créer des projets Typescript en utilisant le --modèle option.
À créer un nouveau projet React avec TypeScript, exécutez la commande suivante :
npx créer-application réactive-app-Nom--template dactylographié
Cette commande crée un nouveau projet React et TypeScript à partir de zéro. Vous pouvez également ajouter TypeScript à une application React existante.
Pour ce faire, accédez au projet auquel vous souhaitez ajouter TypeScript et exécutez le code suivant :
npm install --save tapuscrit @les types/node @les types/react @les types/react-dom @les types/jest
Remplacez ensuite l'extension de fichier .js par .tsx pour les fichiers que vous souhaitez convertir en TypeScript. Une fois que vous faites cela, vous obtiendrez le "React fait référence à un UMD global, mais le fichier actuel est un module. Erreur. Vous pouvez le résoudre en important React dans chaque fichier tapuscrit comme ceci :
importer Réagir de "réagir"
Comme solution plus simple, créez un tsconfig.json et définissez jsx sur react-jsx.
{
"options du compilateur": {
"jsx": "réagir-jsx",
"cible": "es6",
"module": "suivant",
},
}
Vous pouvez trouver tous les paramètres de configuration à partir du Documents TypeScript.
Création d'un composant de fonction React dans TypeScript
Vous définissez un composant de fonction React de la même manière qu'une fonction JavaScript.
Vous trouverez ci-dessous un exemple de composant de fonction appelé Greetings.
exporterdéfautfonctionSalutations() {
revenir (
<div>Bonjour le monde</div>
)
}
Ce composant renvoie une chaîne "Hello world" et TypeScript déduit son type de retour. Cependant, vous pouvez annoter son type de retour :
exporterdéfautfonctionSalutations(): JSX.Élément{
revenir (
<div>Bonjour le monde</div>
)
}
TypeScript génère une erreur si le composant Greetings renvoie une valeur qui n'est pas un élément JSX.
Utilisation des accessoires React avec TypeScript
React vous permet de créer des composants réutilisables via des accessoires. Par exemple, le composant Greetings peut recevoir un accessoire de nom tel que la valeur de retour est personnalisée en fonction de celui-ci.
Ci-dessous se trouve le composant édité avec un nom comme accessoire. Notez la déclaration de type en ligne.
fonctionSalutations({nom}: {nom: chaîne}) {
revenir (
<div>Bonjour {nom}</div>
)
}
Si vous passez le nom "Jane", le composant renverra le message "Hello Jane".
Au lieu d'écrire la déclaration de type dans la fonction, vous pouvez la définir en externe comme ceci :
taper SalutationsProps = {
nom: chaîne ;
};
Passez ensuite le type défini au composant comme suit :
fonctionSalutations({name}: Props salutations) {
revenir (
<div>Bonjour {nom}</div>
)
}
Utilisez le mot-clé interface si vous exportez ce type et souhaitez l'étendre :
exporter interfaceSalutationsAccessoires{
nom: chaîne ;
};
Notez la différence de syntaxe entre le type et l'interface — l'interface n'a pas de signe égal.
Vous pouvez étendre une interface à l'aide du code suivant :
importer { Accessoires de salutations } de './Salutations'
interfaceBienvenuePropss'étendSalutationsAccessoires{
temps: "chaîne de caractères"
}
Vous pouvez ensuite utiliser l'interface étendue dans un autre composant.
fonctionAccueillir({nom, heure}: WelcomeProps) {
revenir (
<div>
Bon {temps}, {nom} !
</div>
)
}
Utilisez le "?" symbole avec votre interface d'accessoires pour définir les accessoires facultatifs. Voici un exemple d'interface avec un accessoire de nom facultatif.
interfaceSalutationsAccessoires{
nom? : chaîne ;
};
Si vous ne transmettez pas de prop de nom, TypeScript ne générera aucune erreur.
Utiliser l'état de réaction avec TypeScript
En JavaScript simple, vous définissez le crochet useState() comme suit:
const [nomclient, setNomclient] = useState("");
Dans cet exemple, TypeScript peut facilement déduire le type du firstName sous forme de chaîne car la valeur par défaut est une chaîne.
Cependant, parfois, vous ne pouvez pas initialiser l'état à une valeur définie. Dans ces cas, vous devez donner un type de valeur d'état.
Voici quelques exemples de définition de types dans le crochet useState().
const [nomclient, setNomclient] = useState<chaîne de caractères>("");
const [âge, setAge] = useState<Numéro>(0);
constante [isSubscribe, setIsSubscribe] = useState<booléen>(faux);
Vous pouvez également utiliser une interface dans le crochet useState(). Par exemple, vous pouvez réécrire l'exemple ci-dessus pour utiliser une interface illustrée ci-dessous.
interfaceClient{
NomClient: chaîne ;
âge: nombre ;
est abonné: booléen ;
}
Utilisez l'interface personnalisée dans le hook comme ceci :
const [client, setCustomer] = useState<Client>({
NomClient: "Jeanne",
âge: 10 ans,
est abonné: faux
});
Utilisation d'événements avec TypeScript
Les événements sont essentiels car ils permettent aux utilisateurs d'interagir avec une page Web. Dans TypeScript, vous pouvez saisir des événements ou les gestionnaires d'événements.
Pour illustrer, considérez le composant Login suivant utilisant les événements onClick() et onChange().
importer { useState } de 'réagir';
exporterdéfautfonctionConnexion() {
const [email, setEmail] = useState('');constante handleChange = (événement) => {
setEmail(un événement.cible.évaluer);
};constante handleClick = (événement) => {
console.log('Soumis !');
};
revenir (
<div>
<type d'entrée="e-mail" value={email} onChange={handleChange} />
<bouton onClick={() => gérerClic}>Soumettre</button>
</div>
);
}
C'est ainsi que vous géreriez les événements en JavaScript simple. Cependant, TypeScript s'attend à ce que vous définissiez le type de paramètre d'événement dans les fonctions du gestionnaire d'événements. Heureusement, React propose plusieurs types d'événements.
Par exemple, utilisez le type changeEvent pour le gestionnaire d'événements handleChange().
importer { ChangeEvent, useState } de 'réagir';
const handleChange = (événement: ChangeEvent<HTMLInputElement>) => {
setEmail(un événement.cible.évaluer);
};
Le type changeEvent est utilisé pour modifier les valeurs des éléments input, select et textarea. C'est un type générique signifiant que vous devez passer dans l'élément DOM dont la valeur change. Dans cet exemple, vous avez passé l'élément d'entrée.
L'exemple ci-dessus montre comment taper l'événement. Le code ci-dessous montre comment vous pouvez taper le gestionnaire d'événements à la place.
importer { ChangeEventHandler, useState } de 'réagir';
const handleChange: ChangeEventHandler<HTMLInputElement> = (événement) => {
setEmail(un événement.cible.évaluer);
};
Pour l'événement handleClick(), utilisez MouseEvent().
importer { useState, MouseEvent } de 'réagir';
constante handleClick = (événement: MouseEvent) => {
console.log('Soumis !');
};
Encore une fois, vous pouvez attacher le type au gestionnaire d'événements lui-même.
importer { useState, MouseEventHandler } de 'réagir';
constante handleClick: MouseEventHandler = (événement) => {
console.log('Soumis !');
};
Pour les autres types d'événements, consultez le Aide-mémoire Réagir TypeScript.
Si vous créez de grands formulaires, il est préférable de utiliser une bibliothèque de formulaires comme Formik, car il est construit avec TypeScript.
Pourquoi devriez-vous utiliser TypeScript ?
Vous pouvez demander à un nouveau projet React d'utiliser TypeScript ou d'en convertir un existant. Vous pouvez également utiliser TypeScript avec les composants de fonction React, l'état et les événements React.
Taper des composants React peut parfois donner l'impression d'écrire du code passe-partout inutile. Cependant, plus vous l'utiliserez, plus vous apprécierez sa capacité à détecter les erreurs avant de déployer votre code.
