Express et TypeScript avec transpilation “on-the-fly”

J’aime beaucoup utiliser babel-node pour développer des applications Node en ES2015 très facilement, puisque cela permet de transpiler le code à la volée (donc sans installer toute une mécanique complexe à la Grunt, Gulp and co). J4au pu découvrir ça grâce à l’article d’Axel Rauschmayer http://www.2ality.com/2015/03/babel-on-node.html.
J’aime aussi faire du TypeScript, et je viens de découvrir qu’un mécanisme similaire existait (c’est à dire faire des applications Node en TypeScript de manière transparente): ts-node.

Voyons donc comment cela fonctionne.

Attention: cette approche est intéressante pour les expérimentations et le développement, mais pour la mise ne production vous n’échapperez pas à un “build” classique.

Pré-requis

• il vous faut TypeScript: npm install -g typescript ou sudo npm install -g typescript selon votre OS
• il faut aussi installer ts-node: npm install -g ts-node ou sudo npm install -g ts-node selon votre OS
• vous aurez besoin de pouvoir installer des fichier de définitions TypeScript (ce qui permet à TypeScript de comprendre des frameworks JavaScript existants), donc pour cela il vous faut tsd: npm install tsd -g ou sudo npm install tsd -g selon votre OS

Voilà maintenant, nous avons tout ce qu’il faut pour commencer.

Créer une application Express en TypeScript

Préparation

Dans votre répertoire de travail, tapez les commandes suivantes:

npm install express body-parser #  installer les modules
tsd install express body-parser #  installer les définitions

Dans ce même répertoire, créez un fichier tsconfig.json avec le contenu suivant:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs"
  }
}

Cela va “expliquer” au transpiler comment gérer les modules.

Maintenant, on code!

Notre “application”

Nous allons créer 3 fichier TypeScript:

Une classe Controller dans controller.ts

import express = require('express');

export class Controller {
  router = express.Router();
}

Remarque: dans le cas de l’utilisation de frameworks JavaScript “externes”, vous aurez à utiliser le mot-clé require

Une classe YoController dans yoController.ts

import {Controller} from './controller';

export class YoController extends Controller {
  constructor() {
    super()
    // define routes
    this.router.get('/message', (req, res) => res.json({ message: "YO!" }));
  }
}

Remarque: vous notez que dans ce cas là, notre import est plus façon TypeScript ou ES2015. En effet dans la classe précédente nous avons utilisé le mot-clé export qui nous permet de faire l’import de cette manière.

Et enfin notre application dans app.ts

import express = require('express');
import http = require('http');
import bodyParser = require('body-parser');

import {YoController} from './yoController';

var app = express();

app
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use('/api/yo', new YoController().router)


app.listen(8080);
console.log("Listening on 8080");

Il vous suffit maintenant de lancer la commande:

ts-node app.ts 

et ensuite vous pouvez “appeler” l’url http://localhost:8080/api/yo/message et vous obtiendrez un magnifique:

{"message":"YO!"}

Voilà, vous êtes prêts à goûter aux joies du typage avec Node ;)

Trucs & Astuces

Un dernier pour la route. Si vous utilisez nodemon pour relancer votre serveur à chaque modification de code, dans notre cas avec ts-node, vous l’utiliserez de cette manière:

nodemon --exec ts-node app.ts -- *.ts

Amusez vous bien!