Rappel :

TypeScript est un langage libre développé Microsoft. Le but de TypeScript est de fournir un langage fortement typé, qui étende JavaScript et qui puisse être converti en JavaScript (normes ES5, ES2016 ou ES2017) afin d'éviter au développeur d'utiliser directement JavaScript et de produire un code JavaScript qui soit portable et utilisant toutes les optimisations du langage. On dit du compilateur TypeScript qu'il est un transpilateur car il converti du code source en un autre code source et non en instructions (binaire, assembleur, byte-code).

Comment qu'on install TypeScript ?

En passant par NPM ! En effet TypeScript est devenu un paquet NPM et est considéré comme une dépendance technique de votre projet JavaScript. Cette façon permet d'avoir une version du compilateur TypeScript par projet plutôt que d'une seule version unique commune à tous les développements.

Comment faire pour installer TypeScript avec Yarn ?

## Pour une installation locale à votre projet :
yarn add --dev typescript

Je recommande bien évidemment l'utilisation de Yarn en lieu et place de NPM ainsi qu'une installation locale pour éviter les conflits de version inter-projets.

Cependant, et comme je suis vraiment sympa, voici les commandes à taper pour installer TypeScript via NPM :

## Créer une installation global sur votre OS (disponible partout dans la ligne de commande) :
npm install -g typescript

## Créer une installation local à votre projet JS (accessible uniquement via la commande ./node_modules/typescript/bin/tsc) :
npm install --save-dev typescript

Comment qu'on s'en sert ?

Il y a deux méthodes pour transpiler du code TypeScript :

• Soit nous saisissons une gigantesque ligne de commande que nous écrivons dans un script shell.
• Soit nous fabriquons un fichier tsconfig.json à la racine de notre répo, qui contient tout la configuration du compilateur et que TypeScript charge automatiquement lorsque l'on tape la commande tsc.

Je rappelle que je chercher à reproduire l'architecture de dossier spécifiée par la convention Maven :

. (root folder)
|__ src/
|    |__ main/
|    |    |__ js/
|    |
|    |__ test/
|         |__ js/
|
|__ target/

Voici mon fichier :

{
    "compilerOptions": {
        // BUILD GLOBAL OPTIONS : 
        "module": "commonjs",           // What kind of loading system should we use (CommonJS, AMD, etc).
        "outDir": "./target/js",        // Output directory
        "sourceMap": false,             // Create the source-map file help to debug TypeScript code while executing JS
        "target": "ES5",                // The aimed JS version (ES5, ES2016, ES2017 or ESNext

        // BUILD OUTPUT :
        "diagnostics": false,           // Display no statistics about number of files, base code size, etc.
        "pretty": true,                 // Display color in console for error, warning, etc.

        // ENCODING
        "charset": "utf8",              // The targeted file encoding
        "newLine": "lf",                // File will use Line Feed as EOL character (Unix format)

        // COMPILER BEHAVIOR :
        "allowJs" : false,              // Allow JS syntax
        "preserveConstEnums": true,     // 'const enum' are kept in generated code
        "removeComments": true,         // Comment removed from transpiled code
        "emitDecoratorMetadata": true,  // Test
        "experimentalDecorators": true,

        // COMPILER ENFORCING :
        "noImplicitAny": true,          // 'any' type is mandatory
        "noImplicitThis": true,         // Forbien to mix 'any' and 'this' in the same expression
        "noImplicitReturns": true       // Raise error is a 'return' is missing in part of a function
    },

    "include": [
        "./src/main/js/**/*"            // Pattern finding the TypeScript files
    ]
}

L'un de mes posts précédents montrant le différentiel entre deux tsconfig.json DEV & PROD est disponible ICI