Comment configurer un projet Node.js avec TypeScript et Express

La configuration d’un projet Node.js avec TypeScript et Express donne à votre application une structure, une évolutivité et une clarté. Dans ce guide, nous allons vous accompagner étape par étape dans l’initialisation de votre projet Node.js, l’intégration de TypeScript, Express, et l’ajout d’outils essentiels pour les développeurs.

Étape 1 : Initialiser votre projet Node.js

Créez votre dossier de projet et initialisez npm :

mkdir my-node-project
cd my-node-project
npm init -y

Cela génère un fichier package.json. Ensuite, créez un fichier .gitignore pour exclure les modules node et les fichiers de build :

node_modules
dist

Étape 2 : Ajouter TypeScript

Installez TypeScript et les dépendances associées :

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

Créez votre configuration TypeScript avec :

npx tsc --init

Ajustez votre tsconfig.json pour qu’il ressemble à :

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Créez le dossier src pour votre code :

mkdir src

Étape 3 : Configurer Express

Installez Express et ses types :

npm install express
npm install --save-dev @types/express

Créez un serveur de base dans src/index.ts :

import express, { Application, Request, Response } from 'express';

const app: Application = express();
const PORT = 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript + Express!');
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Exécutez-le en utilisant :

npx ts-node src/index.ts

Étape 4 : Configuration d’ESLint et Prettier

Installez ESLint, Prettier et les plugins :

npm install --save-dev eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-config-prettier

Configurez ESLint avec .eslintrc.json :

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "env": { "node": true, "es6": true, "jest": true }
}

Créez .prettierrc.json :

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

Mettez à jour vos scripts dans package.json :

"scripts": {
  "lint": "eslint 'src/**/*.{ts,js}'",
  "format": "prettier --write ."
}

Étape 5 : Jest pour les tests

Ajoutez Jest et le support TypeScript :

npm install --save-dev jest ts-jest @types/jest
npx ts-jest config:init

Écrivez un test simple src/__tests__/sum.test.ts :

import { sum } from '../sum';

test('sum works', () => {
  expect(sum(1, 2)).toBe(3);
});

Avec le module correspondant :

export function sum(a: number, b: number): number {
  return a + b;
}

Mettez à jour package.json :

"scripts": {
  "test": "jest --watch"
}

Étape 6 : Nodemon pour le développement

Installez et configurez nodemon :

npm install --save-dev nodemon

Ajoutez nodemon.json :

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

Script pour l’environnement de développement dans package.json :

"scripts": {
  "dev": "nodemon"
}

Exécutez npm run dev pour recharger automatiquement votre serveur pendant le développement.

Bonnes pratiques

• Utilisez des dossiers séparés (src pour le code, dist pour les sorties de build).
• Ne commitez que les fichiers source, pas le code compilé (dist) ou les modules node.
• Exécutez fréquemment npm run lint et npm run format.
• Compilez le code (npm run build) avant le déploiement, puis démarrez avec npm start.

FAQ