Vous souhaitez utiliser TypeScript dans React mais vous ne savez pas par où commencer. Vous êtes arrivé au bon endroit! (Nous ne parlerons pas de la syntaxe TS cette fois-ci - juste pour être opérationnel.)

Nouvelle application à partir de zéro

Si vous créez une nouvelle application et utilisez create-react-app, les documents Create React App sont parfaits :

Vous pouvez démarrer une nouvelle application TypeScript à l'aide de modèles. Pour utiliser notre modèle TypeScript fourni, ajoutez --template typescriptà la commande de création.

npx create-react-app my-app --template typescript

Si vous vous êtes retrouvé dans une situation où vous avez déjà commencé un projet et que vous souhaitez convertir en TypeScript, ne vous inquiétez pas ! Il existe une solution pour cela aussi.

Conversion d'une application existante en TypeScript

Dans le terminal, accédez au répertoire de votre application, où vous souhaiterez installer TypeScript :

npm install --save typescript @types/node @types/react @types/react-
dom @types/jest

Voici où vous pourriez rencontrer des problèmes. Si vous ouvrez votre App.tsxfichier, vous verrez que presque tout est souligné en rouge. Pas génial.

Tout d'abord, vous voudrez en import React from 'react'haut du fichier si vous ne le faisiez pas déjà.

Si vous êtes dans VSCode et survolez un élément souligné, vous obtiendrez le message "Impossible d'utiliser JSX à moins que l'indicateur '- jsx' ne soit fourni." À ce stade, vous pouvez soit cliquer sur l'option "Quick Fix", soit le réparer manuellement. Si vous cliquez sur "Quick Fix", vous obtiendrez une option indiquant "Activer le drapeau '- jsx' dans votre fichier de configuration". Une fois que vous avez cliqué dessus, le chargement prend une seconde ou deux, puis les erreurs devraient disparaître.

Si vous voulez le faire manuellement, allez dans votre tsconfig.jsonfichier, localisez la clé de "jsx"et changez la valeur en au "react"lieu de react-jsx.

Si vous obtenez toujours une erreur dans votre tsconfig.jsfichier, vous utilisez peut-être différentes versions de TypeScript. Tapez cmd + shift + ppour ouvrir les paramètres rapides dans VSCode et recherchez "TypeScript: sélectionnez la version de TypeScript…". Cliquez dessus et choisissez "Utiliser la version de l'espace de travail".

J'espère que vous êtes maintenant exempt d'erreurs, que votre code est en cours de compilation et que vous êtes prêt à lancer une application fantastique !

J'aimerais me connecter ! Retrouvez-moi sur LinkedIn , GitHub , Twitter .

Ressources utiles