Comment créer un serveur Express avec Typescript

Initialisation et téléchargement des dépendances

Création d’un serveur express :

npm init

Mettre le nom, la version et le point d’entrée. Dans notre cas laisse index.js

Vu que l’on développe en ts il faudra installer typescript pour cela il faudra lancer la commande

pnpm i typescript --save-dev

(pnpm est comme npm mais si on a deja des dépendances existantes il les récupérera de nos autre projet plutôt que de les télécharger)

Créer node module et install typescript

pnpm i @types/node --save-dev

→ on obtient tsconfig.json

Dans notre package.json on dispose du script suivant :

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  }

Ce script permet de lancer lancer l’application. Nous allons créer un script de dev en modifiant ce script de la manière suivante :

"scripts": {
    "dev": "nodemon src/index.ts",
}

L’utilisation de nodemon src/index.ts permet de relancer le serveur lorsque que l’on modifie quelque chose dans notre code. Cela étant dit il nous faut installer nodemon via la commande :

pnpm i nodemon

Vu que le fichier index.ts n’existe pas nous allons le créer dans le dossier src. Puis une fois ce fichier créer, il ne nous reste plus qu’a utiliser la commande

pnpm dev

Le serveur est en écoute et recharche a chaque modification. Vu que le but est de créer une application sous express, il nous faudra installer express :

pnpm i express dotenv

Une fois cela fait on peut commencer a faire notre serveur mais vu que nous développons en typescript il faudra encore installer les types d’express : https://blog.logrocket.com/how-to-set-up-node-typescript-express/

pnpm i -D @types/express

Premières lignes de code pour notre serveur :

import express from ‘express’;

const app : Express = express();

app.listen(3000);

console.log(‘application start on port 3000, available at http://localhost:3000’);

Si on utilise pnpm dev cela lance le serveur sur l’adresse suivante : http://localhost:3000

Pour éviter de laisser des informations importantes dans notre code, on utilisera le fichier .env qui nous permet de mettre en place des variables d’environnement. Ce fichier ne sera pas dans notre repo GitLab.

Il faut donc créer un fichier .env puis il faudra importer la librairie dotenv avec ce code :

import dotenv from 'dotenv'

Pour le moment on ajoute uniquement la variable port de cette façon :

PORT=3000

Et plutôt que d’avoir notre port en dur dans notre code :

app.listen(3000); //code en dure dans notre code

On utilisera notre librairie .env qui parse notre fichier .env pour nous mettre les variables disponibles grâce au code suivant juste après nos imports :

dotenv.config();

Maintenant on peut remplacer notre port 3000 par process.env.PORT ce qui nous donne :

app.listen(process.env.PORT);
console.log(
  `application start on port ${process.env.PORT}, available at http://localhost:${process.env.PORT}`
);

Ne pas oublier de relancer le serveur lorsque l’on utilise une nouvelle variable d’environnement.

Ajout des points d’API

Il existe différents points d’API : GET/POST/PATCH/DELETE

On commence avec un GET avec le code suivant :

app.get("/", (req: Request, res: Response) => {
  res.send("Hello World");
});

La différence avec le javascript est qu’en typescript il faut typer les variable c’est pour cela qu’on utilise

req: Request, res: Response

Lorsqu’on va sur l’url http://localhost:3000 la page affiche bien “Hello World” grâce a res.send

On peut aussi voir un exemple avec un GET et un fichier datas.ts contenant une liste de joueurs League Of Legends et leurs spécificités : summonerName, level, rank, main

Il nous faut tout d’abord importer ce fichier grâce à :

import players from "./datas";

(Si on fait)

Pour vérifier que le fichier est importé, on peut faire un console.log de player. Dans ce cas nous obtenons bien notre fichier en retour dans la console.

Puis nous allons faire un second GET nous permettant, via notre http://localhost:3000 d’avoir en retour un fichier .json contenant tous les players et leurs attributs.

app.get("/:name", (req: Request, res: Response) => {
  const [player] = players.filter((el) => el.summonerName === req.params.name);
  if (player) res.send(player);
  else res.send("no player found");
});

On utilise “:/name” en tant que route dynamique. Cela signifie que cette route correspondra à n’importe quelle URL qui a un segment après le “/”.

Puis on filtre le tableau players pour trouver une correspondance entre summonerName et le nom qu’on a mis a la suite de notre /

Si un player a été trouvé, on utilise res.send pour retourner le player et ses caratéristiques au format .json

Sinon on renverra le message suivant : “no player found”

Exploitation et compilation

Pour que notre code soit exploitable par un navigateur, il faudra le compiler pour que notre index.ts se transforme en index.js. Pour cela, on va faire un autre script dans notre package.json qu’on appellera build. On va donc changer notre script de la manière suivante :

  "scripts": {
    "dev": "nodemon src/index.ts", 
    "build": "npx tsc"
   }

Lorsqu’on utilise la commande suivante :

pnpm build

la commande npx tsc est lancé et un dossier build est créer dans lequel on retrouve le fichier index.js qui est une version javascript de notre index.ts (retrait de tous les typages)

On effectue un dernier changement dans nos script du fichier package.json :

"scripts": {
    "start:dev": "nodemon src/index.ts",
    "start:prod": "npx tsc && node build/index.js",
    "build": "npx tsc"
  }

start:dev → script qui recompile à chaque modification

start:prod → version exécuté en node et exécute du javascript

build → compile le typescript en javascript