Kompilieren von TypeScript

TypeScript ist eine typisierte Obermenge von JavaScript, die zu reinem JavaScript transpiliert. Es bietet Klassen, Module und Schnittstellen, die Ihnen beim Erstellen robuster Komponenten helfen.

Installieren des TypeScript-Compilers

Visual Studio Code enthält die Sprachunterstützung für TypeScript, aber nicht den TypeScript-Compiler tsc. Sie müssen den TypeScript-Compiler entweder global oder in Ihrem Arbeitsbereich installieren, um TypeScript-Quellcode in JavaScript zu transpilieren (tsc HelloWorld.ts).

Der einfachste Weg, TypeScript zu installieren, ist über npm, den Node.js Paketmanager. Wenn Sie npm installiert haben, können Sie TypeScript global (-g) auf Ihrem Computer installieren, indem Sie

npm install -g typescript

Sie können Ihre Installation testen, indem Sie die Version oder Hilfe überprüfen.

tsc --version
tsc --help

Eine weitere Option ist die lokale Installation des TypeScript-Compilers in Ihrem Projekt (npm install --save-dev typescript), was den Vorteil hat, dass mögliche Interaktionen mit anderen TypeScript-Projekten, die Sie möglicherweise haben, vermieden werden.

Compiler versus Language Service

Es ist wichtig zu beachten, dass der TypeScript-Language-Service von VS Code vom installierten TypeScript-Compiler getrennt ist. Sie können die TypeScript-Version von VS Code in der Statusleiste der Sprache sehen, wenn Sie eine TypeScript-Datei öffnen.

Später in diesem Artikel besprechen wir, wie Sie die Version des TypeScript-Language-Services ändern können, die VS Code verwendet.

tsconfig.json

Der typische erste Schritt in jedem neuen TypeScript-Projekt ist das Hinzufügen einer tsconfig.json-Datei. Eine tsconfig.json-Datei definiert die TypeScript Projekteinstellungen, wie z. B. die Compiler-Optionen und die einzuschließenden Dateien. Öffnen Sie dazu den Ordner, in dem Sie Ihre Quellen speichern möchten, und fügen Sie eine neue Datei namens tsconfig.json hinzu. In dieser Datei hilft Ihnen IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) weiter.

Ein einfaches tsconfig.json sieht für ES5, CommonJS Module und Source Maps wie folgt aus

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "sourceMap": true
  }
}

Wenn Sie nun eine .ts-Datei als Teil des Projekts erstellen, bieten wir Ihnen umfangreiche Bearbeitungsmöglichkeiten und Syntaxvalidierung.

Transpilieren von TypeScript in JavaScript

VS Code integriert sich über unsere integrierte Aufgabenverwaltung mit tsc. Wir können dies verwenden, um .ts-Dateien in .js-Dateien zu transpilieren. Ein weiterer Vorteil der Verwendung von VS Code-Aufgaben ist, dass Sie die integrierte Fehler- und Warnungserkennung im Probleme-Panel erhalten. Lassen Sie uns ein einfaches TypeScript Hello World-Programm transpilieren.

Schritt 1: Erstellen einer einfachen TS-Datei

Öffnen Sie VS Code in einem leeren Ordner und erstellen Sie eine Datei namens helloworld.ts. Fügen Sie den folgenden Code in diese Datei ein...

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

Um zu testen, ob Sie den TypeScript-Compiler tsc korrekt installiert haben und ein funktionierendes Hello World-Programm haben, öffnen Sie ein Terminal und geben Sie tsc helloworld.ts ein. Sie können das integrierte Terminal (⌃` (Windows, Linux Ctrl+`)) direkt in VS Code verwenden.

Sie sollten nun die transpilierte helloworld.js JavaScript-Datei sehen, die Sie ausführen können, wenn Sie Node.js installiert haben, indem Sie node helloworld.js eingeben.

Schritt 2: Ausführen des TypeScript-Builds

Führen Sie Build-Aufgabe ausführen (⇧⌘B (Windows, Linux Ctrl+Shift+B)) aus dem globalen Menü Terminal aus. Wenn Sie im vorherigen Abschnitt eine tsconfig.json-Datei erstellt haben, sollte die folgende Auswahl angezeigt werden.

Wählen Sie den Eintrag tsc: build. Dies erzeugt eine Datei HelloWorld.js und eine Datei HelloWorld.js.map im Arbeitsbereich.

Wenn Sie tsc: watch gewählt haben, überwacht der TypeScript-Compiler Änderungen an Ihren TypeScript-Dateien und führt den Transpiler bei jeder Änderung aus.

Unter der Haube führen wir den TypeScript-Compiler als Aufgabe aus. Der von uns verwendete Befehl lautet: tsc -p .

Schritt 3: Festlegen des TypeScript-Builds als Standard

Sie können die TypeScript-Build-Aufgabe auch als Standard-Build-Aufgabe definieren, sodass sie direkt ausgeführt wird, wenn Sie Build-Aufgabe ausführen (⇧⌘B (Windows, Linux Ctrl+Shift+B)) auslösen. Wählen Sie dazu Standard-Build-Aufgabe konfigurieren aus dem globalen Menü Terminal. Dies zeigt Ihnen eine Auswahl mit den verfügbaren Build-Aufgaben. Wählen Sie TypeScript tsc: build, was die folgende tasks.json-Datei in einem .vscode-Ordner generiert.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

Beachten Sie, dass die Aufgabe ein group JSON-Objekt hat, das die kind der Aufgabe auf build setzt und sie zur Standardaufgabe macht. Wenn Sie nun den Befehl Build-Aufgabe ausführen auswählen oder (⇧⌘B (Windows, Linux Ctrl+Shift+B)) drücken, werden Sie nicht aufgefordert, eine Aufgabe auszuwählen, und Ihre Kompilierung beginnt.

Tipp: Sie können das Programm auch mit der Ausführen/Debuggen-Funktion von VS Code ausführen. Details zum Ausführen und Debuggen von Node.js-Anwendungen in VS Code finden Sie im Node.js-Tutorial.

Schritt 4: Überprüfung von Build-Problemen

Das VS Code-Aufgabensystem kann auch Build-Probleme über einen Problem-Matcher erkennen. Ein Problem-Matcher analysiert die Build-Ausgabe basierend auf dem spezifischen Build-Tool und bietet eine integrierte Anzeige und Navigation von Problemen. VS Code wird mit vielen Problem-Matchern geliefert, und $tsc, das oben in tasks.json zu sehen ist, ist der Problem-Matcher für die Ausgabe des TypeScript-Compilers.

Wenn es beispielsweise einen einfachen Fehler (ein zusätzliches 'g' in console.log) in unserer TypeScript-Datei gäbe, könnten wir die folgende Ausgabe von tsc erhalten.

HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.

Dies würde im Terminal-Panel (⌃` (Windows, Linux Ctrl+`)) angezeigt und die Auswahl von Tasks - build tsconfig.json in der Dropdown-Liste der Terminalansicht.

Sie können die Fehler- und Warnungsanzahl in der Statusleiste sehen. Klicken Sie auf das Fehler- und Warnungs-Symbol, um eine Liste der Probleme zu erhalten und zu ihnen zu navigieren.

Sie können auch die Tastatur verwenden, um die Liste zu öffnen ⇧⌘M (Windows, Linux Ctrl+Shift+M).

Tipp: Aufgaben bieten umfangreiche Unterstützung für viele Aktionen. Weitere Informationen zur Konfiguration finden Sie im Thema Aufgaben.

JavaScript Source Map-Unterstützung

TypeScript-Debugging unterstützt JavaScript-Source-Maps. Um Source-Maps für Ihre TypeScript-Dateien zu generieren, kompilieren Sie mit der Option --sourcemap oder setzen Sie die Eigenschaft sourceMap in der Datei tsconfig.json auf true.

Inline-Source-Maps (eine Source-Map, bei der der Inhalt als Data-URL statt als separate Datei gespeichert wird) werden ebenfalls unterstützt, obwohl Inline-Source noch nicht unterstützt wird.

Ausgabeverzeichnis für generierte Dateien

Wenn die generierte JavaScript-Datei im selben Ordner wie die TypeScript-Quelle liegt, wird dies in größeren Projekten schnell unübersichtlich. Sie können das Ausgabeverzeichnis für den Compiler mit dem Attribut outDir angeben.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out"
  }
}

Ausblenden von abgeleiteten JavaScript-Dateien

Wenn Sie mit TypeScript arbeiten, möchten Sie in der Regel keine generierten JavaScript-Dateien im Datei-Explorer oder in Suchergebnissen sehen. VS Code bietet Filterfunktionen mit einer files.exclude Arbeitsbereichseinstellung, und Sie können ganz einfach einen Ausdruck erstellen, um diese abgeleiteten Dateien auszublenden.

**/*.js: { "when": "$(basename).ts" }

Dieses Muster passt auf jede JavaScript-Datei (**/*.js), aber nur, wenn eine gleichnamige TypeScript-Datei vorhanden ist. Der Datei-Explorer zeigt abgeleitete Ressourcen für JavaScript nicht mehr an, wenn sie am selben Speicherort kompiliert werden.

Fügen Sie die Einstellung files.exclude mit einem Filter in die Arbeitsbereichsdatei settings.json ein, die sich im Ordner .vscode im Stammverzeichnis des Arbeitsbereichs befindet. Sie können die Arbeitsbereichsdatei settings.json über den Befehl Einstellungen: Arbeitsbereichseinstellungen (JSON) öffnen aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) öffnen.

Um JavaScript-Dateien auszublenden, die sowohl aus .ts- als auch aus .tsx-Quelldateien generiert wurden, verwenden Sie diesen Ausdruck

"files.exclude": {
    "**/*.js": { "when": "$(basename).ts" },
    "**/**.js": { "when": "$(basename).tsx" }
}

Dies ist ein kleiner Trick. Die Such- Glob-Muster werden als Schlüssel verwendet. Die obigen Einstellungen verwenden zwei verschiedene Glob-Muster, um zwei eindeutige Schlüssel bereitzustellen, aber die Suche passt immer noch auf dieselben Dateien.

Verwenden neuerer TypeScript-Versionen

VS Code wird mit einer aktuellen stabilen Version des TypeScript-Language-Services ausgeliefert und verwendet diese standardmäßig, um IntelliSense in Ihrem Arbeitsbereich bereitzustellen. Die Arbeitsbereichsversion von TypeScript ist unabhängig von der Version von TypeScript, die Sie zum Kompilieren Ihrer *.ts-Dateien verwenden. Sie können die integrierte TypeScript-Version von VS Code für IntelliSense in den meisten gängigen Fällen ohne Bedenken verwenden, aber manchmal müssen Sie die Version von TypeScript ändern, die VS Code für IntelliSense verwendet.

Gründe für diese Vorgehensweise sind

• Ausprobieren der neuesten TypeScript-Funktionen durch Wechseln zum TypeScript Nightly Build (typescript@next).
• Sicherstellen, dass Sie dieselbe TypeScript-Version für IntelliSense verwenden, die Sie auch zum Kompilieren Ihres Codes verwenden.

Die aktive TypeScript-Version und ihr Installationsort können in der Statusleiste angezeigt werden, wenn Sie die Versionsnummer aus der Statusleiste der Sprache mit der Anzeige einer TypeScript-Datei angeheftet haben.

Sie haben mehrere Optionen, wenn Sie die Standardversion von TypeScript in Ihrem Arbeitsbereich ändern möchten.

Verwenden der Arbeitsbereichsversion von TypeScript

Wenn Ihr Arbeitsbereich eine bestimmte TypeScript-Version hat, können Sie zwischen der Arbeitsbereichsversion von TypeScript und der von VS Code standardmäßig verwendeten Version wechseln, indem Sie eine TypeScript- oder JavaScript-Datei öffnen und auf die TypeScript-Versionsnummer in der Statusleiste klicken. Ein Nachrichtenfeld wird angezeigt und fragt Sie, welche Version von TypeScript VS Code verwenden soll.

Verwenden Sie dies, um zwischen der Version von TypeScript, die mit VS Code geliefert wird, und der Version von TypeScript in Ihrem Arbeitsbereich zu wechseln. Sie können den TypeScript-Versionsselektor auch mit dem Befehl TypeScript: TypeScript-Version auswählen auslösen.

VS Code erkennt automatisch Arbeitsbereichsversionen von TypeScript, die unter node_modules im Stammverzeichnis Ihres Arbeitsbereichs installiert sind. Sie können VS Code auch explizit mitteilen, welche TypeScript-Version verwendet werden soll, indem Sie typescript.tsdk in Ihren Benutzer- oder Arbeitsbereichseinstellungen einstellen. Die Einstellung typescript.tsdk sollte auf ein Verzeichnis verweisen, das die TypeScript-Datei tsserver.js enthält. Sie können den TypeScript-Installationsort mit npm list -g typescript finden. Die Datei tsserver.js befindet sich normalerweise im Ordner lib.

Zum Beispiel

{
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

Tipp: Um eine bestimmte TypeScript-Version zu erhalten, geben Sie @version während der npm-Installation an. Für TypeScript 3.6.0 würden Sie beispielsweise npm install --save-dev typescript@3.6.0 verwenden. Um die nächste Version von TypeScript vorab anzuzeigen, führen Sie npm install --save-dev typescript@next aus.

Beachten Sie, dass, obwohl typescript.tsdk in diesen Beispielen auf das Verzeichnis lib innerhalb von typescript verweist, das Verzeichnis typescript eine vollständige TypeScript-Installation sein muss, die die package.json-Datei von TypeScript enthält.

Sie können VS Code auch anweisen, eine bestimmte TypeScript-Version in einem bestimmten Arbeitsbereich zu verwenden, indem Sie eine typescript.tsdk-Arbeitsbereichseinstellung hinzufügen, die auf das Verzeichnis der Datei tsserver.js verweist.

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

Die Einstellung typescript.tsdk des Arbeitsbereichs teilt VS Code nur mit, dass eine Arbeitsbereichsversion von TypeScript vorhanden ist. Um die Arbeitsbereichsversion tatsächlich für IntelliSense zu verwenden, müssen Sie den Befehl TypeScript: TypeScript-Version auswählen ausführen und die Arbeitsbereichsversion auswählen.

Verwenden von TypeScript Nightly Builds

Der einfachste Weg, die neuesten TypeScript-Funktionen in VS Code auszuprobieren, ist die Installation der JavaScript and TypeScript Nightly Erweiterung.

Diese Erweiterung ersetzt automatisch die integrierte TypeScript-Version von VS Code durch den neuesten TypeScript Nightly Build. Stellen Sie einfach sicher, dass Sie zur Verwendung der TypeScript-Version von VS Code zurückkehren, wenn Sie Ihre TypeScript-Version mit dem Befehl TypeScript: TypeScript-Version auswählen konfiguriert haben.

Gemischte TypeScript- und JavaScript-Projekte

Es ist möglich, gemischte TypeScript- und JavaScript-Projekte zu haben. Um JavaScript innerhalb eines TypeScript-Projekts zu aktivieren, können Sie die Eigenschaft allowJs in der Datei tsconfig.json auf true setzen.

Tipp: Der tsc-Compiler erkennt die Anwesenheit einer jsconfig.json-Datei nicht automatisch. Verwenden Sie das Argument –p, damit tsc Ihre jsconfig.json-Datei verwendet, z. B. tsc -p jsconfig.json.

Arbeiten mit großen Projekten

Wenn Sie in einer Codebasis mit Hunderten oder Tausenden von TypeScript-Dateien arbeiten, gibt es einige Schritte, die Sie unternehmen können, um sowohl die Bearbeitungserfahrung in VS Code als auch die Kompilierungszeiten auf der Kommandozeile zu verbessern.

Stellen Sie sicher, dass Ihr tsconfig nur die Dateien enthält, die Sie benötigen

Verwenden Sie include oder files in der tsconfig.json Ihres Projekts, um sicherzustellen, dass das Projekt nur die Dateien enthält, die Teil des Projekts sein sollen.

Weitere Informationen zur Konfiguration der tsconfig.json Ihres Projekts.

Teilen Sie Ihr Projekt mit Projektverweisen auf

Anstatt Ihren Quellcode als ein einziges großes Projekt zu strukturieren, können Sie die Leistung verbessern, indem Sie ihn mit Projektverweisen in kleinere Projekte aufteilen. Dies ermöglicht es TypeScript, nur eine Teilmenge Ihrer Codebasis gleichzeitig zu laden, anstatt die gesamte.

Siehe die TypeScript-Dokumentation für Details zur Verwendung von Projektverweisen und Best Practices für die Arbeit mit ihnen.

Nächste Schritte

Lesen Sie weiter, um mehr über Folgendes zu erfahren:

• TypeScript bearbeiten - Spezifische Bearbeitungsfunktionen für TypeScript.
• TypeScript Refactoring - Nützliche Refactorings aus dem TypeScript-Sprachdienst.
• TypeScript debuggen - Konfigurieren Sie den Debugger für Ihr TypeScript-Projekt.

Häufig gestellte Fragen

Wie behebe ich den TypeScript-Fehler "Cannot compile external module"?

Wenn Sie diesen Fehler erhalten, beheben Sie ihn, indem Sie eine tsconfig.json-Datei im Stammordner Ihres Projekts erstellen. Die Datei tsconfig.json ermöglicht es Ihnen zu steuern, wie Visual Studio Code Ihren TypeScript-Code kompiliert. Weitere Informationen finden Sie in der Übersicht über tsconfig.json.

Warum erhalte ich andere Fehler und Warnungen mit VS Code als beim Kompilieren meines TypeScript-Projekts?

VS Code wird mit einer aktuellen stabilen Version des TypeScript-Language-Services ausgeliefert und stimmt möglicherweise nicht mit der Version von TypeScript überein, die global auf Ihrem Computer oder lokal in Ihrem Arbeitsbereich installiert ist. Aus diesem Grund können Sie Unterschiede zwischen Ihrer Compiler-Ausgabe und den von der aktiven TypeScript-Language-Service erkannten Fehlern feststellen. Siehe Verwenden neuerer TypeScript-Versionen für Details zur Installation einer passenden TypeScript-Version.

Kann ich die mit VS 2022 gelieferte TypeScript-Version verwenden?

Nein, der TypeScript-Language-Service, der mit Visual Studio 2019 und 2022 geliefert wird, ist nicht mit VS Code kompatibel. Sie müssen eine separate Version von TypeScript von npm installieren.

Warum werden einige Fehler als Warnungen gemeldet?

Standardmäßig zeigt VS Code TypeScript Code-Stil-Probleme als Warnungen anstelle von Fehlern an. Dies gilt für

• Variable ist deklariert, aber nie verwendet
• Eigenschaft ist deklariert, aber ihr Wert wird nie gelesen
• Unerreichbarer Code erkannt
• Unbenutztes Label
• Fall-durch-Fall in Switch
• Nicht alle Code-Pfade geben einen Wert zurück

Die Behandlung dieser als Warnungen ist konsistent mit anderen Tools wie TSLint. Diese werden weiterhin als Fehler angezeigt, wenn Sie tsc von der Befehlszeile ausführen.

Sie können dieses Verhalten deaktivieren, indem Sie "typescript.reportStyleChecksAsWarnings": false in Ihren Benutzereinstellungen einstellen.