TypeScript est un langage de programmation fortement typé qui étend les capacités de JavaScript. Il offre une gamme de fonctionnalités pour vous aider à développer des applications évolutives avec Node.js et Express.

L’un des principaux avantages de TypeScript par rapport à JavaScript est qu’il fournit des classes de types, ce qui facilite l’écriture d’un code plus prévisible et plus facile à maintenir. En outre, TypeScript offre la sécurité des types, ce qui garantit que votre code est exempt d’erreurs d’exécution et facilite la détection des failles dès le début du développement. Le langage est également doté d’outils de refactorisation et d’autocomplétion, qui améliorent l’expérience des développeurs.

En outre, Node.js et Express offrent d’excellentes performances pour les applications de toute taille. L’utilisation de classes dans TypeScript facilite l’organisation et la structure, ce qui contribue à l’évolutivité. Grâce à ces outils, vous pouvez créer des applications robustes et évolutives pour répondre à une demande croissante.

Cet article présente la mise en place d’une application Express à l’aide de TypeScript avec un seul point de terminaison. Il explique ensuite comment déployer votre application sur l ‘hébergement d’applications de Kinsta.

Comment créer un serveur Express

Pour suivre ce tutoriel, assurez-vous que Node.js et npm sont installés sur votre ordinateur. Pour configurer un serveur Express :

  1. Créez un répertoire en utilisant le code ci-dessous : 
    mkdir sample_app && cd sample_app
  2. Initialisez une application Node.js dans le répertoire en exécutant cette commande : 
    npm init -y

    Le drapeau -y de la commande accepte les invites par défaut lors de la création d’un fichier package.json rempli avec le code suivant :

    { 
  "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. Ensuite, installez express pour ajouter des fonctionnalités essentielles et dotenv pour la gestion des variables d’environnement dans le répertoire que vous venez de créer en exécutant cette commande : 
    npm i express dotenv
  4. Créez un fichier .env à la racine du répertoire sample_app et remplissez-le avec la variable ci-dessous. 
    PORT=3000
  5. Créez une application express qui répond par un texte Hello World lorsque les utilisateurs visitent 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() node.js remplit l’environnement du processus de votre application Node (process.env) avec des variables définies dans un fichier .env.

  6. Démarrez votre application Node.js en exécutant cette commande : 
    node index.js

    Vérifiez que l’application fonctionne en visitant http://localhost:3000 dans votre navigateur. Vous devriez obtenir une réponse similaire à celle-ci.

    Hello World sur http:localhost:3000.
    Hello World sur http:localhost:3000.

Activer TypeScript dans une application Express

Suivez les étapes ci-dessous pour utiliser TypeScript dans une application Express :

  1. Installez TypeScript en exécutant cette commande : 
    npm i -D typescript

    L’option -D permet à npm d’installer des paquets en tant que dépendances dev. Vous pouvez utiliser les paquets que vous installez avec cette option dans la phase de développement.

  2. L’une des forces de la communauté TypeScript est le dépôt GitHub DefinitelyTyped. Il stocke la documentation des définitions de types pour divers paquets npm. Les utilisateurs peuvent rapidement intégrer des packages npm dans leurs projets sans se soucier des difficultés liées aux types en installant uniquement la définition de type pour ces packages avec npm.DefinitelyTyped est un outil indispensable pour les développeurs TypeScript. Il leur permet d’écrire un code plus propre et plus efficace et de réduire la probabilité d’erreurs. Vous installez les définitions de type de express et dotenv en exécutant cette commande : 
    npm install -D @types/express @types/dotenv
  3. Pour initialiser TypeScript, exécutez cette commande. 
    npx tsc --init

    Le fichier tsconfig.json généré indique le répertoire racine de votre application TypeScript. Il fournit des options de configuration pour définir le fonctionnement des compilateurs TypeScript. Il comprend une série d’options config désactivées ou activées, avec des commentaires expliquant chaque option.

  4. Ajoutez une propriété outDir à l’objet config pour définir le répertoire de sortie. 
    {
  "compilerOptions": {
    // …
    "outDir": "./dist"
    // …
  }
}

Comment créer un serveur TypeScript

Pour créer un serveur TypeScript, changez l’extension .js en .ts et mettez à jour le code avec ces définitions de type :

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);
});

Pour utiliser le compilateur et compiler le fichier TypeScript en JavaScript, exécutez la commande ci-dessous dans le répertoire racine de votre application.

npx tsc

Démarrez ensuite votre application en exécutant la commande.

node dist/index.js

En visitant http://localhost:3000 sur votre navigateur, vous devriez obtenir une réponse du type « Hello World ».

Comment déployer votre serveur TypeScript sur Kinsta

Vous êtes maintenant prêt à déployer votre application sur le web. Vous pouvez déployer votre application sur de nombreuses plateformes, y compris l’hébergement d’applications Kinsta.

Avant de pousser votre application vers un dépôt Git, il n’est pas conseillé d’utiliser TypeScript et de livrer le fichier JavaScript compilé à Git. Incluez un script start dans le fichier package.json.

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

Créez également un fichier .gitignore dans le répertoire racine de votre application et incluez node_modules et .env pour éviter de pousser ces fichiers vers votre fournisseur Git.

Une fois que votre dépôt est configuré, suivez les étapes suivantes pour déployer votre application sur Kinsta :

  1. Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
  2. Autorisez Kinsta avec votre fournisseur Git.
  3. Cliquez sur Applications dans la colonne latérale de gauche, puis cliquez sur Ajouter une application.
  4. Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer l’application.
  5. Attribuez un nom unique à votre application et choisissez l’emplacement du centre de données.
  6. Utilisez toutes les configurations par défaut. MyKinsta utilise npm start comme point d’entrée pour déployer votre application. Si vous souhaitez utiliser une autre commande, vous pouvez ajuster le processus d’exécution dans MyKinsta.
  7. Cliquez sur Créer une application.

Après le déploiement, MyKinsta fournit une URL pour accéder publiquement au déploiement de votre application. Vous pouvez visiter la page pour confirmer qu’elle affiche « Hello World »

Résumé

Ce guide a montré comment développer et configurer une application Express en utilisant TypeScript et déployer l’application avec Kinsta. TypeScript possède des capacités supplémentaires que JavaScript n’a pas – y compris les classes de type, la sécurité de type, les outils de refactorisation et l’autocomplétion – pour vous aider à construire des applications évolutives et à détecter les erreurs pendant le développement.

Kinsta vous aide à déployer rapidement votre application avec une sécurité et une stabilité accrues. Les 21 centres de données offrent la machine C2 de Google, qui fonctionne sur le réseau de niveau supérieur de Google.

Avez-vous déjà utilisé TypeScript ? Que pensez-vous de son utilisation avec un serveur Express ?

Jeremy Holcombe Kinsta

Rédacteur en chef du contenu et du marketing chez Kinsta, développeur web WordPress et rédacteur de contenu. En dehors de WordPress, j'aime la plage, le golf et le cinéma. J'ai aussi des problèmes avec les personnes de grande taille ;).