Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

2.2. Le fichier tsconfig.json

Ce document est le fichier de configuration de TypeScript. Vous devez le placer à la racine de votre projet également, comme pour le fichier package.json. On peut définir un certain nombre d’éléments de configuration dans ce fichier, en voici quelques-uns :

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}
  • A la ligne 3, target a pour valeur es5, ce qui indique que notre code TypeScript sera compilé vers du code JavaScript ES5. On pourrait mettre ES6 comme valeur pour générer du code JavaScript différent.
  • A la ligne 20, nous avons une option qui peut paraître étrange mais qui est très importante. Nous indiquons à TypeScript que nous allons utiliser du JSX dans notre code, et que nous voulons qu’il compile le JSX vers du JavaScript. Rien que ça ! Heureusement, le compilateur de TypeScript sait faire cela, il suffit de lui passer l’option react, et nos fichiers devront avoir pour extension *.tsx. (Un mélange de TypeScript et JSX). Par exemple, notre premier composant nommé App, se trouvera dans le fichier App.tsx. Ainsi, le compilateur de TypeScript sait qu’il doit compiler du code JSX.
  • A la ligne 22, include indique au compilateur de TypeScript où se trouvent les fichiers que nous voulons compiler vers JavaScript. Pour le moment, nous n’avons pas encore de fichiers à compiler, mais nous allons placer tout le code de notre futur application dans un dossier src, donc nous indiquons src à TypeScript.

On peut passer à la suite désormais !

Les détails de la configuration de TypeScript sont indiqués sur la documentation officielle, si vous souhaitez y revenir par la suite.