Ce cours est entièrement écrit en JavaScript mais vous pouvez également utiliser TypeScript avec React Three Fiber.

TypeScript est un sur-ensemble de JavaScript qui ajoute des types au langage. C'est un excellent moyen de détecter les erreurs tôt et d'améliorer l'expérience du développeur avec l'auto-complétion et la documentation.

Le choix d'utiliser ou non TypeScript vous appartient. Pour vous aider à décider, voici quelques questions auxquelles vous devriez réfléchir :

• Le type de projet que vous construisez : êtes-vous en train de concevoir une expérience 3D ou de construire avec l'intention de le livrer ? S'agit-il d'un petit projet ou d'un grand projet ? Est-il destiné à être maintenu longtemps ?
• Votre équipe : travaillez-vous seul ou avec d'autres personnes ? Comme les commentaires, les types sont un excellent moyen de rendre votre code plus compréhensible pour les autres.

Il n'y a pas de bonne ou de mauvaise réponse, c'est à vous de décider ce qui est le mieux pour votre projet. Étant donné que la bibliothèque est écrite en TypeScript, vous pouvez en bénéficier même si vous utilisez JavaScript.

Nous verrons ensemble comment convertir facilement notre projet de démarrage en TypeScript et comment l'utiliser avec React Three Fiber.

Mais cette leçon n'est pas un tutoriel TypeScript, si vous n'avez aucune expérience et que vous souhaitez en savoir plus, vous devriez commencer ici.

Configuration

Dans la leçon de configuration, nous avons créé un nouveau projet à partir de zéro en utilisant Vite. Si vous commencez un nouveau projet, vous pouvez suivre les mêmes étapes et choisir la variante TypeScript pour votre projet au lieu de celle en JavaScript. (N'oubliez pas de revenir ici après pour découvrir comment l'utiliser 🤭)

Voyons comment convertir un projet existant en TypeScript à la place.

Le projet de démarrage est le même que le résultat final de la leçon de configuration, mais les étapes sont les mêmes pour tout projet.

Installer TypeScript

Tout d'abord, nous devons installer TypeScript dans notre projet. Nous pouvons le faire avec la commande suivante :

Copy
yarn add -D typescript

-D installera TypeScript en tant que dépendance de développement. (Puisqu'il n'est pas nécessaire dans la version finale de production)

TypeScript ajoute une nouvelle étape à notre processus de build. Nous devons compiler nos fichiers TypeScript en JavaScript avant d'exécuter notre projet. Pour ce faire, nous devons mettre à jour le script de build de notre fichier package.json comme suit :

Copy
"build": "tsc && vite build"

La commande tsc compilera nos fichiers TypeScript en JavaScript et la commande vite build construira notre projet comme d'habitude.

L'extension de nos fichiers deviendra .tsx au lieu de .jsx et .ts au lieu de .js. Toujours dans le fichier package.json, nous pouvons ajuster le script lint pour en tenir compte :

Copy
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

Configuration de TypeScript

Nous devons créer un fichier tsconfig.json à la racine de notre projet pour configurer TypeScript :

Copy
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Mode bundler */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Et un tsconfig.node.json :

Copy
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Ce sont les options par défaut pour un projet React utilisant Vite. Vous pouvez trouver plus d'informations à leur sujet dans la page de documentation des options de compilation.

ESLint configuration

Nous devons mettre à jour notre fichier .eslintrc.cjs pour prendre en compte TypeScript :

Copy
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parser: "@typescript-eslint/parser",
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

Cela nécessite deux nouveaux packages :

Copy
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser