Créez et configurez le fichier tsconfig.json

Florent Veillon
publié le : 28 janvier 2023
modifié le : 02 février 2023

Le fichier tsconfig.json

Dans notre introduction, nous avons compilé le fichier demo.ts en utilisant la CLI (commande tsc) :

tsc ./src/demo.ts --outFile ./dist/demo.js

Il existe de nombreuses options pour cette CLI, ce n'est donc pas très pratique de devoir tout configurer en une seule ligne de commande...

Heureusement, TypeScript a prévu le coup et permet d'utiliser un fichier de configuration : tsconfig.json.

Création du fichier

Créez le fichier tsconfig.json à la racine de votre projet.

Puis entrez le contenu suivant :

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "es6",
    "module": "esnext",
    "removeComments": true,
    "noEmitOnError": true,
    "strict": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Vous allez maintenant pouvoir compiler très simplement en utilisant la commande tsc :

tsc
# ps: assurez-vous d'être placé dans le dossier contenant le fichier tsconfig.json

C'est également possible de compiler automatiquement dès qu'il y a des changements enregistrés dans vos fichiers .ts avec le flag --watch :

tsc --watch

Quelques explications sur cette config

Cette config va permettre de compiler tous les fichiers .ts contenus dans le dossier src vers le dossier dist, elle est relativement simple, j'y ai mis quelques options basiques :

Options de 1er niveau

  • compilerOptions : c'est là qu'on va mettre toutes les options servant à configurer le compilateur
  • include : permet de guider TypeScript sur les fichiers à compiler
  • exclude : permet d'exclure certains fichiers et/ou dossiers de la compilation

compilerOptions

  • outDir : le dossier de destination des fichiers compilés en .js
  • target : permet de spécifier quelle sera la version ECMAScript utilisée par les fichiers compilés
  • module : permet de spécifier quel système de modules et d'imports sera utilisé pour les fichiers compilés
  • removeComments : permet de retirer les commentaires des fichiers compilés
  • noEmitOnError : empêche la compilation d'un ou des fichiers .ts vers .js en cas d'erreurs
  • strict : nous allons voir juste après à quoi sert cette option

Vous pouvez retrouver toutes les options de configuration et leur signification détaillée dans la documentation officielle :

https://www.typescriptlang.org/tsconfig

https://www.typescriptlang.org/docs/handbook/compiler-options.html

Un peu plus d'explications sur target et module

Target

Target sert à définir la version ECMAScript des fichiers .js compilés, cela n'influence pas la version ECMAScript de vos fichiers sources .ts

Admettons que vous ayez le code suivant dans votre fichier source exemple.ts :

// @filename: exemple.ts (source)
let greeting = () => {
    console.log('Hello world!')
};

Avec une target à es3, le fichier compilé exemple.js contiendra ceci :

// @filename: exemple.js
var greeting = function () {
    console.log('Hello world!');
};

Et si on utilise une target plus moderne comme es6, le fichier compilé exemple.js donnera ceci :

// @filename: exemple.js
let greeting = () => {
    console.log('Hello world!');
};

Module

Module va permettre de spécifier le système d'import utilisé dans les fichiers compilés .js.

/!\ cette option ne va pas influencer la version ECMAScript des fichiers .js compilés, c'est le rôle de target.

ça peut porter à confusion au début mais en réalité c'est assez facile à comprendre.

Imaginons que vous ayez le fichier source (TypeScript) suivant :

// @filename: exemple.ts (source)
import {addNumbers} from "./utils";

let res = addNumbers(10, 5);
console.log(res);

Avec module = CommonJs, vous allez obtenir :

// @filename: exemple.js
"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
var res = (0, utils_1.addNumbers)(10, 5);
console.log(res);

Avec module = esnext :

// @filename: exemple.js
import { addNumbers } from "./utils";
let res = addNumbers(10, 5);
console.log(res);

La target et le module à utiliser varient en fonction de la modernité des navigateurs que vous ciblez, pour cela vous connaissez sûrement le site caniuse.com :

https://caniuse.com/?search=es6

https://caniuse.com/?search=import

Pour en savoir plus sur les options target et module :

https://www.typescriptlang.org/tsconfig#target

https://www.typescriptlang.org/tsconfig#module

Mode strict vs non strict

C'est la dernière chose importante à savoir concernant le fichier tsconfig.json, pour le reste, vous l'apprendrez sur le tas.

Activer le mode strict (true) va indiquer à TypeScript d'effectuer des vérifications supplémentaires (type checking) ce qui va renforcer la fiabilité de votre application JS, mais en contrepartie vous devrez être plus rigoureux dans votre manière de coder au sein de vos fichiers TypeScript (.ts).

Exemple de code fonctionnant uniquement avec le mode strict désactivé :

const getArrayLength = (arg) => {
    console.log(arg.length);
};

getArrayLength([1,2,3]);

L'exemple ci-dessus va déclencher une erreur si vous activez le mode strict :

tsc src/demo.ts:1:25 - error TS7006: Parameter 'arg' implicitly has an 'any' type.
                                                                              
1 const getArrayLength = (arg) => {  

Found 1 error in src/demo.ts:1

Le mode strict active de nombreuses options dont noImplicitAny ce qui explique le message d'erreur : interdiction de faire du typage implicite sur une donnée où TypeScript ne pourra deviner le type (= fallback en any non autorisé).

Correction pour le faire fonctionner avec le mode strict activé :

const getArrayLength = (arg: number[]) => {
    console.log(arg.length);
};

getArrayLength([1,2,3]);

Ici nous avons ajouté le type number[] à l'argument arg de la fonction getArrayLength :

TypeScript sait désormais que arg est un tableau de nombres et ne déclenche plus l'erreur !

plus d'infos sur le mode strict : https://www.typescriptlang.org/tsconfig#strict

Vous savez maintenant configurer un fichier tsconfig.json basique et comprenez les options les plus importantes, nous allons pouvoir passer à la suite et continuer l'apprentissage des concepts du langage TypeScript.

Sommaire