Kompilieren von TypeScript-Code (Node.js)

Verwenden Sie das TypeScript npm-Paket, um TypeScript-Unterstützung zu Projekten hinzuzufügen, die auf dem JavaScript Project System (JSPS)oder .esprojbasieren. Ab Visual Studio 2019 wird empfohlen, das npm-Paket anstelle des TypeScript SDK zu verwenden. Das TypeScript npm-Paket bietet eine größere Portabilität auf verschiedenen Plattformen und Umgebungen.

Wichtig

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

Hinzufügen der TypeScript-Unterstützung mithilfe von 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-Sprachdiensts im Editor geladen.

1. Überprüfen Sie, ob Sie irgendeine Entwicklungslast für Visual Studio oder die Node.js-Laufzeit installieren müssen.

   Für Projekte, die mit dem JavaScript Project System (JSPS) oder .esprojerstellt wurden, sind keine zusätzlichen Workloads erforderlich. Sie müssen nur npm (https://www.npmjs.com/) installieren, das in Node.jsenthalten ist.

   Für den älteren Projekttyp (.njsproj) müssen Sie das Node.js Entwicklungspaket und die Node.js-Laufzeitumgebung installieren.

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

   Öffnen Sie im Projektmappen-Explorer im Bereich auf der rechten Seite die Datei package.json im Stamm des Projekts. Die aufgelisteten Pakete entsprechen Paketen unter dem npm-Knoten im Projektmappen-Explorer. Weitere Informationen finden Sie unter Verwalten von npm-Paketen.

   Für ein Node.js Projekt können Sie das TypeScript npm-Paket mithilfe der Befehlszeile oder der IDE installieren. Wenn Sie die IDE verwenden möchten, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den npm-Knoten, wählen Sie Neues npm-Paket installierenaus, 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 es noch nicht enthält, fügen Sie ihrem Projektstamm eine tsconfig.json Datei hinzu. Um die Datei hinzuzufügen, klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie Hinzufügen > Neues Elementaus. Wählen Sie die TypeScript JSON-Konfigurationsdateiaus, und klicken Sie dann auf Hinzufügen.

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

   Visual Studio fügt die tsconfig.json Datei zum Projektstamm hinzu. Sie können diese Datei verwenden, um Optionen für den TypeScript-Compiler zu konfigurieren.

4. Öffnen Sie tsconfig.json, und aktualisieren Sie, um die gewünschten Compileroptionen festzulegen.

   Ein Beispiel für eine einfache tsconfig.json Datei folgt.

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

   In diesem Beispiel:

   • einschließen teilt dem Compiler mit, wo TypeScript-Dateien (*.ts) gefunden werden sollen.
   • outDir Option gibt den Ausgabeordner für die einfachen JavaScript-Dateien an, die vom TypeScript-Compiler transpiliert werden.
   • option "sourceMap" gibt an, ob der Compiler sourceMap- Dateien generiert.

   Die vorherige Konfiguration bietet nur eine grundlegende Einführung in die Konfiguration von TypeScript. Weitere Informationen zu anderen Optionen finden Sie unter tsconfig.json.

Erstellen der Anwendung

1. Fügen Sie TypeScript (.ts) oder TypeScript JSX (TSX-)-Dateien zu Ihrem Projekt hinzu, und fügen Sie dann TypeScript-Code hinzu. Ein einfaches Beispiel für TypeScript folgt:

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

2. Fügen Sie in package.jsonmithilfe der folgenden Skripts Unterstützung für Visual Studio-Build- und Clean-Befehle hinzu.

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

   Um mit einem Drittanbietertool wie webpack zu arbeiten, können Sie Ihrer package.json Datei ein Befehlszeilen-Build-Skript hinzufügen:

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

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.

   Anmerkung

   Beim Konfigurieren von Drittanbietertools verwenden Node.js Projekte nicht die Pfade, die unter Tools>Optionen>Projekte und Lösungen>Webpaketverwaltung>externen Webtoolskonfiguriert sind. 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. Während des Buildvorgangs kann jedoch Folgendes 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

Anweisungen zum Ausführen der App nach dem Kompilieren finden Sie unter Erstellen einer Node.js- und Express-App-.

Automatisieren von Buildtasks

Sie können den Task-Runner-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 npm-Skripts hinzu, die in package.jsondefiniert sind. Unterstützt Yarn.
• Webpack Task Runner – Fügt Unterstützung für webpack hinzu.

Verwandte Inhalte

Eigenschaften, React, Angular, Vue