TypeScript è un linguaggio di programmazione fortemente tipizzato che estende le funzionalità di JavaScript. Offre una serie di funzionalità per aiutare a sviluppare applicazioni scalabili con Node.js ed Express.

Uno dei vantaggi principali di TypeScript rispetto a JavaScript è che fornisce classi di tipi, rendendo più facile la scrittura di codice più prevedibile e manutenibile. Inoltre, TypeScript offre la sicurezza dei tipi, assicurando che il codice sia privo di errori di runtime e rendendo più facile l’individuazione dei difetti nelle prime fasi dello sviluppo. Il linguaggio è dotato anche di strumenti di refactoring e di autocompletamento, che migliorano l’esperienza degli sviluppatori.

Inoltre, Node.js ed Express offrono prestazioni eccellenti per applicazioni di qualsiasi dimensione. L’uso delle classi in TypeScript aiuta anche l’organizzazione e la struttura, favorendo ulteriormente la scalabilità. Con questi strumenti, è possibile costruire applicazioni robuste e scalabili per gestire una domanda crescente.

Questo articolo mostra come configurare un’applicazione Express utilizzando TypeScript con un singolo endpoint. Poi spiega come distribuire l’applicazione sull’hosting di Kinsta.

Come creare un server Express

Per seguire questo tutorial, assicuratevi di avere installato Node.js e npm sul computer. Per configurare un server Express:

  1. Create una directory utilizzando il codice sottostante: 
    mkdir sample_app && cd sample_app
  2. Inizializzate un’applicazione Node.js nella directory eseguendo questo comando: 
    npm init -y

    Il flag -y del comando accetta le richieste predefinite per la creazione di un file package.json popolato con il seguente codice:

    { 
  "name": "sample_app",
  "version": "1.0.0",
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": "echo "Error: no test specified" && exit 1" 
  }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC" 
}
  3. Successivamente, installate express per aggiungere le funzionalità essenziali e dotenv per la gestione delle variabili d’ambiente nella directory che avete appena creato eseguendo questo comando: 
    npm i express dotenv
  4. Create un file .env nella root della cartella sample_app e popolatelo con la variabile seguente. 
    PORT=3000
  5. Create un’applicazione express che risponda con un testo Hello World quando gli utenti visitano http://localhost:3000. 
    const express = require("express");
const dotenv = require("dotenv");

// configures dotenv to work in your application
dotenv.config();
const app = express();

const PORT = process.env.PORT;

app.get("/", (request, response) => { 
  response.status(200).send("Hello World");
}); 

app.listen(PORT, () => { 
  console.log("Server running at PORT: ", PORT); 
}).on("error", (error) => {
  // gracefully handle error
  throw new Error(error.message);
})

    dotenv.config() popola l’ambiente di processo dell’applicazione Node (process.env) con le variabili definite in un file .env.

  6. Avviate la applicazione Node.js eseguendo questo comando: 
    node index.js

    Verificate se l’applicazione funziona visitando http://localhost:3000 sul browser. Dovreste ottenere una risposta simile a questa.

    Server Hello World con Express
    Hello World su http:localhost:3000.

Abilitare TypeScript in un’applicazione Express

Seguite i passi qui in basso per utilizzare TypeScript in un’applicazione Express:

  1. Installate TypeScript eseguendo questo comando: 
    npm i -D typescript

    L’opzione -D permette a npm di installare i pacchetti come dipendenze dev. Potete utilizzare i pacchetti installati con questa opzione nella fase di sviluppo.

  2. Uno dei punti di forza della comunità di TypeScript è il repository DefinitelyTyped su GitHub. In esso è conservata la documentazione delle definizioni dei tipi per vari pacchetti npm. Gli utenti possono integrare rapidamente i pacchetti npm nei loro progetti senza preoccuparsi delle difficoltà legate ai tipi, installando solo la definizione dei tipi per quei pacchetti con npm. DefinitelyTyped è uno strumento indispensabile per gli sviluppatori di TypeScript. Consente di scrivere codice più pulito ed efficiente e di ridurre la probabilità di errori. Potete installare le definizioni dei tipi di express e dotenv eseguendo questo comando: 
    npm install -D @types/express @types/dotenv
  3. Per inizializzare TypeScript, eseguite questo comando. 
    npx tsc --init

    Il file tsconfig.json generato indica la directory principale dell’applicazione TypeScript. Fornisce opzioni di configurazione per definire il funzionamento dei compilatori di TypeScript. Include una serie di opzioni di config disabilitate o abilitate, con commenti che spiegano ogni opzione.

  4. Aggiungete una proprietà outDir all’oggetto config per definire la directory di output. 
    {
  "compilerOptions": {
    // …
    "outDir": "./dist"
    // …
  }
}

Come creare un server TypeScript

Per creare un server TypeScript, cambiate l’estensione .js in .ts e aggiornate il codice con queste definizioni di tipo:

import express, { Request, Response } from "express";
import dotenv from "dotenv";

// configures dotenv to work in your application
dotenv.config();
const app = express();

const PORT = process.env.PORT;

app.get("/", (request: Request, response: Response) => { 
  response.status(200).send("Hello World");
}); 

app.listen(PORT, () => { 
  console.log("Server running at PORT: ", PORT); 
}).on("error", (error) => {
  // gracefully handle error
  throw new Error(error.message);
});

Per utilizzare il pacchetto compilatore e compilare il file TypeScript in JavaScript, eseguite il comando seguente nella directory principale dell’applicazione.

npx tsc

Quindi avviate l’applicazione eseguendo il comando.

node dist/index.js

Visitando http://localhost:3000 sul browser dovreste ottenere una risposta del tipo “Hello World”.

Come distribuire il server TypeScript su Kinsta

Ora siete pronti a distribuire l’applicazione sul web. Potete distribuire l’applicazione su molte piattaforme, tra cui l’Hosting di Applicazioni di Kinsta.

Prima di inviare l’applicazione a un repository Git, non è consigliabile utilizzare TypeScript e fare il commit del file JavaScript compilato su Git. Includete uno script start nel file package.json.

{
  // …
  "script": {
    "start": "npx tsc && node dist/index.js",
  }
  // …	
}

Inoltre, create un file .gitignore nella directory principale dell’applicazione e includete node_modules e .env per evitare che questi file vengano inviati al provider Git.

Una volta impostato il repository, seguite i seguenti passi per distribuire l’applicazione su Kinsta:

  1. Accedete o create un account per visualizzare la dashboard MyKinsta.
  2. Autorizzate Kinsta con il provider Git.
  3. Cliccate su Applicazioni nella barra laterale di sinistra e poi su Aggiungi applicazione.
  4. Selezionate il repository e il branch da cui desiderate effettuare il deploy.
  5. Assegnate un nome unico all’applicazione e scegliete la posizione del Data Center.
  6. Usate tutte le configurazioni predefinite. MyKinsta utilizza npm start come punto di ingresso per distribuire l’applicazione. Se volete utilizzare un altro comando, potete modificare il processo di runtime in MyKinsta.
  7. Cliccate su Crea applicazione.

Dopo la distribuzione, MyKinsta fornisce un URL per accedere pubblicamente alla distribuzione dell’applicazione. Potete visitare la pagina per verificare che mostri la scritta “Hello World”.

Riepilogo

Questa guida ha mostrato come sviluppare e configurare un’applicazione Express utilizzando TypeScript e distribuire l’applicazione con Kinsta. TypeScript offre funzionalità aggiuntive rispetto a JavaScript, tra cui classi di tipi, sicurezza dei tipi, strumenti di refactoring e completamento automatico, per aiutarvi a creare applicazioni scalabili e a individuare gli errori durante lo sviluppo.

Kinsta vi aiuta a distribuire le vostre applicazioni in modo veloce con una maggiore sicurezza e stabilità. Con i 21 data center che offrono le macchine C2 di Google, che funziona sulla rete di livello superiore di Google.

Avete già utilizzato TypeScript in passato? Cosa ne pensate del suo utilizzo con un server Express?

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).