TypeScript ist eine stark typisierte Programmiersprache, die die Möglichkeiten von JavaScript erweitert. Sie bietet eine Reihe von Funktionen, mit denen du skalierbare Anwendungen mit Node.js und Express entwickeln kannst.

Einer der entscheidenden Vorteile von TypeScript gegenüber JavaScript ist, dass es Typklassen bietet, die das Schreiben von vorhersehbarem und wartbarem Code erleichtern. Außerdem bietet TypeScript Typsicherheit, die sicherstellt, dass dein Code frei von Laufzeitfehlern ist, und die es einfacher macht, Fehler frühzeitig in der Entwicklung zu erkennen. Die Sprache verfügt außerdem über Refactoring-Tools und Autovervollständigung, was das Nutzererlebnis der Entwickler/innen verbessert.

Außerdem bieten Node.js und Express eine hervorragende Leistung für Anwendungen jeder Größenordnung. Die Verwendung von Klassen in TypeScript hilft auch bei der Organisation und Strukturierung, was die Skalierbarkeit weiter verbessert. Mit diesen Werkzeugen kannst du robuste und skalierbare Anwendungen erstellen, die der wachsenden Nachfrage gerecht werden.

Dieser Artikel zeigt, wie du eine Express-Anwendung mit TypeScript und einem einzigen Endpunkt einrichtest. Anschließend wird erklärt, wie du deine Anwendung auf dem Anwendungs-Hosting von Kinsta bereitstellst.

Wie man einen Express-Server einrichtet

Um dieser Anleitung zu folgen, musst du sicherstellen, dass Node.js und npm auf deinem Computer installiert sind. So richtest du einen Express-Server ein:

  1. Erstelle ein Verzeichnis mit dem unten stehenden Code: 
    mkdir sample_app && cd sample_app
  2. Initialisiere eine Node.js-Anwendung in diesem Verzeichnis, indem du diesen Befehl ausführst: 
    npm init -y

    Das -y Flag im Befehl akzeptiert die Standardaufforderungen beim Erstellen einer package.json Datei, die mit dem folgenden Code gefüllt ist:

    { 
  "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. Als Nächstes installierst du express für das Hinzufügen wichtiger Funktionen und dotenv für die Verwaltung von Umgebungsvariablen in dem Verzeichnis, das du gerade mit diesem Befehl erstellt hast: 
    npm i express dotenv
  4. Erstelle eine .env-Datei im Stammverzeichnis des sample_app-Verzeichnisses und fülle sie mit der folgenden Variable. 
    PORT=3000
  5. Erstelle eine Express-Anwendung, die mit einem Hello World Text antwortet, wenn Benutzer http://localhost:3000 besuchen. 
    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() füllt die Prozessumgebung deiner Node-Anwendung (process.env) mit Variablen, die in einer .env-Datei definiert sind.

  6. Starte deine Node.js-Anwendung, indem du diesen Befehl ausführst: 
    node index.js

    Überprüfe, ob die Anwendung funktioniert, indem du http://localhost:3000 in deinem Browser aufrufst. Du solltest eine ähnliche Antwort wie diese erhalten.

    Hello World-Server mit Express
    Hello World auf http:localhost:3000.

Aktivieren von TypeScript in einer Express-Anwendung

Befolge die folgenden Schritte, um TypeScript in einer Express-Anwendung zu verwenden:

  1. Installiere TypeScript, indem du diesen Befehl ausführst: 
    npm i -D typescript

    Die Option -D ermöglicht es npm, Pakete als Dev-Abhängigkeiten zu installieren. Du kannst die Pakete, die du mit dieser Option installierst, in der Entwicklungsphase verwenden.

  2. Eine der Stärken der TypeScript-Community ist das DefinitelyTyped GitHub-Repository. Es speichert die Dokumentation der Typdefinitionen für verschiedene npm-Pakete. Nutzer können npm-Pakete schnell in ihre Projekte integrieren, ohne sich um typbezogene Schwierigkeiten zu kümmern, indem sie nur die Typdefinition für diese Pakete mit npm installieren. DefinitelyTyped ist ein unverzichtbares Werkzeug für TypeScript-Entwickler. Es ermöglicht es ihnen, saubereren und effizienteren Code zu schreiben und die Wahrscheinlichkeit von Fehlern zu verringern. Du installierst die Typdefinitionen von express und dotenv, indem du diesen Befehl ausführst: 
    npm install -D @types/express @types/dotenv
  3. Um TypeScript zu initialisieren, führe diesen Befehl aus. 
    npx tsc --init

    Die erzeugte Datei tsconfig.json zeigt das Stammverzeichnis deiner TypeScript-Anwendung an. Sie enthält Konfigurationsoptionen, die festlegen, wie TypeScript-Compiler arbeiten sollen. Sie enthält eine Reihe von config Optionen, die deaktiviert oder aktiviert sind, mit Kommentaren, die jede Option erklären.

  4. Füge eine outDir Eigenschaft zum config Objekt hinzu, um das Ausgabeverzeichnis zu definieren. 
    {
  "compilerOptions": {
    // …
    "outDir": "./dist"
    // …
  }
}

Wie man einen TypeScript-Server erstellt

Um einen TypeScript-Server zu erstellen, änderst du die Erweiterung .js in .ts und aktualisierst den Code mit diesen Typdefinitionen:

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

Um das Compiler-Paket zu verwenden und die TypeScript-Datei in JavaScript zu kompilieren, führe den folgenden Befehl im Stammverzeichnis deiner Anwendung aus.

npx tsc

Starte dann deine Anwendung, indem du den Befehl ausführst.

node dist/index.js

Der Besuch von http://localhost:3000 in deinem Browser sollte eine „Hello World“-Antwort liefern.

So stellst du deinen TypeScript-Server auf Kinsta bereit

Jetzt bist du bereit, deine Anwendung im Web zu veröffentlichen. Du kannst deine Anwendung auf vielen Plattformen bereitstellen, auch auf dem Anwendungs-Hosting von Kinsta.

Bevor du deine Anwendung in ein Git-Repository einstellst, ist es nicht ratsam, TypeScript zu verwenden und die kompilierte JavaScript-Datei an Git zu binden. Füge ein start Skript in die package.json Datei ein.

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

Erstelle außerdem eine .gitignore-Datei im Stammverzeichnis deiner Anwendung und füge node_modules und .env ein, um zu verhindern, dass diese Dateien an deinen Git-Anbieter weitergegeben werden.

Sobald dein Repository eingerichtet ist, befolge die folgenden Schritte, um deine Anwendung auf Kinsta bereitzustellen:

  1. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
  2. Autorisiere Kinsta bei deinem Git-Anbieter.
  3. Klicke in der linken Seitenleiste auf Anwendungen und dann auf Anwendung hinzufügen.
  4. Wähle das Repository und den Branch aus, von dem aus du die Anwendung bereitstellen möchtest.
  5. Gib deiner Anwendung einen eindeutigen Namen und wähle einen Rechenzentrumsstandort.
  6. Verwende alle Standardkonfigurationen. MyKinsta verwendet npm start als Einstiegspunkt für die Bereitstellung deiner Anwendung. Wenn du einen anderen Befehl verwenden möchtest, kannst du den Laufzeitprozess in MyKinsta anpassen.
  7. Klicke auf Anwendung erstellen.

Nach der Bereitstellung stellt MyKinsta eine URL bereit, über die du öffentlich auf die Bereitstellung deiner Anwendung zugreifen kannst. Du kannst die Seite besuchen, um zu überprüfen, ob sie „Hello World“ anzeigt.

Zusammenfassung

In dieser Anleitung wurde gezeigt, wie du eine Express-Anwendung mit TypeScript entwickelst und einrichtest und die Anwendung mit Kinsta bereitstellst. TypeScript verfügt über zusätzliche Funktionen, die JavaScript nicht hat – darunter Typklassen, Typsicherheit, Refactoring-Tools und Autovervollständigung -, die dir helfen, skalierbare Anwendungen zu erstellen und Fehler während der Entwicklung zu erkennen.

Kinsta hilft dir, deine Anwendung schnell und mit verbesserter Sicherheit und Stabilität bereitzustellen. Die Rechenzentren von 21 bieten Googles C2-Maschine, die auf Googles Premium-Tier-Netzwerk läuft.

Hast du TypeScript in der Vergangenheit verwendet? Was hältst du davon, es mit einem Express-Server zu verwenden?

Jeremy Holcombe Kinsta

Content & Marketing Editor bei Kinsta, WordPress Web Developer und Content Writer. Außerhalb von WordPress genieße ich den Strand, Golf und Filme. Außerdem habe ich Probleme mit großen Menschen ;).