Transpilieren von TypeScript-Code mithilfe von npm

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 Entwicklungsworkloads für Visual Studio oder die Node.js-Runtime 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 () installieren, das in Node.jsenthalten ist.

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

   Öffnen Sie in Projektmappen-Explorer (rechten Bereich) den package.json im Projektstamm. Die aufgelisteten Pakete entsprechen Paketen unter dem npm-Knoten in Projektmappen-Explorer. Weitere Informationen finden Sie unter Verwalten von npm-Paketen.

   Überprüfen Sie die Option npm im Fenster Ausgabe, um den Fortschritt bei der Paketinstallation anzuzeigen. Das installierte Paket wird unter dem Knoten npm in Projektmappen-Explorer 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 Datei tsconfig.json zum Projektstamm hinzu. Sie können diese Datei verwenden, um Optionen für tsc, den TypeScript-Compiler zu konfigurieren , der TypeScript in JavaScript transpiliert.

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 von tsc, dem 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.json Unterstützung für Visual Studio Build- und Clean-Befehle mithilfe der folgenden Skripts 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 Build- und Bereitstellungsoptionen wie die App-URL oder Laufzeitbefehle konfigurieren müssen, klicken Sie mit der rechten Maustaste auf den Projektknoten in Projektmappen-Explorer, und wählen Sie Properties aus.

   Anmerkung

   Verwenden Sie beim Konfigurieren von Drittanbietertools, Projekten mit dem JavaScript Project System (JSPS) oder .esproj nicht die Pfade, die unter Tools OptionsProjects and solutionsWeb Package ManagementExternal Web Tools konfiguriert 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

Automatisieren von Buildaufgaben

Sie können task Runner Explorer in Visual Studio verwenden, um Aufgaben für Drittanbietertools wie npm und webpack zu automatisieren.

Verwandte Inhalte

Eigenschaften, React, Angular, Vue