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 :

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 :

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.
    ]
}