Le but de cet article est d’installer et de permettre d’exécuter du code Typescript sur Debian GNU/Linux 9.

Il est possible d’utiliser Typescript avec Visual Studio sur Windows qui est un environnement familier pour un développeur .NET. Toutefois d’une façon générale, l’installation et l’implémentation de Typescript se fait plus couramment avec Node.js qui permet d’utiliser ce langage dans des environnements plus hétérogènes.

D’abord, il faut installer Node.js et le compilateur Typescript avec NPM (i.e. Node Package Manager). Ensuite, il est nécessaire de préparer l’environnement pour permettre d’exécuter du code javascript généré à partir du code Typescript.

Installation de Node.js

La première étape consiste à installer Node.js et NPM (i.e. Node Package Manager). Ces 2 éléments s’installent en une seule fois:

Il faut télécharger la version LTS (i.e. Long Term Support) de Node.js sur https://nodejs.org/en/.
Pour Debian, il faut télécharger la version “Linux Binaries” en 64-bit.
Dans notre cas, la version LTS est 8.10.0.
Décompresser le fichier dans un répertoire local:
```
user@debian:~% tar xf <nom du fichier .tar.xz> 
```
Dans notre cas:
```
user@debian:~% tar xf node-v8.10.0-linux-x64.tar.xz 
```
L’option x permet d’indiquer qu’on veut extraire l’archive et f indique qu’il s’agit d’un fichier.
Déplacer le répertoire dans un emplacement utilisable par tous les utilisateurs. Pour ce faire, il faut d’abord se connecter en tant qu’utilisateur root:
```
user@debian:~% su 
root@debian:/home/user/% mkdir /usr/node.js 
```
On déplace ensuite, le répertoire décompressé de Node.js:
```
root@debian:/home/user/% mv node-v8.10.0-linux-x64 /usr/node.js 
```
En tant qu’utilisateur normal, on peut ajouter le chemin de Node.js à la variable d’environnement PATH en éditant le fichier .bashrc avec une éditeur de texte.
Avec vi, on peut exécuter la commande suivante:
```
user@debian:~% vi /home/<répertoire de l'utilisateur>/.bashrc 
```
A la fin du fichier, il faut ajouter les lignes suivantes (pour passer en mode édition dans vi, il faut taper [i]):
```
export NODEJS_HOME=/usr/node.js/node-v8.10.0-linux-x64 
export PATH=$PATH:NODEJS_HOME/bin 
```
On enregistre en tapant [Echap] puis [:wq] et [Entrée].

Si on ouvre un nouveau terminal, on devrait pouvoir exécuter la commande suivante:

user@debian:~% npm version

Installation de Typescript

Le compilateur Typescript peut être installé facilement avec npm en suivant les instructions sur la page: https://www.typescriptlang.org/index.html#download-links.

Il faut, ainsi, exécuter l’instruction suivante:

user@debian:~% npm install –g typescript

Cette instruction permet d’installer Typescript de façon globale (avec l’option -g) dans le répertoire:

<répertoire d'installation de Node.js>/lib/node_modules/typescript/bin

Dans notre cas:

/usr/node.js/node-v8.10.0-linux-x64/lib/node_modules/typescript/bin

Le compilateur est accessible en tapant directement:

user@debian:~% tsc –v

Préparation de l’environnement de développement

Les étapes suivantes vont permettre d’utiliser le compilateur pour produire du code Javascript exécutable sur la plupart des browsers.

Création d’un projet

Pour créer un projet, il faut exécuter les étapes suivantes:

Créer le répertoire du projet:

user@debian:~% mkdir Helloworld 
user@debian:~% cd helloworld

Créer un fichier package.json en exécutant l’instruction:
```
user@debian:~% npm init –y 
```

On installe le module typescript pour le développement en exécutant:

user@debian:/home/user/helloworld/% npm install typescript --save-dev

On installe les références de types de node:

user@debian:/home/user/helloworld/% npm install @types/node --save-dev

Création d’un fichier tsconfig.json contenant la configuration du compilateur pour le projet Typescript:
```
user@debian:/home/user/helloworld/% npx tsv --init 
```
Le fichier doit se présenter de cette façon:
```
{ 
  "compilerOptions": { 
    "outDir": "./public/", 
    "target": "es5",      
    "module": "es6",   
    "noImplicitAny": true, 
    "esModuleInterop": true, 
    "allowJs": true 
  } 
} 
```
La configuration du compilateur contenue dans ce fichier indique les éléments suivants:
- "outDir" indique le répertoire de sortie de la compilation,
- "target" précise la version ECMAScript cible,
- "module": la génération du code des modules se fait de façon native (ECMAScript 6),
- "noImplicitAny" indique au compilateur de retourner une erreur si une instruction contient le type any,
- "esModuleInterop" permet de rajouter des directives pour que le code soit compatible avec l’écosystème Babel,
- "allowJs" indique que les fichiers Javascript peuvent être compilés.

On crée, ensuite, un fichier Typescript index.ts contenant le code à exécuter:

class Startup { 
    public static main(): number { 
        console.log('Hello World'); 
        return 0; 
    } 
} 

Startup.main();

On peut ensuite installer webpack qui permet de générer un bundle avec le code Javascript:
```
user@debian:/home/user/helloworld/% npm install webpack --save-dev 
```
Installation de ts-loader qui est nécessaire pour l’exécution de webpack:
```
user@debian:/home/user/helloworld/% npm install ts-loader --save-dev 
```
Installation de webpack-dev-server qui est un mini-serveur de développement pour exécuter le code Javascript à chaque fois qu’on modifie le code Typescript:
```
user@debian:~% npm install webpack-dev-server --save-dev 
```
Pour que l’on puisse exécuter une commande webpack, il faut installer le package webpack-cli. Le prérequis pour installer ce package est de pouvoir exécuter une commande Git. On va donc installer Git en utilisant une instruction apt-get de Debian:
Il faut se connecter en tant qu’utilisateur root pour exécuter cette instruction:
```
root@debian:/home/user/% apt-get install git 
```
On installe ensuite le package webpack-cli en tant qu’utilisateur normal dans le répertoire du projet:
```
user@debian:/home/user/helloworld/% npm install webpack-cli --save-dev 
```

On complète le fichier de configuration de webpack en créant le fichier webpack.config.js:

const path = require('path'); 

module.exports = { 
   entry: './index.ts', 
   module: { 
     rules: [ 
         { 
           test: /\.tsx?$/, 
           use: 'ts-loader', 
           exclude: /node_modules/ 
         } 
      ] 
   }, 
   resolve: { 
     extensions: [ '.tsx', '.ts', '.js' ] 
   }, 
   output: { 
     filename: 'app.js', 
     path: path.resolve(__dirname, 'public') 
   } 
};

Dans ce fichier, la ligne entry: './index.ts' indique que le fichier d’entrée est index.ts. Le fichier de sortie contenant le bundle est indiqué par les lignes suivantes:

output: { 
     filename: 'app.js', 
     path: path.resolve(__dirname, 'public') 
   }

Il faut ensuite compléter le fichier package.json pour qu’il contienne les lignes suivantes:

{
  "name": "helloworld", 
  "version": "1.0.0", 
  "description": "", 
  "main": "./public/main.html", 
  "scripts": { 
    "build": "webpack ./webpack.config.js --mode development", 
    "start": "webpack-dev-server ./webpack.config.js --content-base ./public --mode development" 
  }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC", 
  "devDependencies": { 
    "@types/node": "^9.4.7", 
    "ts-loader": "^4.0.1", 
    "typescript": "^2.7.2", 
    "webpack": "^4.1.1", 
    "webpack-cli": "^2.0.11", 
    "webpack-dev-server": "^3.1.1" 
  } 
}

Les lignes les plus importantes sont celles contenant les instructions suivantes:

Pour effectuer l’étape de build:

"build": "webpack ./webpack.config.js --mode development"

Pour démarrer le serveur webpack-dev-server:

"start": "webpack-dev-server ./webpack.config.js --content-base ./public --mode development"

Enfin dans le répertoire public, on crée un fichier HTML index.html contenant le code suivant:
```
<html> 
  <body> 
    <div id="root"></div> 
    <script src="./app.js"></script> 
  </body> 
</html> 
```
Ce code permet d’appeler le code contenu dans le fichier Javascript public/app.js.

Exécution du compilateur Typescript

Après installation des différents composants, on peut effectuer l’étape de build avec webpack de façon à construire le fichier bundle contenant le code Javascript.

L’étape de build peut être exécuté avec la commande suivante:

user@debian:/home/user/helloworld/% npm run build

A la suite de cette étape, un répertoire se nommant public a été créé et il contient le fichier app.js avec le code javascript.

Pour lancer le serveur webpack-dev-server, il faut exécuter la commande suivante:

user@debian:/home/user/helloworld/% npm run start

Cette commande lance le serveur sur le port 8080:

> helloworld@1.0.0 start /home/mat/Documents/helloworld 
> webpack-dev-server ./webpack.config.js --content-base ./public --mode development 

ℹ ｢wds｣: Project is running at http://localhost:8080/ 
ℹ ｢wds｣: webpack output is served from / 
ℹ ｢wds｣: Content not from webpack is served from /home/mat/Documents/helloworld/public 
ℹ ｢wdm｣: Hash: 908628beca4c5ae4881d

En se connectant sur la page http://localhost:8080 avec un browser, on doit voir une page blanche.

La page n’est pas tout à fait vierge. Si on affiche la console du browser en tapant le raccourci [Ctrl] + [Maj] + [i], on doit voir le message:

Hello World

Si on modifie le code Typescript dans le fichier index.ts, à chaque enregistrement le code Javascript est mis à jour dans public/app.js.

Installation de Visual Studio Code

Visual Studio Code est un éditeur qui permet de facilement développer en Typescript. Pour installer Visual Studio Code, il suffit de suivre les instructions suivantes (qui sont explicitées sur https://code.visualstudio.com/docs/setup/linux:

Il faut exécuter les étapes suivantes en tant qu’utilisateur root:

Editer le fichier /etc/apt/sources.list.d/vscode.list en tapant:
```
root@debian:/home/user/% vi /etc/apt/sources.list.d/vscode.list  
```
Passer en mode insertion en tapant [i] et ajouter la ligne:
```
deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main  
```
Il faut enregistrer et quitter en tapant la touche [echap], en écrivant :wq puis [entrée].
On met à jour la liste des packages présents dans les différentes sources de APT en tapant:
```
root@debian:/home/user/% apt-get update  
```

On installe le package code en tapant:

root@debian:/home/user/% apt-get install code

On peut démarrer Visual Studio Code en tapant:
```
user@debian:~% code  
```

Quelques remarques concernant le développement en Typescript en utilisant Visual Studio Code sont explicitées sur cette page: https://code.visualstudio.com/docs/languages/typescript.

Compiler un projet avec Visual Studio Code

Pour compiler un projet Typescript avec VS Code:

D’abord, il faut ouvrir le projet en cliquant sur File ⇒ Open Folder ou avec le raccourci clavier [Ctrl] + [k] et [Ctrl] + [o].
Il faut sélectionner le répertoire contenant le fichier Typescript index.ts.
Pour compiler, cliquer sur Tasks ⇒ Run Build Tasks… puis écrire:
```
tsc: build - tsconfig.json
```
On peut voir les détails de la compilation dans le terminal intégré.
Pour que le code Typescript soit compilé à chaque fois qu’un fichier est sauvegardé, il faut cliquer sur Tasks ⇒ Run Build Tasks… puis écrire:
```
tsc: watch - tsconfig.json
```
A ce moment, chaque fichier Typescript est monitoré et la compilation est effectuée à chaque sauvegarde.
On peut voir le code Javascript correspondant à une fichier Typescript en cliquant sur View ⇒ Split Editor. Il faut ensuite sélectionner:
- le fichier Typescript index.ts dans une partie de l’écran et
- le fichier Javascript correspondant public/index.js dans l’autre partie
Pour le fichier Typescript index.ts contenant le code:
```
class Startup { 
    public static main(): number { 
        console.log('Hello World'); 
        return 0; 
    } 
} 

Startup.main(); 
```
On obtient le code Javascript suivant:
```
var Startup = /** @class */ (function () {
    function Startup() {
    }
    Startup.main = function () {
        console.log('Hello World');
        return 0;
    };
    return Startup;
}());
Startup.main();
```

Le code de cet article se trouve sur Github: HelloworldTS.

En conclusion…

Cet article ne visait qu’à introduire l’implémentation de code en Typescript. L’installation est plutôt rapide et surtout elle est sensiblement la même d’une plateforme à l’autre.
D’autres articles futurs rentreront davantages dans les détails en explicitant la syntaxe Typescript, la gestion des modules et l’ajout de composants Javascript externes à un projet Typescript.

Références

Webpack – Typescript: https://webpack.js.org/guides/typescript/
TypeScript in 5 minutes: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
Get TypeScript: https://www.typescriptlang.org/index.html#download-links
Getting Started with Visual Studio Code: https://code.visualstudio.com/docs?start=true
Editing TypeScript: https://code.visualstudio.com/docs/languages/typescript

Quelques découvertes, trucs et astuces sur .NET en général

Installation de Typescript sur Debian/Ubuntu