Publié le 06/07/2017, rédigé par
Davy CLAISSE
TypeScript
Comment configurer une transpilation avec TypeScript ?
Prérequis, avoir installé TypeScript.
Comment fonctionne la commande TypeScript ?
TypeScript fournit un exécutable appelé tsc. Ces trois lettres signifient TypeScript Compiler et la ligne de commande pour l'utiliser est la suivante (attention gros résumé) :
tsc [OPTIONS] [ARGUMENTS]
Cependant, la commande tsc peut s'utiliser de deux manières :
- Soit directement via la ligne de commande en spécifiant les bons arguments.
- Soit en allant chercher les paramètres de notre build depuis un fichier (ce qui évite de ressaisir toute la commande à chaque build).
C'est de cette seconde méthode dont nous allons parler.
Comment utiliser le fichier tsconfig.json
Pour utiliser le fichier tsconfig.json il faut respecter deux contraintes :
- Correctement écrire le nom de ce fichier en minuscules.
- Exécuter la commande tsc sans aucun argument, directement dans le répertoire où se trouve le fichier tsconfig.json.
Et c'est tout !
Que faut-il écrire dans le fichier tsconfig.json ?
{
"compilerOptions": {
// OPTIONS GLOBALES DU BUIILD :
"module": "commonjs", // La librairie de chargement à utiliser (CommonJS, AMD, etc).
"outDir": "./target/js", // L'emplacement où les fichiers JS seront générés.
"sourceMap": false, // faut-il créer oui ou non un fichier de source-map (c'est le fichier qui permet de débugger le code).
"target": "ES5", // La version de JavaScript sur lequel le code transpilé pourra s'exécuter (ES5, ES2016, ES2017 or ESNext).
// BUILD OUTPUT :
"diagnostics": false, // Informations statistiques à propos des fichiers (taille du code, nombres de fichiers TypeScript. etc).
"pretty": true, // Afficher des couleurs dans la console pour les erreurs, les warning, etc.
// ENCODING
"charset": "utf8", // L'encodage qu'auront les fichiers JS une fois transpilés.
"newLine": "lf", // Le format des fichiers JS une fois transpilés (lf = Unix / cr = OSX / crlf = Windows).
// COMPILER BEHAVIOR :
"allowJs" : false, // Interdire ou non la syntaxe JS native dans le code TypeScript. Ici elle est interdite.
"preserveConstEnums": true, // Conserver les 'const enum' dans le code transpilé.
"removeComments": true, // Supprimer les commentaires dans le code transpilé.
"emitDecoratorMetadata": true, // Utiliser les décorateurs d'ES6.
"experimentalDecorators": true, // Utiliser les décorateurs expérimentaux.
// COMPILER ENFORCING :
"noImplicitAny": true, // Le mot-clef 'any' est obligatoire pour les types génériques dans les fichiers TypeScript.
"noImplicitThis": true, // On ne peut pas utiliser 'any' et 'this' dans la même expression.
"noImplicitReturns": true, // Lève une erreur si le mot-clef 'return' est manquant dans une partie d'une fonction.
"noUnusedLocals": true, // Remonter en erreur les variables locales non utilisées.
"noUnusedParameters": true // Remonter en erreur les paramètres non utilisés des méthodes.
},
"include": [
"./src/main/js/**/*.ts" // Dans quel répertoire se trouvent les fichiers TS et leur nom matches quel pattern.
]
}