TypeScript bearbeiten

Visual Studio Code bietet eine hervorragende Unterstützung für die Bearbeitung von TypeScript. Dieser Artikel geht detailliert auf die Bearbeitungs- und Programmiersprachenfunktionen ein, die in VS Code integriert sind. Wenn Sie mehr über allgemeine Bearbeitungsfunktionen in VS Code erfahren möchten, wie z. B. Tastenkombinationen, Mehrfachcursor, Suchen und Suchen und Ersetzen, lesen Sie Grundlegende Bearbeitung.

IntelliSense

IntelliSense zeigt 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 an der aktuellen Cursorposition auch mit der Tastenkombination ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) anzeigen.

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

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

Snippets

VS Code enthält grundlegende TypeScript-Snippets, die beim Tippen vorgeschlagen werden;

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

Inline-Hinweise

Inlay-Hinweise fügen zusätzliche Inline-Informationen zum Quellcode hinzu, um Ihnen das Verständnis des Codes zu erleichtern.

Parametername-Inlay-Hinweise zeigen die Namen von Parametern in Funktionsaufrufen an

Dies kann Ihnen helfen, die Bedeutung jedes Arguments auf einen Blick zu verstehen, was besonders hilfreich für Funktionen ist, die boolesche Flags annehmen oder Parameter haben, die leicht verwechselt werden können.

Um Parametername-Hinweise zu aktivieren, setzen Sie typescript.inlayHints.parameterNames.enabled. Es gibt drei mögliche Werte

• none — Parameter-Inlay-Hinweise deaktivieren.
• literals — Inlay-Hinweise nur für Literale anzeigen (Zeichenkette, Zahl, Boolean).
• all — Inlay-Hinweise für alle Argumente anzeigen.

Inline-Hinweise für Variablentypen zeigen die Typen von Variablen an, die keine expliziten Typannotationen haben.

Einstellung: typescript.inlayHints.variableTypes.enabled

Inline-Hinweise für Eigenschaftstypen zeigen den Typ von Klasseneigenschaften an, die keine explizite Typannotation haben.

Einstellung: typescript.inlayHints.propertyDeclarationTypes.enabled

Parametertyp-Hinweise zeigen die Typen von implizit typisierten Parametern an.

Einstellung: typescript.inlayHints.parameterTypes.enabled

Rückgabetyp-Inline-Hinweise zeigen die Rückgabetypen von Funktionen an, die keine explizite Typannotation haben.

Einstellung: typescript.inlayHints.functionLikeReturnTypes.enabled

CodeLens für Referenzen

Die CodeLens für TypeScript-Referenzen zeigt eine Inline-Anzahl von Referenzen für Klassen, Schnittstellen, Methoden, Eigenschaften und exportierte Objekte an

Sie können dies aktivieren, indem Sie "typescript.referencesCodeLens.enabled": true in der Datei "Benutzereinstellungen" festlegen.

Klicken Sie auf die Referenzanzahl, um schnell eine Liste der Referenzen zu durchsuchen

CodeLens für Implementierungen

Die CodeLens für TypeScript-Implementierungen zeigt die Anzahl der Implementierer einer Schnittstelle an

Sie können dies aktivieren, indem Sie "typescript.implementationsCodeLens.enabled": true festlegen.

Wie bei der CodeLens für Referenzen können Sie auf die Implementierungsanzahl klicken, um schnell eine Liste aller Implementierungen zu durchsuchen.

Automatische Importe

Automatische Importe beschleunigen das Codieren, indem sie Ihnen helfen, verfügbare Symbole zu finden und automatisch Importe dafür hinzuzufügen.

Beginnen Sie einfach zu tippen, um Vorschläge für alle verfügbaren TypeScript-Symbole in Ihrem aktuellen Projekt anzuzeigen.

Wenn Sie einen der Vorschläge aus einer anderen Datei oder einem anderen Modul auswählen, fügt VS Code automatisch einen Import dafür am Anfang der Datei hinzu. In diesem Beispiel fügt VS Code einen Import für Hercules am Anfang der Datei hinzu.

Sie können automatische Importe deaktivieren, indem Sie "typescript.suggest.autoImports": false festlegen.

Importe beim Einfügen hinzufügen

Wenn Sie Code zwischen Editoren kopieren und einfügen, kann VS Code automatisch Importe hinzufügen, wenn der Code eingefügt wird. Wenn Sie Code einfügen, der ein undefiniertes Symbol enthält, wird eine Einfügekontrolle angezeigt, mit der Sie zwischen dem Einfügen als einfacher Text oder dem Hinzufügen von Importen wählen können.

Diese Funktion ist standardmäßig aktiviert, aber Sie können sie deaktivieren, indem Sie die Einstellung typescript.updateImportsOnPaste.enabled umschalten.

Sie können das Einfügen mit Importen zum Standardverhalten machen, ohne die Einfügekontrolle anzuzeigen, indem Sie die Einstellung editor.pasteAs.preferences konfigurieren. Fügen Sie text.updateImports.jsts oder text.updateImports hinzu, um beim Einfügen immer Importe hinzuzufügen.

JSX und automatische schließende Tags

Die TypeScript-Funktionen von VS Code funktionieren auch mit JSX. Um JSX in Ihrem TypeScript zu verwenden, verwenden Sie die Dateierweiterung *.tsx anstelle der normalen *.ts

VS Code enthält auch JSX-spezifische Funktionen wie das automatische Schließen von JSX-Tags in TypeScript

Setzen Sie "typescript.autoClosingTags" auf false, um das Schließen von JSX-Tags zu deaktivieren.

JSDoc-Unterstützung

Das TypeScript IntelliSense von VS Code versteht viele Standard- JSDoc-Annotationen und verwendet diese, um Typinformationen und Dokumentation in Vorschlägen, Hover-Informationen und Signaturhilfe anzuzeigen.

Beachten Sie, dass Sie bei der Verwendung von JSDoc für TypeScript-Code keine Typannotationen einfügen sollten. Der TypeScript-Compiler verwendet nur TypeScript-Typannotationen und ignoriert die von JSDoc.

Um JSDoc-Kommentarvorschläge in TypeScript zu deaktivieren, setzen Sie "typescript.suggest.completeJSDocs": false.

Code-Navigation

Die 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 finden ⌘F12 (Windows, Linux Ctrl+F12) - Gehen 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 vernünftigen Standardeinstellungen bietet.

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

Für spezialisiertere Code-Formatierungsstile können Sie versuchen, eine der Formatierungs-Erweiterungen aus dem VS Code Marketplace zu installieren.

Syntaxhervorhebung und semantische Hervorhebung

Zusätzlich zur Syntaxhervorhebung bieten TypeScript und JavaScript auch semantische Hervorhebung.

Die Syntaxhervorhebung färbt den Text basierend auf lexikalischen Regeln. Die semantische Hervorhebung bereichert die Syntaxfärbung basierend auf aufgelösten Symbolinformationen aus dem Sprachdienst.

Ob die semantische Hervorhebung sichtbar ist, hängt vom aktuellen Farbschema ab. Jedes Thema kann konfigurieren, ob semantische Hervorhebung angezeigt werden soll und wie es semantische Tokens formatiert.

Wenn die semantische Hervorhebung aktiviert ist und das Farbschema eine entsprechende Formatierungsregel definiert hat, können unterschiedliche Farben und Stile angezeigt werden.

Die semantische Hervorhebung kann Farben ändern basierend auf

• Der aufgelöste Typ eines Symbols: Namespace, Variable, Eigenschaft, Variable, Klasse, Schnittstelle, Typ-Parameter.
• Ob die Variable/Eigenschaft schreibgeschützt (const) oder veränderbar ist.
• Ob der Variabel-/Eigenschaftstyp aufrufbar (ein Funktionstyp) ist oder nicht.

Nächste Schritte

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

• TypeScript umgestalten - Erfahren Sie mehr über die nützlichen Umgestaltungen, die für TypeScript verfügbar sind.
• TypeScript debuggen - Konfigurieren Sie den Debugger für Ihr TypeScript-Projekt.