Configuration d'un projet React avec TypeScript

Apprenez à démarrer un nouveau projet React avec TypeScript intégré en utilisant Vite ou CRA, ou à ajouter TypeScript à un projet React existant.

Démarrer avec TypeScript : Les options modernes

Intégrer TypeScript dans un projet React est aujourd'hui un processus relativement simple, grâce aux outils de génération de projet modernes qui proposent des templates préconfigurés. La configuration manuelle reste possible mais est moins courante pour les nouveaux projets.

Les deux méthodes les plus populaires pour démarrer un nouveau projet React avec TypeScript sont d'utiliser Vite ou Create React App (CRA). Vite est généralement préféré pour sa rapidité et sa configuration plus moderne, mais CRA reste une option viable bien que moins activement développée.

Option 1 : Démarrer avec Vite + TypeScript

Vite est un outil de build frontend de nouvelle génération qui offre une expérience de développement extrêmement rapide. Il propose des templates officiels incluant TypeScript.

Pour créer un nouveau projet React avec TypeScript en utilisant Vite, ouvrez votre terminal et exécutez :

# Avec NPM
npm create vite@latest mon-app-react-ts --template react-ts

# Avec Yarn
yarn create vite mon-app-react-ts --template react-ts

# Avec PNPM
pnpm create vite mon-app-react-ts --template react-ts

Remplacez `mon-app-react-ts` par le nom de votre projet. Ensuite, naviguez dans le dossier créé et installez les dépendances :

cd mon-app-react-ts
npm install
# ou
yarn install
# ou
pnpm install

Et voilà ! Vite aura généré une structure de projet minimale avec React, TypeScript, et les configurations nécessaires (notamment un fichier `tsconfig.json` et `vite.config.ts`). Les fichiers de composants auront l'extension `.tsx` (ex: `App.tsx`, `main.tsx`). Vous pouvez lancer le serveur de développement avec `npm run dev` (ou `yarn dev` / `pnpm dev`).

Option 2 : Démarrer avec Create React App + TypeScript

Create React App (CRA) a longtemps été la méthode standard pour démarrer des projets React. Il supporte également TypeScript nativement.

Pour créer un nouveau projet avec CRA et TypeScript :

npx create-react-app mon-app-react-ts --template typescript

# Ou avec Yarn
yarn create react-app mon-app-react-ts --template typescript

Comme avec Vite, naviguez dans le dossier (`cd mon-app-react-ts`) et vous trouverez une structure de projet prête à l'emploi avec React et TypeScript configurés. Lancez le serveur avec `npm start` (ou `yarn start`). CRA utilise react-scripts pour masquer la complexité de la configuration (Webpack, Babel, etc.).

Ajouter TypeScript à un projet React existant (JavaScript)

Si vous avez un projet React existant en JavaScript (créé avec CRA, Vite, ou manuellement) et que vous souhaitez migrer vers TypeScript, le processus est un peu plus manuel mais tout à fait réalisable :

Installer les dépendances TypeScript :
```
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest
# Ou avec yarn
yarn add --dev typescript @types/node @types/react @types/react-dom @types/jest
```
(Ajoutez `@types/jest` si vous utilisez Jest). `@types/*` sont des paquets contenant les déclarations de types pour les bibliothèques JavaScript correspondantes.

Créer un fichier `tsconfig.json` : C'est le fichier de configuration du compilateur TypeScript. Vous pouvez en générer un de base en exécutant `npx tsc --init` (si TypeScript est installé globalement ou localement). Un `tsconfig.json` de base pour React pourrait ressembler à ceci :

{
  "compilerOptions": {
    "target": "ES2016", // Ou une version plus récente
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true, // Permettre d'importer des fichiers .js
    "skipLibCheck": true, // Ignorer la vérification des types des fichiers de déclaration (.d.ts)
    "esModuleInterop": true, // Améliore l'interopérabilité avec les modules CommonJS
    "allowSyntheticDefaultImports": true, // Permet les imports par défaut depuis des modules sans export par défaut
    "strict": true, // Activer toutes les vérifications strictes (recommandé)
    "forceConsistentCasingInFileNames": true, // Assure la cohérence de la casse des noms de fichiers
    "noFallthroughCasesInSwitch": true, // Signale les oublis de 'break' dans les switch
    "module": "ESNext", // Utiliser la résolution de module moderne
    "moduleResolution": "node", // Ou "bundler" pour Vite
    "resolveJsonModule": true, // Permettre l'import de fichiers JSON
    "isolatedModules": true, // Assure que chaque fichier peut être transpilé séparément
    "noEmit": true, // Ne pas générer de fichiers JS (le bundler s'en charge)
    "jsx": "react-jsx" // Utiliser le nouveau runtime JSX de React
  },
  "include": [
    "src" // Inclure les fichiers dans le dossier src
  ],
  "exclude": [
    "node_modules"
  ] // Exclure node_modules
}

Ajustez les options (`target`, `moduleResolution`, etc.) en fonction de votre projet et de votre outil de build (Vite, Webpack...).

Renommer les fichiers : Changez progressivement l'extension de vos fichiers JavaScript de `.js` ou `.jsx` en `.ts` ou `.tsx`. Commencez par les fichiers les plus simples.
Corriger les erreurs de type : Au fur et à mesure que vous renommez les fichiers, le compilateur TypeScript commencera à signaler des erreurs de type. Corrigez-les en ajoutant les annotations de type nécessaires (nous verrons comment dans les sections suivantes). Utilisez `any` avec parcimonie si vous avez besoin d'une solution temporaire.
Configurer l'outil de build : Assurez-vous que votre outil de build (Vite, Webpack/Babel) est configuré pour traiter les fichiers `.ts` et `.tsx`. Vite le fait nativement. Pour Webpack, vous aurez besoin de `ts-loader` ou de `@babel/preset-typescript`.
Configurer ESLint (si utilisé) : Si vous utilisez ESLint, installez et configurez `@typescript-eslint/parser` et `@typescript-eslint/eslint-plugin` comme vu précédemment pour qu'il comprenne la syntaxe TypeScript.

La migration peut être graduelle (`allowJs: true` dans `tsconfig.json` est essentiel pour cela), vous permettant de typer votre application petit à petit.

Le fichier `tsconfig.json` : Les clés du compilateur

Le fichier `tsconfig.json` est au coeur de la configuration TypeScript. Il indique au compilateur `tsc` quels fichiers inclure, quelles options de compilation utiliser, et comment interagir avec l'environnement JavaScript environnant. Les options clés comme `strict`, `jsx`, `moduleResolution`, `target`, et `lib` définissent le comportement du vérificateur de types et la manière dont le code est interprété. Il est important de comprendre les options de base pour adapter la configuration aux besoins spécifiques de votre projet et de votre chaîne d'outils.

Conclusion : Prêt à typer !

Configurer TypeScript pour un projet React est aujourd'hui facilité par les outils comme Vite et CRA. Que vous démarriez un nouveau projet ou que vous migriez un existant, la mise en place implique principalement l'installation des dépendances correctes et la configuration du fichier `tsconfig.json`.

Une fois l'environnement configuré, vous êtes prêt à exploiter la puissance du typage statique pour écrire des composants, des hooks et des applications React plus robustes et maintenables. Les sections suivantes détailleront comment appliquer concrètement le typage aux différentes parties de votre code React.

◄ Précédent Suivant ►

く