Node.js › Installer et Configurer TypeScript

Initialisation du projet

Initialisation du projet

Commencez par créer un dossier pour votre projet puis initialisez-le avec npm init :

npm init -y

Installation des dépendances

Pour travailler avec TypeScript dans Node.js, vous devez installer les paquets suivants en tant que dépendances de développement :

• typescript : Ajoute le support de TypeScript au projet.
• ts-node : Permet d’exécuter du TypeScript directement sans compilation préalable.
• @types/node : Fournit les types TypeScript pour Node.js. Il est essentiel pour profiter des autocomplétions et de la vérification des types en Node.js.

npm install --save-dev typescript ts-node @types/node

Création du fichier de config TS

Créez un fichier 📄 tsconfig.json à la racine de votre projet avec cette configuration :

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Ce fichier configure TypeScript de la manière suivante :

• "target": "ES6" : Compile en JavaScript ES6.
• "module": "commonjs" : Utilise le système de modules CommonJS (nécessaire pour Node.js).
• "esModuleInterop": true : Permet l’importation des modules ES (import from) même si CommonJS (require()) est défini par défaut.
• "strict": true : Active les vérifications strictes de TypeScript.
• "skipLibCheck": true : Ignore la vérification des types dans les fichiers de bibliothèque pour accélérer la compilation.
• "forceConsistentCasingInFileNames": true : Empêche les incohérences de casse dans les fichiers importés.
• "outDir": "./dist" : Stocke les fichiers compilés dans le dossier dist.
• "include": ["src/**/*.ts"] : Prend en compte tous les fichiers .ts dans 📂 src.
• "exclude": ["node_modules"] : Ignore le dossier node_modules.

TypeScript et Node : en pratique

Typage du code

Créez par exemple un serveur Node dans le fichier 📄 src/index.ts et ajoutez le code suivant :

import * as http from "http";

const hostname: string = '127.0.0.1';
const port: number = 3000;

const server: http.Server = http.createServer((req: http.IncomingMessage, res: http.ServerResponse) => {
	res.statusCode = 200;
	res.setHeader('Content-Type', 'text/plain');
	res.end('Hello World');
});

server.listen(port, hostname, () => {
	console.log(`Serveur démarré sur http://${hostname}:${port}`);
});

TypeScript va désormais vous permettre de tirer parti de ses fonctionnalités et de veiller à la cohérence du typage.

Script d’exécution avec TS

Il est temps de créer un script permettant d’exécuter le projet en mode développement avec ts-node :

{
  // ...
  "scripts": {
    "dev": "ts-node src/index.ts"
  }
}

La commande ts-node vient remplacer la commande node.

Lancement du serveur

Il est désormais possible de lancer notre serveur 📄 index.ts avec la commande :

npm run dev

Comment redémarrer mon serveur en temps réel ?

Vous avez probablement constaté que, tout comme la commande node, ts-node ne prend pas en compte les modifications en temps réel et ne relance pas le serveur en fonction.

Nous allons alors utiliser le paquet nodemon que vous pouvez dès lors installer en dépendance de développement avec la commande :

npm install --save-dev nodemon

Créez désormais un fichier de configuration 📄 nodemon.json à la racine de votre projet contenant :

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node src/index.ts"
}

• watch: Liste des répertoires à surveiller. Ici, Nodemon surveille le dossier 📂 src.
• ext: Extensions de fichiers à surveiller. Ici, seuls les modifications sur les fichiers TypeScript (.ts) déclencheront un redémarrage.
• exec: Commande exécutée lorsqu’un changement est détecté. Ici, Nodemon exécute ts-node src/index.ts.

On peut désormais modifier la commande npm run dev de notre 📄package.json :

{
  // ...
  "scripts": {
    "dev": "nodemon"
  }
}

La commande npm run dev lancera notre serveur avec nodemon qui surveillera les fichiers .ts et redémarrera le serveur automatiquement à chaque modification.

Comment compiler du TypeScript en production ?

A la différence du mode développement où le code source subit de nombreuses modifications, en production, la transpilation du TypeScript se fait une seule fois, en générant par exemple le code JS dans un dossier 📂 dist.

Pour cela, on exécute la commande tsc (issue du paquet typescript) et non ts-node, qui est utile uniquement en dev :

npx tsc

Cette commande va :

1. Lire votre 📄 tsconfig.json
2. Compiler les fichiers .ts de 📂 src
3. Générer les fichiers .js correspondants dans 📂 dist

Ajoutons ensuite cela dans un script défini dans notre 📄 package.json :

"scripts": {
  // ...
  "build": "tsc"
}

Il est désormais possible de transpiler votre code avec la commande :

npm run build

Une fois la transpilation terminée, vous pouvez exécuter votre projet avec :

node dist/index.js