One place for hosting & domains

      TypeScript

      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

      Einrichten eines Node-Projekts mit TypeScript


      Einführung

      Node ist eine Laufzeitumgebung, die es ermöglicht, serverseitiges JavaScript zu schreiben. Seit ihrer Veröffentlichung im Jahr 2011 hat sie eine weite Verbreitung gefunden. Das Schreiben von serverseitigem JavaScript kann eine Herausforderung sein, da die Codebasis aufgrund der Art der JavaScript-Sprache – dynamisch und schwach typisiert – wächst.

      Entwickler, die aus anderen Sprachen zu JavaScript kommen, beklagen sich oft über den Mangel an starker statischer Typisierung, aber genau hier kommt TypeScript ins Spiel, um diese Lücke zu schließen.

      TypeScript ist eine typisierte (optionale) Obermenge von JavaScript, die bei der Erstellung und Verwaltung großer JavaScript-Projekte helfen kann. Man kann es sich als JavaScript mit zusätzlichen Funktionen wie starker statischer Typisierung, Kompilierung und objektorientierter Programmierung vorstellen.

      Anmerkung: TypeScript ist technisch gesehen eine Obermenge von JavaScript, wobei der gesamte JavaScript-Code gültiger TypeScript-Code ist.

      Hier sind einige Vorteile der Verwendung von TypeScript:

      1. Optionale statische Typisierung.
      2. Typinferenz.
      3. Fähigkeit zur Verwendung von Schnittstellen.

      In diesem Tutorial richten Sie ein Node-Projekt mit TypeScript ein. Sie werden eine Express-Anwendung mit TypeScript erstellen und diese in einen sauberen und zuverlässigen JavaScript-Code transpilieren.

      Voraussetzungen

      Bevor Sie mit diesem Leitfaden beginnen, muss Node.js auf Ihrem Computer installiert sein. Sie können dies erreichen, indem Sie dem Leitfaden Installieren von Node.js und Erstellen einer lokalen Entwicklungsumgebung für Ihr Betriebssystem folgen.

      Schritt 1 — Initialisieren eines npm-Projekts

      Erstellen Sie zunächst einen neuen Ordner namens node_project und wechseln Sie in dieses Verzeichnis.

      • mkdir node_project
      • cd node_project

      Initialisieren Sie es als npm-Projekt:

      Nach der Ausführung von npm init müssen Sie npm Informationen über Ihr Projekt bereitstellen. Wenn Sie es vorziehen, npm sinnvolle Standardeinstellungen annehmen zu lassen, können Sie das Flag y hinzufügen, um die Eingabeaufforderungen für zusätzliche Informationen zu überspringen:

      Nachdem Ihr Projektraum nun eingerichtet ist, können Sie mit der Installation der erforderlichen Abhängigkeiten fortfahren.

      Schritt 2 — Installieren der Abhängigkeiten

      Wenn ein blankes npm-Projekt initialisiert wurde, besteht der nächste Schritt darin, die Abhängigkeiten zu installieren, die zur Ausführung von TypeScript erforderlich sind.

      Führen Sie die folgenden Befehle aus Ihrem Projektverzeichnis aus, um die Abhängigkeiten zu installieren:

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

      Das Flag -D ist die Kurzform für: -save-dev. In der Dokumentation zu npmjs können Sie mehr über dieses Flag erfahren.

      Jetzt ist es an der Zeit, das Express-Framework zu installieren:

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

      Der zweite Befehl installiert die Express-Typen für die TypeScript-Unterstützung. Typen in TypeScript sind Dateien, normalerweise mit einer Erweiterung von .d.ts. Die Dateien werden verwendet, um Typinformationen über eine API, in diesem Fall das Express-Framework, bereitzustellen.

      Dieses Paket ist erforderlich, da TypeScript und Express unabhängige Pakete sind. Ohne das Paket @types/express gibt es für TypeScript keine Möglichkeit, Informationen über die Typen von Express-Klassen zu erhalten.

      Schritt 3 — Konfigurieren von TypeScript

      In diesem Abschnitt richten Sie TypeScript ein und konfigurieren Linting für TypeScript. TypeScript verwendet eine Datei namens tsconfig.json, um die Compiler-Optionen für ein Projekt zu konfigurieren. Erstellen Sie eine Datei tsconfig.json im Stammverzeichnis des Projektverzeichnisses und fügen Sie das folgende Snippet ein:

      tsconfig.json

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

      Sehen wir uns einige der Schlüssel im obigen JSON-Snippet an:

      • module: Gibt die Methode zur Erzeugung des Modulcodes an. Node verwendet commonjs.
      • target: Gibt das Ausgabe-Sprachniveau an.
      • moduleResolution: Dies hilft dem Compiler herauszufinden, worauf sich ein Import bezieht. Der Wert node imitiert den Mechanismus zur Auflösung des Node-Moduls.
      • outDir: Dies ist der Speicherort für die Ausgabe von .js-Dateien nach der Transpilation. In diesem Tutorial speichern Sie sie als dist.

      Eine Alternative zur manuellen Erstellung und Population der Datei tsconfig.json ist die Ausführung des folgenden Befehls:

      Dieser Befehl generiert eine gut kommentierte tsconfig.json-Datei.

      Um mehr über die verfügbaren Schlüsselwertoptionen zu erfahren, bietet die offizielle TypeScript-Dokumentation Erklärungen zu jeder Option.

      Jetzt können Sie TypeScript-Linting für das Projekt konfigurieren. Führen Sie den folgenden Befehl in einem Terminal im Stammverzeichnis Ihres Projektverzeichnisses aus, das in diesem Tutorial als node_project eingerichtet wurde, um eine tslint.json-Datei zu erzeugen:

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

      Öffnen Sie die neu erzeugte tslint.json-Datei und fügen Sie die Regel no-console entsprechend hinzu:

      tslint.json

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

      Standardmäßig verhindert der TypeScript-Linter die Verwendung von Debugging mittels der Anweisungen console, weshalb der Linter explizit angewiesen werden muss, die standardmäßige Regel no-console zu widerrufen.

      Schritt 4 — Aktualisieren der Datei package.json

      An diesem Punkt im Tutorial können Sie entweder Funktionen im Terminal einzeln ausführen oder ein npm-Skript erstellen, um sie auszuführen.

      In diesem Schritt erstellen Sie ein Skript start, das den TypeScript-Code kompiliert und transpiliert und dann die resultierende Anwendung .js ausführt.

      Öffnen Sie die Datei package.json und aktualisieren Sie sie entsprechend:

      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"
        }
      }
      

      Im obigen Snippet haben Sie den Pfad main aktualisiert und den Befehl start dem Abschnitt scripts hinzugefügt. Wenn Sie sich den Befehl start ansehen, sehen Sie, dass zuerst der Befehl tsc ausgeführt wird, und dann der Befehl node. Dadurch wird die generierte Ausgabe mit node kompiliert und dann ausgeführt.

      Der Befehl tsc weist TypeScript an, die Anwendung zu kompilieren und die generierte Ausgabe .js im angegebenen Verzeichnis outDir zu platzieren, wie es in der Datei tsconfig.json festgelegt ist.

      Schritt 5 — Erstellen und Ausführen eines einfachen Express-Servers

      Nachdem TypeScript und dessen Linter konfiguriert sind, ist es an der Zeit, einen Node Express-Server zu erstellen.

      Erstellen Sie zunächst einen Ordner src im Stammverzeichnis Ihres Projektverzeichnisses:

      Erstellen Sie dann darin eine Datei namens app.ts:

      An diesem Punkt sollte die Ordnerstruktur wie folgt aussehen:

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

      Öffnen Sie die Datei app.ts mit einem Texteditor Ihrer Wahl und fügen Sie das folgende Code-Snippet ein:

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

      Der obige Code erstellt einen Node-Server, der auf Port 3000 auf Anfragen lauscht. Führen Sie die Anwendung mit dem folgenden Befehl aus:

      Wenn sie erfolgreich ausgeführt wird, wird eine Nachricht im Terminal protokolliert:

      Output

      • server is listening on 3000

      Sie können nun http://localhost:3000 in Ihrem Browser besuchen, und Sie sollten die Nachricht sehen:

      Output

      • The sedulous hyena ate the antelope!

      Browserfenster mit der Nachricht: The sedulous hyena ate the antelope! (Die fleißige Hyäne fraß die Antilope!)

      Öffnen Sie die Datei dist/app.js und Sie finden die transpilierte Version des TypeScript-Codes:

      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
      

      An diesem Punkt haben Sie Ihr Node-Projekt erfolgreich für die Verwendung von TypeScript eingerichtet.

      Zusammenfassung

      In diesem Tutorial haben Sie erfahren, warum TypeScript nützlich ist, um zuverlässigen JavaScript-Code zu schreiben. Sie haben auch einige Vorteile der Arbeit mit TypeScript kennengelernt.

      Abschließend haben Sie ein Node-Projekt mit dem Express-Framework eingerichtet, das Projekt jedoch mit TypeScript kompiliert und ausgeführt.



      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