TypeScript in Visual Studio Code

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

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

tsc --version

Eine weitere Option ist die lokale Installation des TypeScript-Compilers in Ihrem Projekt (npm install --save-dev typescript), was den Vorteil hat, mögliche Konflikte mit anderen TypeScript-Projekten zu vermeiden.

Hallo Welt

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

mkdir HelloWorld
cd HelloWorld
code .

Erstellen Sie im Dateiexplorer eine neue Datei namens helloworld.ts.

Fügen Sie nun den folgenden TypeScript-Code hinzu. Sie werden das TypeScript-Schlüsselwort let und die string-Typdeklaration 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 helloworld.js JavaScript-Datei.

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 nun var.

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

IntelliSense

IntelliSense bietet Ihnen intelligente Code-Vervollständigung, Hover-Informationen und Signaturhilfe, damit Sie Code schneller und korrekter schreiben können.

VS Code bietet IntelliSense für einzelne TypeScript-Dateien sowie für TypeScript tsconfig.json-Projekte.

Hover-Informationen

Fahren Sie mit der Maus über ein TypeScript-Symbol, um schnell dessen Typinformationen und relevante Dokumentation anzuzeigen.

Sie können die Hover-Informationen auch an der aktuellen Cursorposition mit der Tastenkombination ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) anzeigen lassen.

Signaturhilfe

Während Sie einen TypeScript-Funktionsaufruf schreiben, zeigt VS Code Informationen zur Funktionssignatur an und hebt den Parameter hervor, den Sie gerade vervollständigen.

Signaturhilfe wird automatisch angezeigt, wenn Sie ( oder , innerhalb eines Funktionsaufrufs eingeben. Verwenden Sie ⇧⌘Space (Windows, Linux Ctrl+Shift+Space), um die Signaturhilfe manuell auszulösen.

Snippets

Neben intelligenten Code-Vervollständigungen enthält VS Code auch grundlegende TypeScript-Snippets, die während der Eingabe vorgeschlagen werden.

Sie können Erweiterungen installieren, um zusätzliche Snippets zu erhalten, oder eigene Snippets für TypeScript definieren. Weitere Informationen finden Sie unter Benutzerdefinierte Snippets.

Tipp: Sie können Snippets deaktivieren, indem Sie editor.snippetSuggestions in Ihrer Einstellungsdatei auf "none" setzen. Wenn Sie Snippets sehen möchten, können Sie die Reihenfolge relativ zu den Vorschlägen festlegen: oben ("top"), unten ("bottom") oder alphabetisch sortiert ("inline"). Der Standardwert ist "inline".

Fehler und Warnungen

Der TypeScript-Sprachdienst analysiert Ihr Programm auf Codierungsprobleme und meldet Fehler und Warnungen.

• In der Statusleiste wird eine Zusammenfassung der Fehler- und Warnungszähler angezeigt.
• Sie können auf die Zusammenfassung klicken oder ⇧⌘M (Windows, Linux Ctrl+Shift+M) drücken, um das Fenster PROBLEME mit einer Liste aller aktuellen Fehler anzuzeigen.
• Wenn Sie eine Datei mit Fehlern oder Warnungen öffnen, werden diese inline im Text und im Übersichtsbalken dargestellt.

Um durch Fehler oder Warnungen in der aktuellen Datei zu springen, können Sie F8 oder ⇧F8 (Windows, Linux Shift+F8) drücken. Dies zeigt eine Inline-Zone mit Details zum Problem und möglichen Code Actions (falls verfügbar) an.

Code-Navigation

Code-Navigation ermöglicht es Ihnen, TypeScript-Projekte schnell zu durchsuchen.

• Definition aufrufen F12 - Gehen Sie zum Quellcode der Definition eines Symbols.
• Definition anzeigen ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - Öffnet ein Vorschaufenster, das die Definition eines Symbols anzeigt.
• Referenzen aufrufen ⇧F12 (Windows, Linux Shift+F12) - Zeigt alle Referenzen auf ein Symbol an.
• Typdefinition aufrufen - Gehen Sie zum Typ, der ein Symbol definiert. Für eine Instanz einer Klasse wird hierdurch die Klasse selbst angezeigt, anstatt wo die Instanz definiert ist.
• Implementierung springen ⌘F12 (Windows, Linux Ctrl+F12) - Springen Sie zu den Implementierungen einer Schnittstelle oder einer abstrakten Methode.

Sie können über die Symbolsuche navigieren, indem Sie die Befehle Symbol aufrufen aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) verwenden.

• Symbol in Datei aufrufen ⇧⌘O (Windows, Linux Ctrl+Shift+O)
• Symbol im Arbeitsbereich aufrufen ⌘T (Windows, Linux Ctrl+T)

Formatierung

VS Code enthält einen TypeScript-Formatter, der eine grundlegende Code-Formatierung mit sinnvollen Standardeinstellungen bietet.

Verwenden Sie die typescript.format.* Einstellungen, um den integrierten Formatter zu konfigurieren, z. B. um geschweifte Klammern auf einer eigenen Zeile anzuzeigen. Oder, wenn der integrierte Formatter stört, setzen Sie "typescript.format.enable" auf false, um ihn zu deaktivieren.

Für spezialisiertere Code-Formatierungsstile sollten Sie eine der Formatierungs-Erweiterungen aus dem VS Code Marketplace installieren.

Refactoring

VS Code bietet einige praktische Refactorings für TypeScript, wie z. B. Funktion extrahieren und Konstante extrahieren. Wählen Sie einfach den Quellcode aus, den Sie extrahieren möchten, und klicken Sie dann auf die Glühbirne in der Spalte oder drücken Sie (⌘. (Windows, Linux Ctrl+.)), um verfügbare Refactorings anzuzeigen.

Weitere Informationen zu Refactorings und wie Sie Tastenkombinationen für einzelne Refactorings konfigurieren können, finden Sie unter TypeScript Refactoring.

Umbenennen

Eines der einfachsten Refactorings ist das Umbenennen einer Methode oder Variablen. Drücken Sie F2, um das Symbol unter dem Cursor in Ihrem gesamten TypeScript-Projekt umzubenennen.

Debugging

VS Code bietet eine hervorragende Debugging-Unterstützung für TypeScript, einschließlich Unterstützung für Sourcemaps. Setzen Sie Breakpoints, inspizieren Sie Objekte, navigieren Sie im Aufrufstapel und führen Sie Code in der Debug-Konsole aus. Weitere Informationen finden Sie unter TypeScript debuggen und dem allgemeinen Debugging-Thema.

Client-seitiges Debugging

Sie können Ihren client-seitigen Code mit einem Browser-Debugger debuggen, wie z. B. dem integrierten Edge- und Chrome-Debugger oder dem Debugger for Firefox.

Server-seitiges Debugging

Debuggen Sie Node.js in VS Code mit dem integrierten Debugger. Die Einrichtung ist einfach und ein Node.js Debugging-Tutorial hilft Ihnen dabei.

Linter

Linter liefern Warnungen für verdächtig aussehenden Code. Obwohl VS Code keinen integrierten TypeScript-Linter enthält, sind TypeScript-Linter-Erweiterungen im Marketplace erhältlich.

ESLint ist ein beliebter Linter, der auch TypeScript unterstützt. Die ESLint-Erweiterung integriert ESLint in VS Code, sodass Sie Linting-Fehler direkt im Editor sehen und viele davon sogar schnell mit Quick Fixes beheben können. Der ESLint-Plugin-Leitfaden beschreibt, wie ESLint für Ihre TypeScript-Projekte konfiguriert wird.

TypeScript-Erweiterungen

VS Code bietet standardmäßig viele Funktionen für TypeScript. Zusätzlich zu den integrierten Funktionen können Sie eine Erweiterung für erweiterte Funktionalität installieren.

Tipp: Klicken Sie auf eine Erweiterungskachel oben, um die Beschreibung und Bewertungen zu lesen und zu entscheiden, welche Erweiterung am besten für Sie geeignet ist. Mehr erfahren Sie im Marketplace.

Nächste Schritte

Um mehr zu erfahren, siehe

• TypeScript-Tutorial - Erstellen Sie ein einfaches Hallo-Welt-TypeScript in VS Code.
• TypeScript bearbeiten - Spezifische Bearbeitungsfunktionen für TypeScript.
• TypeScript Refactoring - Nützliche Refactorings aus dem TypeScript-Sprachdienst.
• TypeScript kompilieren - Kompilieren Sie TypeScript in eine JavaScript-Zielversion.
• TypeScript debuggen - Erfahren Sie, wie Sie TypeScript sowohl serverseitig als auch clientseitig mit VS Code debuggen.

Häufig gestellte Fragen

Kann ich die Version von TypeScript verwenden, die mit VS 2022 geliefert wird?

Nein, der TypeScript-Sprachdienst, 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.

Wie kann ich die neueste TypeScript-Beta-Version mit VS Code verwenden?

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

Sie können auch VS Code konfigurieren, um eine bestimmte TypeScript-Version zu verwenden.