Ecrire une application NodeJS avec TypeScript

Par Yahiko

Le 25 juillet 2016, par yahiko

0PARTAGES

1. Introduction

Le langage TypeScript est un surensemble typ� de JavaScript dont la philosophie n'est pas de remplacer JavaScript, mais de se poser en v�ritable compl�ment.

Pour illustrer ce propos, regardons comment utiliser TypeScript pour monter un petit serveur sous NodeJS.

Le code source de ce projet est disponible sur le d�p�t GitHub suivant : https://github.com/yahiko00/SimpleNodeApp

2. Mise en place de l'environnement de travail

Pour cet article, l'environnement de travail que nous allons mettre en place se compose de trois volets : l'organisation des r�pertoires, l'installation et la configuration de TypeScript et l'installation de NodeJS.

2.1. Arborescence

Projet/

build/ ...
node_modules/ ...
src/

server.ts

index.html
tsconfig.json

Le r�pertoire Projet/ constituera la racine du projet o� on trouvera les fichiers index.html, notre page Web, et tsconfig.json que nous verrons plus en d�tail un peu plus loin ; le r�pertoire build/ sera l� o� sera g�n�r� le r�sultat de la compilation de TypeScript ; le r�pertoire node_modules/, g�n�r� par l'utilitaire npm, contiendra le "liant" entre TypeScript et NodeJS ; et le r�pertoire src/ contiendra nos scripts.

2.2. TypeScript

Nous travaillerons avec la version 2.0 de TypeScript qui est actuellement en mode beta au moment o� est �crit cet article. Pour l'installer, voici la ligne de commande :

npm install typescript@beta -g

Par la suite, lorsque cette version 2.0 (ou ult�rieure) sera en production, il suffira de taper cette ligne de commande pour installer TypeScript :

npm install typescript -g

La configuration du compilateur TypeScript peut s'effectuer � diff�rents endroits. Au niveau de l'EDI comme c'est le cas pour Visual Studio par exemple, au niveau de la ligne de commande avec les options de compilation ou au niveau d'un fichier projet qui se nomme par d�faut tsconfig.json. Ce fichier doit se trouver � la racine du projet, dans notre cas Projet/. Un squelette de ce fichier projet peut �tre g�n�r� par le compilateur via la ligne de commande suivante :

tsc --init

Pour les besoins de cet article, voici ce que doit contenir ce fichier :

Code javascript :

S�lectionner tout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// tsconfig.json 
  
{ 
    "compilerOptions": { 
        "noImplicitAny": true, 
        "target": "es5", 
        "module": "commonjs", 
        "outDir": "./build" 
    }, 
    "exclude" : [ 
        "./build", 
        "./node_modules" 
    ] 
}

Dans la section compilerOptions, l'option noImplicitAny indique que les d�clarations non typ�es, comme par exemple let x;, ne seront pas permises.
L'option target permet de d�finir la version ECMAScript que doit g�n�rer TypeScript. Par d�faut, c'est la version ES5.
L'option module permet de d�finir le format des modules � g�rer par le compilateur aussi bien � l'importation qu'� la g�n�ration. Ici nous travaillerons avec le format CommonJS qui est celui de NodeJS, mais les formats AMD, SystemJS, UMD et ES2015 (ES6) sont �galement support�s.
L'option outDir d�finit un r�pertoire vers lequel seront g�n�r�s les r�sultats de la compilation.
La section exclude d�finit les r�pertoires et les fichiers � exclure du projet. Ici, on souhaite ignorer les fichiers se trouvant dans le r�pertoire de sortie build/ et les biblioth�ques rapatri�es via npm qui se retrouveront dans le r�pertoire node_modules/.

Pour avoir la liste exhaustive des options disponibles dans tsconfig.json, on peut simplement afficher l'aide du compilateur via la commande tsc -h, dans la mesure o� tsconfig.json reprend toutes les options du compilateur, � de rares exceptions pr�s. On peut �galement se reporter � la page suivante, m�me si sa mise � jour est souvent en d�calage avec la derni�re version de TypeScript.

2.3. NodeJS

Si ce n'est pas d�j� fait, il convient d'installer NodeJS en le t�l�chargeant au lien suivant : https://nodejs.org/en/download/

Afin que TypeScript puisse correctement exploiter l'API de NodeJS �crite en JavaScript, il est n�cessaire de lui fournir un fichier de d�finitions de types au format .d.ts. Heureusement, pour la plupart des biblioth�ques et frameworks un minimum diffus�s, il existe de tels fichiers de d�finition pr�ts � l'emploi. Gr�ce � la version 2.0, une simple commande npm suffit � rapatrier le fichier de d�finition dont nous avons besoin :

npm install @types/node

Cela t�l�chargera le fichier de d�finition de types .d.ts pour NodeJS dans le r�pertoire standard Projet/node_modules/@types/. Si notre �diteur exploite correctement la fonctionnalit� de d�couverte automatique des fichiers de d�finitions de types fournie par l'API du compilateur, et c'est le cas notamment pour Visual Studio et Visual Studio Code, alors nous n'avons rien d'autre � faire pour utiliser NodeJS dans notre projet TypeScript.

Maintenant que notre environnement de travail est pr�t, voyons � quoi ressemble le code.

3. Serveur NodeJS minimaliste

Notre serveur NodeJS se contentera du minimum. Il traitera n'importe quelle requ�te de la m�me fa�on en affichant le contenu de la page HTML index.html. Ce n'est �videmment que juste pour l'exemple.

Code html :

S�lectionner tout

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html> 
<html> 
    <meta charset="utf-8">  
    <head> 
        <title>Simple nodeJS application in TypeScript</title> 
    </head> 
    <body> 
        <h1>Simple nodeJS application in TypeScript</h1> 
    </body> 
</html>

Voici le programme principal NodeJS :

Code typescript :

S�lectionner tout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// server.ts 
  
import http = require('http'); 
import os = require('os'); 
import fs = require('fs'); 
  
class HttpServer { 
    nodePort: number; 
  
    constructor (port: number) { 
        this.nodePort = port; 
    } 
  
    onRequest(request: http.ServerRequest, response: http.ServerResponse) { 
        console.log('New request: ' + request.url); 
  
        fs.readFile('./index.html', (err: Error, data: Buffer) => { 
            if (err) { 
                throw err; 
            } 
            response.writeHead(200, {'Content-Type': 'text/html'}); 
            response.write(data); 
            response.end(); 
        }); 
    } 
  
    onStart() { 
        let httpServer = http.createServer(this.onRequest); 
        httpServer.listen(this.nodePort); 
        console.log('Server listenning on http://' + os.hostname() + ':' + this.nodePort + '/'); 
    } 
} 
  
let server = new HttpServer(8080).onStart();

On peut constater que le code est compr�hensible au premier coup d��il au point qu'on peut sans probl�me se passer de commentaires. L'organisation en classe permet de conna�tre rapidement les fonctionnalit�s disponibles et le typage permet de savoir ce qui est pass� en param�tre des m�thodes.

L'importation des modules externes est fait avec la syntaxe TypeScript import variable = require('module') d'avant la norme ES2015, qui sera simplement transpil�e au format CommonJS en var variable = require('module').

La classe HttpServer poss�de un constructeur qui initialise l'attribut nodePort qui sera le port d'�coute du serveur Node.

Cette classe poss�de deux m�thodes : onRequest() et onStart(). La m�thode onRequest() a pour t�che d'envoyer au client le contenu du fichier HTML index.html, et ce de fa�on inconditionnelle, sans tenir compte du type de requ�te re�ue.

La m�thode onStart() quant � elle lance le serveur sur le port d�fini via le constructeur. Elle est d'ailleurs appel�e juste apr�s l'instanciation de la classe HttpServer, � la derni�re ligne.

Apr�s avoir compil� avec la commande tsc, il ne reste plus qu'� lancer le programme avec la commande suivante � la racine du projet :

node ./build/server.js

Et sur notre navigateur, � l'adresse suivante, http://localhost:8080/, nous devrions voir appara�tre notre page index.html.

4. Conclusion

Voi� ! Comme on vient de le voir, utiliser NodeJS avec TypeScript est tr�s simple. Tant dans la mise en place de l'environnement que dans l'�criture du code. Bien entendu, l'exemple que nous venons de voir peut largement �tre am�lior�, mais la fa�on d'utiliser TypeScript avec NodeJS ne devrait pas fondamentalement changer.

Si vous avez trouv� ce billet utile, n'h�sitez pas � le partager.

Bon d�veloppement !

Vous avez lu gratuitement 0 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer � vous proposer des publications.

Une erreur dans cette actualit� ? Signalez-nous-la !

Votre nom : Votre e-mail :

D�crivez l'erreur que vous souhaitez porter � notre connaissance :

Identifiez-vous

Cr�er un compte

Ecrire une application NodeJS avec TypeScript

Par Yahiko

Identifiant
Mot de passe

Mot de passe oubli� ?

Identifiez-vous

Cr�er un compte

Ecrire une application NodeJS avec TypeScript Par Yahiko

Ecrire une application NodeJS avec TypeScript

Par Yahiko