Comment mettre en place un projet Node avec Typescript

Introduction

Node est un environnement d’exécution qui permet d’écrire du Javascript côté serveur. Il a été largement adopté depuis sa publication en 2011.  L’écriture du JavaScript côté serveur peut être difficile car la base de code se développe en raison de la nature du langage JavaScript ; dynamique et faiblement dactylographié.

Les développeurs qui utilisent JavaScript à partir d’autres langues se plaignent souvent de l’absence de caractères statiques forts, mais c’est là que TypeScript intervient, pour combler cette lacune.

TypeScript est un super-ensemble de JavaScript typé (facultatif) qui peut aider à construire et à gérer des projets JavaScript à grande échelle. Il peut être considéré comme du JavaScript avec des caractéristiques supplémentaires comme un fort typage statique, une compilation et une programmation orientée objet.

Voici quelques avantages de l’utilisation de TypeScript :

1. Typage statique optionnel.
2. Inférence de type.
3. Capacité à utiliser des interfaces.

Dans ce tutoriel, vous allez mettre en place un projet Node avec TypeScript. Vous créerez une application Express en utilisant le langage TypeScript et la transposerez dans un code JavaScript soigné et fiable.

Conditions préalables

Avant de commencer ce guide, vous devez avoir installé Node.js sur votre machine.  Vous pouvez y parvenir en suivant le guide Comment installer Node.js et créer un environnement de développement local guide pour votre système d’exploitation.

Étape 1 - Initialisation d’un projet npm

Pour commencer, créez un nouveau dossier nommé node_project et accédez à ce répertoire.

mkdir node_project
cd node_project

Ensuite, initialisez-le en tant que projet npm :

npm init

Après avoir lancé npm init, vous devrez fournir à npm des informations sur votre projet.  Si vous préférez laisser le npm prendre des valeurs par défaut raisonnables, vous pouvez ajouter le drapeau y pour ignorer les invites d’informations supplémentaires :

npm init -y

Maintenant que votre espace de projet est mis en place, vous êtes prêt à passer à l’installation des dépendances nécessaires.

Étape 2 — Installer des dépendances

Avec un projet npm nu initialisé, l’étape suivante consiste à installer les dépendances nécessaires au lancement de TypeScript.

Exécutez les commandes suivantes depuis le répertoire de votre projet pour installer les dépendances :

npm install -D typescript@3.3.3
npm install -D tslint@5.12.1

Le drapeau -D est le raccourci pour --save-dev.  Vous pouvez en savoir plus sur ce drapeau dans la documentation du npmjs.

Il est maintenant temps d’installer le framework Express :

npm install -S express@4.16.4
npm install -D @types/express@4.16.1

La deuxième commande installe Express** pour la prise en charge de TypeScript. Les types en TypeScript sont des fichiers, normalement avec une extension de .d.ts. Les fichiers sont utilisés pour fournir des informations de type sur une API, dans ce cas le framework Express.

Ce paquet est nécessaire car TypeScript et Express sont des paquets indépendants. Sans le paquet @types/express, il n’y a aucun moyen pour TypeScript de connaître les types de classes Express.

Étape 3 - Configurer TypeScript

Dans cette section, vous allez paramétrer TypeScript et configurer le linting pour TypeScript. TypeScript utilise un fichier appelé tsconfig.json pour configurer les options du compilateur pour un projet. Créez un fichier tsconfig.json dans le root du répertoire du projet et collez-le dans le snippet suivant :

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

Passons en revue certaines des clés du snippet JSON ci-dessus :

• module: Spécifie la méthode de génération du code du module. Node utilise commonjs.
• target: Spécifie le niveau du langage de sortie.
• moduleResolution: Cela aide le compilateur à déterminer à quoi se réfère une importation. La valeur node imite le mécanisme de résolution des modules de Node.
• outDir : Il s’agit de l’emplacement où les fichiers .js sont produits après la transpilation.  Dans ce tutoriel, vous le sauvegarderez sous dist.

Une alternative à la création et au remplissage manuels du fichier tsconfig.json consiste à exécuter la commande suivante :

tsc --init

Cette commande va générer un fichier tsconfig.json bien commenté.

Pour en savoir plus sur les options de valeurs clés disponibles, la documentation officielle de TypeScript offre des explications sur chaque option.

Vous pouvez maintenant configurer le linting TypeScript pour le projet. Dans un terminal fonctionnant au root du répertoire de votre projet, que ce tutoriel a établi comme node_project, exécutez la commande suivante pour générer un fichier tslint.json :

./node_modules/.bin/tslint --init

Ouvrez le nouveau site tslint.json et ajoutez la règle non-console en conséquence :

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "no-console": false
  },
  "rulesDirectory": []
}

Par défaut, le linter TypeScript empêche l’utilisation du débogage par console d’où la nécessité d’indiquer explicitement au linter de révoquer la règle par défaut no-console.

Étape 4 - Mise à jour du fichier package.json

À ce stade du tutoriel, vous pouvez soit exécuter individuellement des fonctions dans le terminal, soit créer un script npm pour les exécuter.

Dans cette étape, vous créerez un script start qui compilera et transpilera le code TypeScript, puis lancera l’application .js résultante.

Ouvrez le fichier package.json et mettez-le à jour comme il se doit :

{
  "name": "node-with-ts",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.16.1",
    "tslint": "^5.12.1",
    "typescript": "^3.3.3"
  },
  "dependencies": {
    "express": "^4.16.4"
  }
}

Dans le snippet ci-dessus, vous avez mis à jour le chemin principal et ajouté la commande start à la section scripts. En regardant la commande start, vous verrez que la commande tsc est d’abord exécutée, puis la commande node.  Cette opération permet de compiler et d’exécuter la sortie générée avec node.

La commande tsc demande à TypeScript de compiler l’application et de placer la sortie .js générée dans le répertoire spécifié outDir tel qu’il est défini dans le fichier tsconfig.json.

Étape 5 - Créer et faire fonctionner un serveur Express de base

Maintenant que TypeScript et son linter sont configurés, il est temps de construire un serveur Node Express.

Tout d’abord, créez un dossier src dans le root du répertoire de votre projet :

mkdir src

Créez ensuite un fichier nommé app.ts dans celui-ci :

touch src/app.ts

À ce stade, la structure du dossier devrait ressembler à ceci :

├── node_modules/
├── src/
  ├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json

Ouvrez le fichier app.ts avec un éditeur de texte de votre choix et collez le code suivant :

import express from 'express';

const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});

Le code ci-dessus crée un serveur Node qui écoute les requêtes sur le port 3000.  Lancez l’application en utilisant la commande suivante :

npm start

S’il fonctionne correctement, un message sera enregistré sur le terminal :

Output
server is listening on 3000

Maintenant, vous pouvez visiter http://localhost:3000 dans votre navigateur et vous devriez voir le message :

Output
The sedulous hyena ate the antelope!

Ouvrez le fichier dist/app.js et vous trouverez la version transposée du code TypeScript :

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = express_1.default();
const port = 3000;
app.get('/', (req, res) => {
    res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
    if (err) {
        return console.error(err);
    }
    return console.log(`server is listening on ${port}`);
});

//# sourceMappingURL=app.js.map

À ce stade, vous avez configuré avec succès votre projet Node pour utiliser TypeScript.

Conclusion

Dans ce tutoriel, vous avez appris pourquoi TypeScript est utile pour écrire un code JavaScript fiable.  Vous avez également découvert certains des avantages à travailler avec TypeScript.

Enfin, vous avez mis en place un projet Node en utilisant le framework Express, mais vous avez compilé et exécuté le projet en utilisant TypeScript.