One place for hosting & domains

      Cómo configurar un proyecto Node con Typescript


      Introducción

      Node es un entorno de tiempo de ejecución que hace que sea posible escribir JavaScript en el lado del servidor. Ha logrado una amplia adopción desde su lanzamiento en 2011. Escribir JavaSccript en el servidor puede ser difícil a medida que la base de código crece debido a la naturaleza del lenguaje JavaScript: dinámico y con escritura débil.

      Los desarrolladores que llegan a JavaScript desde otros lenguajes a menudo se quejan sobre su falta de escritura estática fuerte, pero aquí es donde entra TypeScript, para cerrar esta brecha.

      TypeScript es un superconjunto escrito (opcional) de JavaScript que puede ayudar a la hora de crear y gestionar proyectos JavaScript a gran escala. Puede verse como JavaScript con funciones adicionales como escritura estática fuerte, compilación y programación orientada a objetos.

      Nota: TypeScript es técnicamente un superconjunto de JavaScript, lo que significa que todo el código JavaScript es código TypeScript válido.

      Aquí tiene algunos beneficios del uso de TypeScript:

      1. Escritura estática opcional.
      2. Inferencia de escritura.
      3. Capacidad para usar interfaces.

      En este tutorial, configurará un proyecto Node con TypeScript. Creará una aplicación Express usando TypeScript y la convertirá en un código JavaScript limpio y fiable.

      Requisitos previos

      Antes de comenzar con esta guía, necesitará Node.js instalado en su equipo. Puede hacerlo siguiendo la guía Cómo instalar Node.js y crear un entorno de desarrollo local para su sistema operativo.

      Paso 1: Iniciar un proyecto npm

      Para comenzar, cree una nueva carpeta llamada node_project y entre en ese directorio.

      • mkdir node_project
      • cd node_project

      A continuación, inícielo como proyecto npm:

      Tras ejecutar npm init, necesitará suministrar a npm información sobre su proyecto. Si prefiere que npm asuma los valores predeterminados más sensatos, puede añadir el indicador y para omitir las solicitudes de información adicional:

      Ahora que el espacio de su proyecto está configurado, está listo para instalar las dependencias necesarias.

      Paso 2: Instalar las dependencias

      Con un proyecto npm vacío iniciado, el siguiente paso es instalar las dependencias que se necesitan para ejecutar TypeScript.

      Ejecute los siguientes comandos desde el directorio de su proyecto para instalar las dependencias:

      • npm install -D typescript@3.3.3
      • npm install -D tslint@5.12.1

      El indicador -D es el atajo para: --save-dev. Puede obtener más información sobre este indicador en la documentación de npmjs.

      Ahora es el momento de instalar el marco Express:

      • npm install -S express@4.16.4
      • npm install -D @types/express@4.16.1

      El segundo comando instala los tipos de Express para la compatibilidad con TypeScript. Los Tipos de TypeScript son archivos, normalmente con una extensión .d.ts. Los archivos se usan para proporcionar información de tipo sobre una API, en este caso el marco Express.

      Este paquete es necesario porque TypeScript y Express son paquetes independientes. Sin el paquete @typ/express, no hay forma de que TypeScript sepa sobre los tipos de clases Express.

      Paso 3: Configurar TypeScript

      En esta sección, configurará TypeScript y configurará un linting para TypeScript. TypeScript utiliza un archivo llamado tsconfig.json para configurar las opciones del compilador para un proyecto. Cree un archivo tsconfig.json en la raíz del directorio del proyecto y péguelo en el siguiente fragmento de código:

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      Vamos a repasar algunas de las claves del fragmento de código JSON anterior:

      • module: Especifica el método de generación de código del módulo. Node utiliza commonjs.
      • target: Especifica el nivel de lenguaje de salida.
      • moduleResolution: Esto ayuda al compilador a averiguar a qué se refiere una importación. El valor node imita al mecanismo de resolución del módulo de Node.
      • outDir: Esta es la ubicación para los archivos .js tras la transpilación. En este tutorial, lo guardará como dist.

      Una alternativa a crear y popular manualmente el archivo tsconfig.json es ejecutando el siguiente comando:

      Este comando generará un archivo tsconfig.json bien redactado.

      Para obtener más información sobre las opciones de valor clave disponibles, la documentación de TypeScript oficial ofrece explicaciones sobre cada opción.

      Ahora puede configurar el linting de TypeScript para el proyecto. En un terminal que se ejecute en la raíz del directorio de su proyecto, que en este tutorial se estableció como node_project, ejecute el siguiente comando para generar un archivo tslint.json.

      • ./node_modules/.bin/tslint --init

      Abra el archivo tslint.json recién generado y añada la regla no-console como corresponda:

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      Por defecto, el linter de TypeScript evita el uso de depuración usando declaraciones console, por tanto es necesario indicar explícitamente al linter que revoque la regla no-console predeterminada.

      Paso 4: Actualizar el archivo package.json

      En este momento del tutorial, puede ejecutar funciones en el terminal individualmente o crear un npm script para ejecutarlos.

      En este paso, creará una secuencia de comandos start que compilará y transpilará el código de TypeScript, y luego ejecutará la aplicación .js resultante.

      Abra el archivo package.json y actualícelo:

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      En el fragmento de código anterior, actualizó la ruta main y añadió el comando start a la sección scripts. Cuando se observa el comando start, verá que primero se ejecuta el comando tsc y luego el comando node. Esto compilará y ejecutará el resultado generado con node.

      El comando tsc indica a TypeScript que compile la aplicación y coloque el resultado .jso generado en el directorio outDir especificado como se establece en el archivo tsconfig.json.

      Paso 5: Crear y ejecutar un servidor Express básico

      Ahora que TypeScript y su linter están configurados, es el momento de crear un servidor Node Express.

      Primero cree una carpeta src en la raíz del directorio de su proyecto:

      A continuación cree un archivo llamado app.ts dentro:

      En este momento, la estructura de la carpeta debería tener este aspecto:

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      Abra el archivo app.ts con el editor de texto que prefiera y pegue el siguiente fragmento de código:

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      El código anterior crea Node Server que escucha las solicitudes sobre el puerto 3000. Ejecute la aplicación usando el siguiente comando:

      Si se ejecuta correctamente se registrará un mensaje en el terminal:

      Output

      • server is listening on 3000

      Ahora, puede visitar http://localhost:3000 en su navegador y debería ver el mensaje:

      Output

      • The sedulous hyena ate the antelope!

      Ventana del navegador con el mensaje: The sedulous hyena ate the antelope!

      Abra el archivo dist/app.js y encontrará la versión transpilada del código TypeScript:

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      En este momento ha configurado correctamente su proyecto Node para usar TypeScript.

      Conclusión

      En este tutorial, aprendió por qué TypeScript es útil para escribir un código JavaScript fiable. También aprendió algunos de los beneficios de trabajar con TypeScript.

      Finalmente, ha configurado un proyecto Node usando el marco Express, pero compiló y ejecutó el proyecto usando TypeScript.



      Source link

      Cómo usar EJS para crear una plantilla de su aplicación Node


      Introducción

      Cuando se crean aplicaciones Node rápidas en el momento, a veces es necesario una forma fácil y rápida de crear plantillas de nuestra aplicación.

      Jade llega como el motor de visualización para Express por defecto, pero la sintaxis de Jade puede ser demasiado compleja para muchos casos de uso. EJS es una alternativa que hace bien el trabajo y es fácil de configurar. Veamos cómo podemos crear una aplicación sencilla y usar EJS para incluir las partes repetibles de nuestro sitio (parciales) y pasar los datos a nuestras vistas.

      Configurar la aplicación demo

      Crearemos dos páginas para nuestra aplicación: una página con ancho completo y la otra con una barra lateral.

      Obtenga el código: puede encontrar un repositorio de git del código de demostración completo en GitHub aquí.

      Estructura del archivo

      Aquí están todos los archivos que necesitaremos para nuestra aplicación. Crearemos nuestra plantilla dentro de la carpeta de vistas y el resto son prácticas de Node bastante estándares.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json albergará la información de nuestra aplicación de Node y las dependencias que necesitamos (express y EJS). server.jso albergará los ajustes de nuestro servidor Express, configuración. Definiremos nuestras rutas para nuestras páginas aquí.

      Configuración de Node

      Vamos a entrar en nuestro archivo package.json y configurar nuestro proyecto ahí.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Todo lo que necesitaremos es Express y EJS. Ahora tenemos que instalar las dependencias que acabamos de definir. Ejecute:

      Con todas nuestras dependencias instaladas, ahora configuraremos nuestra aplicación para que utilice EJS y fijaremos nuestras rutas para las dos páginas que necesitamos: la página “Índice” (ancho completo) y la página “Acerca de” (barra lateral). Haremos todo esto dentro de nuestro archivo server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Aquí definimos nuestra aplicación y la configuramos para que se muestre en el puerto 8080. También debemos configurar EJS como el motor de visualización de nuestra aplicación Express usando app.set('view engine', 'ejs');. Observe cómo enviamos una vista al usuario usando res.render(). Es importante tener en cuenta que res.render() buscará en una carpeta de vistas la vista. Solo tenemos que definir pages/index, ya que la ruta completa es views/pages/index.

      Iniciar nuestro servidor

      Inicie el servidor usando:

      Ahora podemos ver nuestra aplicación en el navegador en http://localhost:8080 y http://localhost:8080/about. Nuestra aplicación está configurada y tenemos que definir nuestros archivos de vista y ver cómo EJS funciona ahí.

      Cree los parciales de EJS

      Igual que muchas aplicaciones que creamos, hay mucho código que se reutiliza. A esos códigos los llamamos parciales y definen tres archivos que usaremos en todo nuestro sitio: head.ejs, header.ejs y footer.ejs. Vamos a crear esos archivos ahora.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Añada los parciales de EJS a Vistas

      Ahora tenemos nuestros parciales definidos. Lo único que debemos hacer es incluirlos en nuestras vistas. Ahora veremos index.ejs y about.ejs y usaremos la sintaxis include para añadir los parciales.

      Sintaxis para incluir un parcial de EJS

      Utilice <%- include('RELATIVE/PATH/TO/FILE') %> para integrar un parcial de EJS en otro archivo.

      • El guion <%- en vez de solo <% para indicar a EJS que renderice HTML sin formato.
      • La ruta al parcial es relativa al archivo actual.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Ahora podemos ver nuestra vista definida en el navegador en http://localhost:8080. node-ejs-templating-index

      Para la página de acerca de, también añadimos una barra lateral de bootstrap para demostrar cómo pueden estructurarse los parciales para que se reutilicen en diferentes plantillas y páginas.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Si visitamos http://localhost:8080/about, podemos ver nuestra página de acerca de con una barra lateral node-ejs-templating-about

      Ahora podemos empezar a usar EJS para pasar datos desde nuestra aplicación Node a nuestras vistas.

      Pasar datos a Vistas y Parciales

      Vamos a definir algunas variables básicas y una lista para pasar a nuestra página de inicio. Vuelva a su archivo server.js y añada lo siguiente dentro de su ruta app.get("https://www.digitalocean.com/")

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Hemos creado una lista llamada mascots y una cadena sencilla llamada tagline. Vamos a entrar en nuestro archivo index.ejs para usarlas.

      Renderizar una variable única en EJS

      Para hacer eco de una variable, acabamos de usar <%= tagline %>. Vamos a añadir esto a nuestro archivo index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Hacer bucle sobre los datos en EJS

      Para hacer bucle sobre nuestros datos usaremos .forEach. Vamos a añadir esto a nuestro archivo:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Ahora podemos ver en nuestro navegador la nueva información que hemos añadido.

      node-ejs-templating-rendered

      Pasar datos a un parcial en EJS

      El parcial EJS tiene acceso a todos los mismos datos que la vista principal. Pero tenga cuidado: si hace referencia a una variable en un parcial, debe definirse en cada vista que utilice el parcial o arrojará un error.

      También puede definir y pasar variables a un parcial EJS en la sintaxis include, de esta forma:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Pero de nuevo, debe tener cuidado y no asumir que una variable ha sido definida.

      Si desea referenciar una variable en un parcial que puede no definirse siempre, y darle un valor predeterminado, puede hacerlo de esta forma:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      En la línea anterior, el código EJS se renderiza el valor de variant, si está definido, y de default si no lo está.

      Conclusión

      EJS nos permite generar aplicaciones rápidas cuando no necesitamos algo demasiado complejo. Al usar parciales y tener la capacidad de pasar variables fácilmente a nuestras vistas, podemos crear algunas aplicaciones geniales rápidamente.

      Para obtener más información sobre EJS, consulte los documentos oficiales aquí.



      Source link

      Comment mettre en place un projet Node avec Typescript


      Introduction

      Node est un environnement d’exécution qui permet d’écrire du Javascript côté serveur. Il a été largement adopté depuis sa publication en 2011.  L’écriture du JavaScript côté serveur peut être difficile car la base de code se développe en raison de la nature du langage JavaScript ; dynamique et faiblement dactylographié.

      Les développeurs qui utilisent JavaScript à partir d’autres langues se plaignent souvent de l’absence de caractères statiques forts, mais c’est là que TypeScript intervient, pour combler cette lacune.

      TypeScript est un super-ensemble de JavaScript typé (facultatif) qui peut aider à construire et à gérer des projets JavaScript à grande échelle. Il peut être considéré comme du JavaScript avec des caractéristiques supplémentaires comme un fort typage statique, une compilation et une programmation orientée objet.

      Remarque : Le langage TypeScript est techniquement un super-ensemble de JavaScript, ce qui signifie que tout le code JavaScript est un code TypeScript valide.

      Voici quelques avantages de l’utilisation de TypeScript :

      1. Typage statique optionnel.
      2. Inférence de type.
      3. Capacité à utiliser des interfaces.

      Dans ce tutoriel, vous allez mettre en place un projet Node avec TypeScript. Vous créerez une application Express en utilisant le langage TypeScript et la transposerez dans un code JavaScript soigné et fiable.

      Conditions préalables

      Avant de commencer ce guide, vous devez avoir installé Node.js sur votre machine.  Vous pouvez y parvenir en suivant le guide Comment installer Node.js et créer un environnement de développement local guide pour votre système d’exploitation.

      Étape 1 – Initialisation d’un projet npm

      Pour commencer, créez un nouveau dossier nommé node_project et accédez à ce répertoire.

      • mkdir node_project
      • cd node_project

      Ensuite, initialisez-le en tant que projet npm :

      Après avoir lancé npm init, vous devrez fournir à npm des informations sur votre projet.  Si vous préférez laisser le npm prendre des valeurs par défaut raisonnables, vous pouvez ajouter le drapeau y pour ignorer les invites d’informations supplémentaires :

      Maintenant que votre espace de projet est mis en place, vous êtes prêt à passer à l’installation des dépendances nécessaires.

      Étape 2 — Installer des dépendances

      Avec un projet npm nu initialisé, l’étape suivante consiste à installer les dépendances nécessaires au lancement de TypeScript.

      Exécutez les commandes suivantes depuis le répertoire de votre projet pour installer les dépendances :

      • npm install -D typescript@3.3.3
      • npm install -D tslint@5.12.1

      Le drapeau -D est le raccourci pour --save-dev.  Vous pouvez en savoir plus sur ce drapeau dans la documentation du npmjs.

      Il est maintenant temps d’installer le framework Express :

      • npm install -S express@4.16.4
      • npm install -D @types/express@4.16.1

      La deuxième commande installe Express** pour la prise en charge de TypeScript. Les types en TypeScript sont des fichiers, normalement avec une extension de .d.ts. Les fichiers sont utilisés pour fournir des informations de type sur une API, dans ce cas le framework Express.

      Ce paquet est nécessaire car TypeScript et Express sont des paquets indépendants. Sans le paquet @types/express, il n’y a aucun moyen pour TypeScript de connaître les types de classes Express.

      Étape 3 – Configurer TypeScript

      Dans cette section, vous allez paramétrer TypeScript et configurer le linting pour TypeScript. TypeScript utilise un fichier appelé tsconfig.json pour configurer les options du compilateur pour un projet. Créez un fichier tsconfig.json dans le root du répertoire du projet et collez-le dans le snippet suivant :

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      Passons en revue certaines des clés du snippet JSON ci-dessus :

      • module: Spécifie la méthode de génération du code du module. Node utilise commonjs.
      • target: Spécifie le niveau du langage de sortie.
      • moduleResolution: Cela aide le compilateur à déterminer à quoi se réfère une importation. La valeur node imite le mécanisme de résolution des modules de Node.
      • outDir : Il s’agit de l’emplacement où les fichiers .js sont produits après la transpilation.  Dans ce tutoriel, vous le sauvegarderez sous dist.

      Une alternative à la création et au remplissage manuels du fichier tsconfig.json consiste à exécuter la commande suivante :

      Cette commande va générer un fichier tsconfig.json bien commenté.

      Pour en savoir plus sur les options de valeurs clés disponibles, la documentation officielle de TypeScript offre des explications sur chaque option.

      Vous pouvez maintenant configurer le linting TypeScript pour le projet. Dans un terminal fonctionnant au root du répertoire de votre projet, que ce tutoriel a établi comme node_project, exécutez la commande suivante pour générer un fichier tslint.json :

      • ./node_modules/.bin/tslint --init

      Ouvrez le nouveau site tslint.json et ajoutez la règle non-console en conséquence :

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      Par défaut, le linter TypeScript empêche l’utilisation du débogage par console d’où la nécessité d’indiquer explicitement au linter de révoquer la règle par défaut no-console.

      Étape 4 – Mise à jour du fichier package.json

      À ce stade du tutoriel, vous pouvez soit exécuter individuellement des fonctions dans le terminal, soit créer un script npm pour les exécuter.

      Dans cette étape, vous créerez un script start qui compilera et transpilera le code TypeScript, puis lancera l’application .js résultante.

      Ouvrez le fichier package.json et mettez-le à jour comme il se doit :

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      Dans le snippet ci-dessus, vous avez mis à jour le chemin principal et ajouté la commande start à la section scripts. En regardant la commande start, vous verrez que la commande tsc est d’abord exécutée, puis la commande node.  Cette opération permet de compiler et d’exécuter la sortie générée avec node.

      La commande tsc demande à TypeScript de compiler l’application et de placer la sortie .js générée dans le répertoire spécifié outDir tel qu’il est défini dans le fichier tsconfig.json.

      Étape 5 – Créer et faire fonctionner un serveur Express de base

      Maintenant que TypeScript et son linter sont configurés, il est temps de construire un serveur Node Express.

      Tout d’abord, créez un dossier src dans le root du répertoire de votre projet :

      Créez ensuite un fichier nommé app.ts dans celui-ci :

      À ce stade, la structure du dossier devrait ressembler à ceci :

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      Ouvrez le fichier app.ts avec un éditeur de texte de votre choix et collez le code suivant :

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      Le code ci-dessus crée un serveur Node qui écoute les requêtes sur le port 3000.  Lancez l’application en utilisant la commande suivante :

      S’il fonctionne correctement, un message sera enregistré sur le terminal :

      Output

      • server is listening on 3000

      Maintenant, vous pouvez visiter http://localhost:3000 dans votre navigateur et vous devriez voir le message :

      Output

      • The sedulous hyena ate the antelope!

      Fenêtre du navigateur avec le message : The sedulous hyena ate the antelope!

      Ouvrez le fichier dist/app.js et vous trouverez la version transposée du code TypeScript :

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      À ce stade, vous avez configuré avec succès votre projet Node pour utiliser TypeScript.

      Conclusion

      Dans ce tutoriel, vous avez appris pourquoi TypeScript est utile pour écrire un code JavaScript fiable.  Vous avez également découvert certains des avantages à travailler avec TypeScript.

      Enfin, vous avez mis en place un projet Node en utilisant le framework Express, mais vous avez compilé et exécuté le projet en utilisant TypeScript.



      Source link