Kompilieren von TypeScript-Code (Node.js)

  • Artikel

Verwenden Sie das TypeScript-npm-Paket, um TypeScript-Unterstützung zu Projekten hinzuzufügen, die auf JavaScript Project System (JSPS) oder ESPROJ basieren. Ab Visual Studio 2019 wird empfohlen, das npm-Paket anstelle des TypeScript SDK zu verwenden. Mit dem TypeScript-npm-Paket wird bessere Portabilität über verschiedene Plattformen und Umgebungen hinweg erzielt.

Wichtig

Verwenden Sie für ASP.NET Core-Projekte das NuGet-Paket anstelle von npm, um TypeScript-Unterstützung hinzuzufügen.

Hinzufügen von TypeScript-Unterstützung mit npm

Das TypeScript-npm-Paket fügt TypeScript-Unterstützung hinzu. Wenn das npm-Paket für TypeScript 2.1 oder höher in Ihrem Projekt installiert ist, wird die entsprechende Version des TypeScript-Sprachdienstes in den Editor geladen.

  1. Befolgen Sie diese Anweisungen, um die Node.js-Entwicklungsworkload und die Node.js-Runtime zu installieren.

    Für eine einfache Integration in Visual Studio erstellen Sie Ihr Projekt mit einer der Node.js-TypeScript-Vorlagen, z. B. mit der Vorlage „Blank Node.js Web Application“. Verwenden Sie andernfalls entweder eine JavaScript-Vorlage von Node.js, die in Visual Studio enthalten ist, und befolgen Sie die Anweisungen hier. Verwenden Sie alternativ ein Open Folder-Projekt (geöffneter Ordner).

  2. Wenn Ihr Projekt das TypeScript-npm-Paket nicht bereits enthält, installieren Sie es.

    Öffnen Sie im Projektmappen-Explorer im Bereich auf der rechten Seite die Datei package.json im Stammverzeichnis. Die aufgeführten Pakete entsprechen Paketen unter dem npm-Knoten im Projektmappen-Explorer. Weitere Informationen finden Sie unter Verwalten von npm-Paketen.

    Bei einem Node.js-Projekt können Sie das TypeScript-npm-Paket über die Befehlszeile oder die IDE installieren. Klicken Sie zur Installation über die IDE im Projektmappen-Explorer mit der rechten Maustaste auf den npm-Knoten, wählen Sie Neues npm-Paket installieren aus, suchen Sie nach TypeScript, und installieren Sie das Paket.

    Überprüfen Sie die Option npm im Fenster Ausgabe, um den Fortschritt bei der Paketinstallation anzuzeigen. Das installierte Paket wird im Projektmappen-Explorer unter dem Knoten npm angezeigt.

  3. Wenn Ihr Projekt noch keine tsconfig.json-Datei enthält, fügen Sie Ihrem Projektstamm eine solche Datei hinzu. Um die Datei hinzuzufügen, klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie Hinzufügen > Neues Element aus. Wählen Sie die TypeScript JSON-Konfigurationsdatei aus und klicken Sie dann auf Hinzufügen.

    Wenn nicht alle Elementvorlagen angezeigt werden, wählen Sie Alle Vorlagen anzeigen und dann die Elementvorlage aus.

    Visual Studio fügt die Datei tsconfig.json zum Projektstamm hinzu. Sie können mit dieser Datei für den TypeScript-Compiler Optionen konfigurieren.

  4. Öffnen Sie die Datei tsconfig.json, und legen Sie die von Ihnen gewünschten Compileroptionen fest.

    Im folgenden Beispiel wird eine einfache tsconfig.json-Datei dargestellt.

    {
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "dist"
  },
  "include": [
    "scripts/**/*"
  ]
}

    In diesem Beispiel:

    • include informiert den Compiler darüber, wo sich die TypeScript-Dateien (*.ts) befinden.
    • Die Option outDir gibt den Ausgabeordner für die einfachen JavaScript-Dateien an, die vom TypeScript-Compiler transpiliert werden.
    • sourceMap gibt an, ob der Compiler sourceMap-Dateien generiert.

    Die oben genannte Konfiguration bietet nur eine grundlegende Einführung in die Konfiguration von TypeScript. Informationen zu weiteren Optionen finden Sie unter tsconfig.json.

Erstellen der Anwendung

  1. Fügen Sie TypeScript-Dateien ( .ts) oder TypeScript JSX-Dateien ( .tsx) zu Ihrem Projekt hinzu, und fügen Sie dann TypeScript-Code hinzu. Hier sehen Sie ein einfaches Beispiel für TypeScript:

    let message: string = 'Hello World';
console.log(message);

  2. Fügen Sie in der package.json mithilfe der folgenden Skripts Unterstützung für die Visual Studio-Befehle zum Kompilieren und Bereinigen hinzu.

    "scripts": {
  "build": "tsc --build",
  "clean": "tsc --build --clean"
},

    Wenn Sie ein Drittanbietertool wie webpack zum Kompilieren verwenden, können Sie Ihrer package.json-Datei ein befehlszeilenbasiertes Buildskript hinzufügen:

    "scripts": {
   "build": "webpack-cli app.tsx --config webpack-config.js"
}

    Ein Beispiel für die Verwendung von webpack mit React und eine webpack-Konfigurationsdatei finden Sie unter Erstellen einer Web-App mit Node.js und React.

    Ein Beispiel für die Verwendung von Vue.js mit TypeScript finden Sie unter Erstellen einer Vue.js-Anwendung.

  3. Wenn Sie Optionen wie die Startseite, den Pfad zur Node.js-Runtime, den Anwendungsport oder Laufzeitargumente konfigurieren müssen, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten, und wählen Sie Eigenschaften aus.

    Hinweis

    Beim Konfigurieren von Drittanbietertools verwenden Node.js-Projekte nicht die unter Tools>Optionen>Projekte und Projektmappen>Webpaketverwaltung>Externe Webtools konfigurierten Pfade. Diese Einstellungen werden für andere Projekttypen verwendet.

  4. Wählen Sie Erstellen > Projektmappe erstellen aus.

    Die App wird automatisch erstellt, wenn Sie sie ausführen. Folgender Fall kann jedoch während des Buildprozesses auftreten:

    Wenn Sie Quellzuordnungsdateien generiert haben, öffnen Sie den in der outDir-Option angegebenen Ordner. Dort finden Sie die generierten *.js-Dateien sowie die generierten *js.map-Dateien.

    Quellzuordnungsdateien werden zum Debuggen benötigt.

Ausführen der Anwendung

Eine Anleitung zum Ausführen der App nach ihrer Kompilierung finden Sie unter Erstellen einer Node.js- und Express-App.

Automatisieren von Buildaufgaben

Sie können den Taskausführungs-Explorer in Visual Studio verwenden, um Aufgaben für Drittanbietertools wie npm und webpack zu automatisieren.

  • NPM Task Runner – fügt Unterstützung für in package.json definierte npm-Skripts hinzu. Unterstützt Yarn.
  • Webpack Task Runner – fügt Unterstützung für webpack hinzu.

Zugehöriger Inhalt

Eigenschaften, React, Angular, Vue