TypeScript-Tutorial in Visual Studio Code

TypeScript ist eine typisierte Obermenge von JavaScript, die zu reinem JavaScript kompiliert wird. Sie bietet Klassen, Module und Schnittstellen, um Ihnen beim Erstellen robuster Komponenten zu helfen.

Installieren Sie den TypeScript-Compiler

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 überprüfen.

tsc --version

Hallo Welt

Beginnen wir mit einem einfachen Hello World Node.js-Beispiel. Erstellen Sie einen neuen Ordner HelloWorld und starten Sie VS Code.

mkdir HelloWorld
cd HelloWorld
code .

Erstellen Sie im Datei-Explorer eine neue Datei namens helloworld.ts.

Fügen Sie nun den folgenden TypeScript-Code hinzu. Sie werden das TypeScript-Schlüsselwort let und die Typdeklaration string bemerken.

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

Um Ihren TypeScript-Code zu kompilieren, können Sie das integrierte Terminal (⌃` (Windows, Linux Ctrl+`)) öffnen und tsc helloworld.ts eingeben. Dies kompiliert und erstellt eine neue JavaScript-Datei helloworld.js.

Wenn Sie Node.js installiert haben, können Sie node helloworld.js ausführen.

Wenn Sie helloworld.js öffnen, werden Sie feststellen, dass es nicht sehr anders aussieht als helloworld.ts. Die Typinformationen wurden entfernt und let ist jetzt var.

var message = 'Hello World';
console.log(message);

IntelliSense

In VS Code erhalten Sie Sprachfunktionen wie Syntaxhervorhebung und Klammerabgleich. Während Sie im Editor getippt haben, haben Sie möglicherweise IntelliSense bemerkt, die intelligenten Code-Vervollständigungen und Vorschläge, die von VS Code und dem TypeScript-Sprachserver bereitgestellt werden. Unten sehen Sie die Methoden von console

Wenn Sie eine Methode auswählen, erhalten Sie dann Hilfe zu den Parametern und können jederzeit Informationen durch Hovern erhalten.

tsconfig.json

Bisher in diesem Tutorial haben Sie sich auf das Standardverhalten des TypeScript-Compilers verlassen, um Ihren TypeScript-Quellcode zu kompilieren. Sie können die Optionen des TypeScript-Compilers ändern, indem Sie eine tsconfig.json-Datei hinzufügen, die die TypeScript-Einstellungen des Projekts, wie die Projekteinstellungen und die einzuschließenden Dateien, definiert. Sie können die Compileroptionen ändern.

Wichtig: Um tsconfig.json für den Rest dieses Tutorials zu verwenden, rufen Sie tsc ohne Eingabedateien auf. Der TypeScript-Compiler weiß, dass er Ihre tsconfig.json für Projekteinstellungen und Compileroptionen sucht.

Fügen Sie eine einfache tsconfig.json hinzu, die die Optionen zum Kompilieren nach ES5 und zur Verwendung von **CommonJS**- Modulen festlegt.

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

Beim Bearbeiten von tsconfig.json hilft Ihnen IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) auf dem Weg.

Standardmäßig enthält TypeScript alle .ts-Dateien im aktuellen Ordner und in Unterordnern, wenn das Attribut files nicht enthalten ist. Daher müssen wir helloworld.ts nicht explizit auflisten.

Ändern Sie die Build-Ausgabe

Die generierte JavaScript-Datei im selben Ordner wie der TypeScript-Quellcode wird bei 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"
  }
}

Löschen Sie helloworld.js und führen Sie den Befehl tsc ohne Optionen aus. Sie werden sehen, dass helloworld.js jetzt im Verzeichnis out platziert wird.

Weitere Informationen zu den Funktionen des TypeScript-Sprachdienstes und zur Verwendung von Tasks zum direkten Ausführen Ihrer Builds von VS Code aus finden Sie unter TypeScript kompilieren.

Fehlerprüfung

TypeScript hilft Ihnen, häufige Programmierfehler durch starke Typüberprüfung zu vermeiden. Wenn Sie beispielsweise einer message eine Zahl zuweisen, beschwert sich der TypeScript-Compiler mit 'error TS2322: Type '2' is not assignable to type 'string'. Sie können Typüberprüfungsfehler in VS Code sowohl im Editor (rote Wellenlinien mit Hover-Informationen) als auch im Problems-Panel (⇧⌘M (Windows, Linux Ctrl+Shift+M)) sehen. Das Präfix [ts] zeigt Ihnen an, dass dieser Fehler vom TypeScript-Sprachdienst stammt.

Schnelle Korrekturen

Der TypeScript-Sprachdienst verfügt über eine leistungsstarke Sammlung von Diagnosedaten zur Erkennung häufiger Codierungsprobleme. Er kann beispielsweise Ihren Quellcode analysieren und nicht erreichbaren Code erkennen, der im Editor gedimmt angezeigt wird. Wenn Sie mit der Maus über die Quellcodezeile fahren, sehen Sie eine Erklärung. Wenn Sie den Cursor auf der Zeile platzieren, erhalten Sie eine Glühbirne für schnelle Korrekturen.

Das Klicken auf die Glühbirne oder das Drücken von ⌘. (Windows, Linux Ctrl+.) öffnet das Menü für schnelle Korrekturen, in dem Sie die Korrektur Nicht erreichbaren Code entfernen auswählen können.

Zusätzlich ist **Code Action Widget: Include Nearby Quick Fixes** (editor.codeActionWidget.includeNearbyQuickFixes) eine standardmäßig aktivierte Einstellung, die die nächste schnelle Korrektur in einer Zeile von ⌘. (Windows, Linux Ctrl+.) (Befehls-ID editor.action.quickFix) aktiviert, unabhängig davon, wo sich Ihr Cursor in dieser Zeile befindet.

Der Befehl hebt den Quellcode hervor, der mit Quick Fixes refactored oder behoben wird. Normale Codeaktionen und nicht-fixierende Refactorings können weiterhin an der Cursorposition aktiviert werden.

Debugging

VS Code verfügt über integrierte Unterstützung für das Debugging von TypeScript. Um das Debugging von TypeScript in Kombination mit dem auszuführenden JavaScript-Code zu unterstützen, stützt sich VS Code auf Source Maps, damit der Debugger zwischen dem ursprünglichen TypeScript-Quellcode und dem ausgeführten JavaScript zuordnen kann. Sie können Source Maps während des Builds erstellen, indem Sie "sourceMap": true in Ihrer tsconfig.json festlegen.

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

Bauen Sie neu auf, indem Sie tsc ausführen. Sie sollten jetzt eine helloworld.js.map im Verzeichnis out neben helloworld.js haben.

Wenn helloworld.ts im Editor geöffnet ist, drücken Sie F5. Wenn Sie andere Debugger-Erweiterungen installiert haben, müssen Sie Node.js aus der Dropdown-Liste auswählen.

Der Debugger startet eine Sitzung, führt Ihren Code aus und zeigt die "Hello World"-Nachricht im Debug-Konsolenbereich an.

Setzen Sie in helloworld.ts einen Haltepunkt, indem Sie auf die linke Spalte des Editors klicken. Sie sehen einen roten Kreis, wenn der Haltepunkt gesetzt ist. Drücken Sie erneut F5. Die Ausführung wird angehalten, wenn der Haltepunkt erreicht wird, und Sie können Debugging-Informationen wie Variablenwerte und den Aufrufstapel in der Ansicht Ausführen und Debuggen (⇧⌘D (Windows, Linux Ctrl+Shift+D)) sehen.

Weitere Informationen zur integrierten Debugging-Unterstützung von VS Code für TypeScript und zur Konfiguration des Debuggers für Ihre Projektszenarien finden Sie unter Debugging von TypeScript.

Nächste Schritte

Dieses Tutorial war eine kurze Einführung in die Verwendung von VS Code für die TypeScript-Entwicklung. Lesen Sie weiter, um mehr über die Kompilierungs- und Debugging-Unterstützung von VS Code für TypeScript zu erfahren.

• TypeScript kompilieren - Nutzen Sie das leistungsstarke Task-System von VS Code zum Kompilieren von TypeScript.
• 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

Programm kann nicht gestartet werden, da die entsprechende JavaScript-Datei nicht gefunden wurde

Sie haben wahrscheinlich "sourceMap": true nicht in Ihrer tsconfig.json festgelegt, und der VS Code Node.js-Debugger kann Ihren TypeScript-Quellcode nicht dem ausgeführten JavaScript zuordnen. Aktivieren Sie Source Maps und bauen Sie Ihr Projekt neu auf.