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.

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:

npm init

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:

npm init -y

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:

{
  "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:

tsc --init

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:

{
  "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:

{
  "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:

mkdir src

Erstellen Sie dann darin eine Datei namens app.ts:

touch src/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:

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:

npm start

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!

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

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