Di /

Introduzione a Express.js con TypeScript: Guida Completa

In questo articolo vedremo cos’è Express.js con TypeScript, perché viene utilizzato, come installarlo e quali sono le sue caratteristiche principali con esempi pratici.

Cos’è Express.js?

Express.js è un framework leggero e potente per Node.js che ti aiuta a costruire applicazioni web e API in modo rapido ed efficiente. Se sei alle prime armi con lo sviluppo backend, immagina Express come un assistente che semplifica la gestione delle richieste e delle risposte del tuo server. Grazie alla sua flessibilità, puoi creare tutto, da semplici siti web a API avanzate per applicazioni complesse. Tra le sue funzionalità troviamo la gestione delle richieste HTTP, middleware, routing e molto altro.

Perché Usarlo?

  • Semplicità: Facile da apprendere e configurare.
  • Velocità: Performance elevate grazie alla sua leggerezza.
  • Flessibilità: Possibilità di estendere le funzionalità tramite middleware.
  • Comunità e supporto: Ampia documentazione e grande ecosistema.
  • Ideale per API REST: Perfetto per creare backend scalabili e modulari.
  • Compatibile con database: Può essere facilmente integrato con MongoDB, MySQL, PostgreSQL e altri database.

Installazione e Configurazione

Per iniziare con Express, devi avere Node.js installato. Poi segui questi passi:

1. Inizializza il progetto

mkdir my-express-app

Spostati nella cartella del progetto:

cd my-express-app

Inizializza un nuovo progetto Node.js con un file package.json preconfigurato:

npm init -y

2. Installa Express e TypeScript

Per utilizzare Express con TypeScript, installiamo i pacchetti necessari:

npm install express @types/express typescript ts-node

Inizializziamo TypeScript con il comando:

npx tsc --init

Questo creerà un file di configurazione per TypeScript.

npm install express

3. Crea un server base con TypeScript

Crea un file index.ts e aggiungi il seguente codice:

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

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

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

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

Avvia il server con:

ts-node index.ts

Ora apri il browser su http://localhost:3000 per vedere il risultato.

Caratteristiche Principali di Express.js

1. Routing

Express permette di gestire facilmente le rotte per le API e le pagine web.

Caso d’uso: API per utenti

Se vogliamo gestire le informazioni di utenti, possiamo creare le seguenti rotte:

app.get('/users', (req: Request, res: Response) => {
    res.json([{ id: 1, name: 'Mario' }, { id: 2, name: 'Luigi' }]);
});

app.get('/users/:id', (req: Request, res: Response) => {
    res.json({ id: req.params.id, name: 'Mario' });
});

Ora se accediamo a http://localhost:3000/users riceveremo un elenco di utenti.

2. Middleware

I middleware sono funzioni intermedie che vengono eseguite durante il ciclo di vita di una richiesta HTTP. Possono modificare la richiesta, la risposta o passare il controllo ad altre funzioni. Express utilizza i middleware per gestire autenticazioni, log, parsing dei dati, gestione degli errori e molto altro.

⚠️ Nota: Per garantire che un middleware venga eseguito, è fondamentale includere next() sia nella funzione middleware, sia negli endpoint che devono essere tracciati. Ad esempio:

app.use((req: Request, res: Response, next: NextFunction) => {
    console.log(`Request: ${req.method} ${req.url}`);
    next();
});

Se vogliamo assicurarci che l’esecuzione passi correttamente al middleware, dobbiamo usare next() anche negli endpoint:

app.get('/users/:id', (req: Request, res: Response, next: NextFunction) => {
    res.json({ id: req.params.id, name: 'Mario' });
    next();
});

Ogni richiesta verrà loggata sulla console del server.

3. Parsing di JSON e dati

Express permette di gestire facilmente i dati in ingresso, ad esempio JSON inviati dal client.

Express permette di gestire facilmente i dati in ingresso.

Caso d’uso: Ricezione di dati JSON da un client

Se un client invia dati JSON a un’API REST, possiamo gestirli con Express.

Se stiamo ricevendo dati JSON in un’API REST, possiamo gestirli così:

app.use(express.json()); // TypeScript lo gestisce automaticamente
app.post('/data', (req: Request, res: Response) => {
    console.log('Dati ricevuti:', req.body);
    res.send(`Received: ${JSON.stringify(req.body)}`);
});

Esempio di richiesta dal client utilizzando fetch in JavaScript:

fetch('http://localhost:3000/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Mario', age: 30 })
})
.then(response => response.text())
.then(data => console.log(data));

Questo ci permette di ricevere e gestire dati JSON inviati da un client o frontend in modo strutturato.

4. Static File Hosting

Puoi esporre file statici come immagini e pagine HTML e CSS. Per farlo, devi creare una cartella public nella directory principale del progetto e posizionare al suo interno i file che vuoi rendere accessibili.

Caso d’uso: Esporre una pagina HTML

Crea una cartella public e aggiungi un file index.html al suo interno:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina Statica</title>
</head>
<body>
    <h1>Benvenuto su Express con TypeScript!</h1>
</body>
</html>

Impostiamo express per indicargli la directory dove si trova il file da esporre:

app.use(express.static('public'));

Ora visitando http://localhost:3000/index.html potrai vedere la pagina HTML.

5. Gestione degli Errori

Express gestisce facilmente gli errori personalizzati. Possiamo anche creare un endpoint che genera intenzionalmente un errore per testare il middleware di gestione degli errori.

Express gestisce facilmente gli errori personalizzati.

Caso d’uso: Endpoint che genera un errore

Possiamo creare un endpoint che simula un errore:

app.get('/error', (req: Request, res: Response) => {
    throw new Error('This is intentional error');
});

Caso d’uso: Middleware per errori globali

app.use((err: Error, req: Request, res: Response) => {
    console.error(err.stack);
    res.status(500).json({ message: 'Qualcosa è andato storto!', error: err.message });
});

Questo middleware intercetta errori e impedisce crash del server.

6. Connessione a un Database

Express non include un ORM, ma può essere facilmente integrato con MongoDB, PostgreSQL e altri database.

Caso d’uso: Connessione a MongoDB con Mongoose

import mongoose from 'mongoose';
mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB Connected'))
    .catch(err => console.error(err));

Ora possiamo definire modelli e gestire il database direttamente nel nostro backend Express.

Alternative a Mongoose

Se preferisci un approccio diverso, puoi considerare altre librerie ORM per la gestione dei database:

  • Sequelize: Ottima scelta per database relazionali come PostgreSQL, MySQL e SQLite.
  • Knex.js: Un query builder flessibile che supporta vari database SQL.

Ad esempio, per configurare Sequelize con un database PostgreSQL:

const { Sequelize } = require('sequelize');
const sequelize = new Sequelize('postgres://user:password@localhost:5432/mydb');

sequelize.authenticate()
    .then(() => console.log('PostgreSQL Connected'))
    .catch(err => console.error('Error connecting to PostgreSQL:', err));

A seconda delle necessità del tuo progetto, puoi scegliere l’ORM o il query builder più adatto.

Conclusione

Questo articolo non è una guida approfondita su Express.js, ma una panoramica generale per farti capire rapidamente il suo valore aggiunto e le sue funzionalità principali. L’obiettivo è darti un’idea chiara di cosa può fare Express e come iniziare a usarlo. Per ulteriori dettagli e approfondimenti, ti consigliamo di consultare le risorse aggiuntive qui sotto.

Risorse aggiuntive

Related Posts

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Torna in alto