Refactoring von TypeScript

Source code refactoring kann die Qualität und Wartbarkeit Ihres Projekts verbessern, indem Ihr Code neu strukturiert wird, ohne das Laufzeitverhalten zu ändern. Visual Studio Code unterstützt Refactoring-Operationen (Refactorings) wie Methode extrahieren und Variable extrahieren, um Ihre Codebasis direkt in Ihrem Editor zu verbessern.

Visual Studio Code verfügt über integrierte Unterstützung für TypeScript-Refactoring durch den TypeScript-Sprachdienst. In diesem Thema demonstrieren wir die Refactoring-Unterstützung mit dem TypeScript-Sprachdienst.

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

Refactoring

Um die verfügbaren TypeScript-Refactorings anzuzeigen, positionieren Sie Ihren Cursor auf einem Bereich Ihres Quellcodes und klicken Sie entweder mit der rechten Maustaste, um das Kontextmenü des Editors zu öffnen und Refactor auszuwählen, oder drücken Sie direkt ⌃⇧R (Windows, Linux Ctrl+Shift+R).

Weitere Informationen zu Refactorings und zur Konfiguration von Tastenkombinationen für einzelne Refactorings finden Sie unter Refactorings.

Verfügbare TypeScript-Refactorings umfassen

• In Methode oder Funktion extrahieren - Extrahiert die ausgewählten Anweisungen oder Ausdrücke in eine neue Methode oder eine neue Funktion in der Datei.

  

  Nachdem Sie das Refactoring In Methode extrahieren oder In Funktion extrahieren ausgewählt haben, geben Sie den Namen der extrahierten Methode/Funktion ein.

• In Konstante extrahieren - Extrahiert den ausgewählten Ausdruck in eine neue Konstante in der Datei.

  

• Typ in Interface oder Typ-Alias extrahieren - Extrahiert den ausgewählten komplexen Typ in ein Interface oder einen Typ-Alias.

  

• In neue Datei verschieben - Verschiebt eine oder mehrere Klassen, Funktionen, Konstanten oder Interfaces im obersten Gültigkeitsbereich der Datei in eine neue Datei. Der Name der neuen Datei wird aus dem Namen des ausgewählten Symbols abgeleitet.

  

• Zwischen benannten und Namespace-Imports konvertieren - Konvertiert zwischen benannten Imports (import { Name } from './foo') und Namespace-Imports (import * as foo from './foo').

  

• Zwischen Standard- und benanntem Export konvertieren - Konvertiert von der Verwendung eines export default zu einem benannten Export (export const Foo = ...).

• Parameter in destrukturierbares Objekt konvertieren - Schreibt eine Funktion, die eine lange Liste von Argumenten annimmt, so um, dass sie ein einzelnes Argumentobjekt annimmt.

• Getter und Setter generieren - Kapselt eine ausgewählte Klasseneigenschaft durch Generierung eines Getters und Setters dafür.

  

• Rückgabetyperkennung für Funktionen - Fügt Funktionen explizite Rückgabetyp-Annotationen hinzu.

  

• Klammern bei Arrow-Funktionen hinzufügen/entfernen - Konvertiert einzeilige Arrow-Funktionen in mehrzeilige und umgekehrt.

Schnelle Korrekturen

Quick Fixes sind vorgeschlagene Bearbeitungen, die einfache Codierungsfehler beheben. Beispielhafte Quick Fixes sind

• Hinzufügen eines fehlenden this zu einem Mitgliedszugriff.
• Behebung eines falsch geschriebenen Eigenschaftsnamens.
• Entfernen von unerreichbarem Code oder ungenutzten Importen
• Deklarieren

Wenn Sie den Cursor auf einen TypeScript-Fehler bewegen, zeigt VS Code eine Glühbirne an, die darauf hinweist, dass Quick Fixes verfügbar sind. Klicken Sie auf die Glühbirne oder drücken Sie ⌘. (Windows, Linux Ctrl+.), um eine Liste der verfügbaren Quick Fixes und Refactorings anzuzeigen.

Zusätzlich ist Code Action Widget: Nearby Quick Fixes einschließen (editor.codeActionWidget.includeNearbyQuickFixes) eine standardmäßig aktivierte Einstellung, die den nächstgelegenen Quick Fix auf einer Zeile von ⌘. (Windows, Linux Ctrl+.) (Befehls-ID editor.action.quickFix) aktiviert, unabhängig davon, wo sich Ihr Cursor auf 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.

Unbenutzte Variablen und unerreichbarer Code

Unbenutzter TypeScript-Code, wie z. B. der else-Block einer if-Anweisung, die immer wahr ist, oder ein nicht referenzierter Import, wird im Editor ausgegraut

Sie können diesen ungenutzten Code schnell entfernen, indem Sie den Cursor darauf platzieren und den Quick Fix-Befehl (⌘. (Windows, Linux Ctrl+.)) auslösen oder auf die Glühbirne klicken.

Um das Ausgrauen von unbenutztem Code zu deaktivieren, setzen Sie "editor.showUnused" auf false. Sie können das Ausgrauen von unbenutztem Code nur in TypeScript deaktivieren, indem Sie

"[typescript]": {
    "editor.showUnused":  false
},
"[typescriptreact]": {
    "editor.showUnused":  false
},

Importe organisieren

Die Quellcode-Aktion Importe organisieren sortiert die Imports in einer TypeScript-Datei und entfernt ungenutzte Imports

Sie können Importe organisieren aus dem Kontextmenü Source Action oder mit der Tastenkombination ⇧⌥O (Windows, Linux Shift+Alt+O) ausführen.

Importe organisieren kann auch automatisch beim Speichern einer TypeScript-Datei erfolgen, indem Sie

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

Importe nach Dateiverschiebung aktualisieren

Wenn Sie eine Datei verschieben oder umbenennen, die von anderen Dateien in Ihrem TypeScript-Projekt importiert wird, kann VS Code automatisch alle Importpfade aktualisieren, die auf die verschobene Datei verweisen.

Die Einstellung typescript.updateImportsOnFileMove.enabled steuert dieses Verhalten. Gültige Einstellungswerte sind

• "prompt" - Der Standardwert. Fragt bei jeder Dateiverschiebung, ob die Pfade aktualisiert werden sollen.
• "always" - Pfade immer automatisch aktualisieren.
• "never" - Pfade nicht automatisch aktualisieren und nicht nachfragen.

Codeaktionen beim Speichern

Die Einstellung editor.codeActionsOnSave ermöglicht es Ihnen, eine Reihe von Code-Aktionen zu konfigurieren, die beim Speichern einer Datei ausgeführt werden. Sie können beispielsweise Importe organisieren beim Speichern aktivieren, indem Sie

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

Derzeit werden die folgenden Aufzählungen unterstützt

• explicit (Standard): Löst Code-Aktionen beim expliziten Speichern aus. Entspricht true.
• always: Löst Codeaktionen beim expliziten Speichern und bei Autosaves aufgrund von Fenster- oder Fokuswechseln aus.
• never: Löst niemals Codeaktionen beim Speichern aus. Gleiche Funktionalität wie false.

Sie können editor.codeActionsOnSave auch auf ein Array von Code-Aktionen setzen, die nacheinander ausgeführt werden sollen.

Hier sind einige Quellaktionen

• "organizeImports" - Aktiviert das Organisieren von Imports beim Speichern.
• "fixAll" - Auto Fix beim Speichern berechnet alle möglichen Korrekturen in einer Runde (für alle Anbieter, einschließlich ESLint).
• "fixAll.eslint" - Nur Auto Fix für ESLint.
• "addMissingImports" - Fügt beim Speichern alle fehlenden Imports hinzu.

Weitere Informationen finden Sie unter TypeScript.

Code-Vorschläge

VS Code schlägt automatisch einige gängige Codevereinfachungen vor, wie z. B. die Umwandlung einer Kette von .then-Aufrufen eines Promises zur Verwendung von async und await

Setzen Sie "typescript.suggestionActions.enabled" auf false, um Vorschläge zu deaktivieren.

Nächste Schritte

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

• TypeScript bearbeiten - Erfahren Sie mehr über die Bearbeitungsfunktionen von VS Code für TypeScript.
• TypeScript debuggen - Konfigurieren Sie den Debugger für Ihr TypeScript-Projekt.