Express avec TypeScript : guide complet

Express avec TypeScript : guide complet

Pourquoi Express avec TypeScript : guide complet ?

Dans le monde du développement web, Express est un framework populaire et flexible pour construire des applications serveur en JavaScript. L'intégration de TypeScript (TS) dans Express permet de bénéficier d'un meilleur support statique pour le code, une meilleure lisibilité et maintenabilité, ainsi que la possibilité d'utiliser les avantages des types de données modernes.

Un cas concret : Imaginez que vous travaillez sur un projet de gestionnaire de tâches. Vous avez besoin d'une application qui permet de créer, lire, mettre à jour et supprimer des tâches, tout en gérant les utilisateurs et leurs permissions.

Prerequis

• Connaissances de base en JavaScript
• Node.js (version 14 ou plus)
• npm ou yarn pour la gestion des dépendances
• Visual Studio Code ou un autre éditeur de code moderne

Installation d'Express et TypeScript :

npm init -y
npm install express --save
npm install typescript @types/node @types/express --save-dev
npx tsc --init

Concepts fondamentaux

1. Types et interfaces

Les types en TypeScript permettent de définir les structures des objets. Les interfaces peuvent être utilisées pour décrire la forme d'un objet.

// Définition d'une interface utilisateur
interface User {
    id: number;
    username: string;
    email: string;
}

const user: User = {
    id: 1,
    username: "johndoe",
    email: "john@example.com"
};

2. Middleware

Les middleware sont des fonctions qui s'exécutent entre la réception de la requête et sa réponse. Ils peuvent être utilisés pour authentifier les utilisateurs, traiter les données du corps de la requête, etc.

// Middleware d'authentification simple
const authenticate: express.RequestHandler = (req, res, next) => {
    const token = req.headers['authorization'];
    if (token && token.startsWith('Bearer ')) {
        // Vérifiez le token et passez à la suite
        next();
    } else {
        res.status(401).send("Unauthorized");
    }
};

3. Routage

Express utilise une approche de routage basée sur des méthodes HTTP pour définir les routes.

// Définition d'une route GET
app.get('/users', authenticate, (req, res) => {
    // Retourne tous les utilisateurs
    res.json(users);
});

Mise en pratique : projet fil rouge

Nous allons construire un gestionnaire de tâches simple avec Express et TypeScript. Le projet comprendra les fonctionnalités suivantes :

1. Créer une nouvelle tâche
2. Lire toutes les tâches
3. Mettre à jour une tâche existante
4. Supprimer une tâche

Étape 1 : Configurer le projet

Créez un nouveau fichier app.ts et configurez le serveur Express.

// app.ts
import express from 'express';
import bodyParser from 'body-parser';

const app = express();
const port = 3000;

// Middleware de parsing du corps de la requête
app.use(bodyParser.json());

// Route pour lire toutes les tâches
app.get('/tasks', (req, res) => {
    // Renvoie une liste fictive de tâches
    const tasks: Task[] = [
        { id: 1, title: 'Task 1', completed: false },
        { id: 2, title: 'Task 2', completed: true }
    ];
    res.json(tasks);
});

// Route pour créer une nouvelle tâche
app.post('/tasks', (req, res) => {
    const newTask = req.body as Task;
    tasks.push(newTask);
    res.status(201).json(newTask);
});

// Définition de l'interface Task
interface Task {
    id: number;
    title: string;
    completed: boolean;
}

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

Étape 2 : Ajouter des routes pour mettre à jour et supprimer une tâche

// app.ts (suite)
// Route pour mettre à jour une tâche existante
app.put('/tasks/:id', (req, res) => {
    const taskId = parseInt(req.params.id);
    const updatedTask = req.body as Task;
    tasks = tasks.map(task => task.id === taskId ? { ...task, ...updatedTask } : task);
    res.json(updatedTask);
});

// Route pour supprimer une tâche
app.delete('/tasks/:id', (req, res) => {
    const taskId = parseInt(req.params.id);
    tasks = tasks.filter(task => task.id !== taskId);
    res.status(204).send();
});

Étape 3 : Installer et exécuter le serveur

tsc app.ts
node dist/app.js

Erreurs frequentes et debugging

1. Erreur : "Cannot find module 'express'"

   // code_incorrect
   import express from 'express';
   
   // code_correct
   import express from 'express';
   

2. Erreur : "Type error: Property 'title' does not exist on type 'unknown'."

   // code_incorrect
   const newTask = req.body;
   
   // code_correct
   const newTask = req.body as Task;
   

3. Erreur : "Server error (listen EADDRINUSE: address already in use)"

   # code_incorrect
   npm start
   
   # code_correct
   kill $(lsof -t -i :3000)
   npm start
   

Pour aller plus loin

1. Authentification avec JWT : Découvrez comment ajouter une authentification robuste à votre application en utilisant des tokens JSON Web.
2. Tests unitaires : Intégrez des tests unitaires pour vous assurer que chaque fonctionnalité fonctionne correctement avant de passer à l'intégration.
3. Gestion des erreurs : Améliorez la gestion des erreurs en utilisant des middleware d'erreur spécifiques.

Défi pratique :

Créez une application API REST complète pour un blog en utilisant Express et TypeScript. Incluez les fonctionnalités suivantes :

• Lire tous les articles
• Créer un nouvel article
• Mettre à jour un article existant
• Supprimer un article