Refactoring von Legacy-Code in TypeScript: von A bis Z

Refactoring von Legacy-Code in TypeScript: von A bis Z

Die Arbeit mit Legacy-Code ist für viele Entwickler eine unvermeidliche Realität. Oft sind solche Projekte in "nacktem" JavaScript ohne Typen geschrieben, enthalten verworrene Abhängigkeiten und es fehlen Tests. TypeScript bietet eine leistungsstarke Toolbox zur schrittweisen Verbesserung solchen Codes, um ihn sicherer, lesbarer und wartbarer zu machen. In diesem Artikel gehen wir den Weg von der Analyse des alten Codes bis zur Erstellung einer sauberen, typisierten Architektur.

1. Vorbereitung und Strategie: Wo anfangen?

Bevor Sie den Code ändern, müssen Sie ein "Sicherheitsnetz" schaffen. Die Hauptregel des Refactorings: Zerstöre nicht das Funktionierende. Beginnen Sie mit der Einrichtung der Umgebung.

1.1. Initialisierung von TypeScript und strikter Modus

Installieren Sie TypeScript und erstellen Sie eine Konfigurationsdatei tsconfig.json. Anfangs können Sie die strengen Prüfungen deaktivieren, um nicht in Fehlern zu ertrinken, aber nach und nach sollten Sie sie aktivieren.

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true, // Beginnen Sie mit false, dann schrittweise aktivieren    "noImplicitAny": true,    "strictNullChecks": true,    "outDir": "./dist",    "rootDir": "./src",    "allowJs": true, // Erlaubt das Mischen von JS und TS    "checkJs": false // JS-Dateien vorerst nicht prüfen  },  "include": ["src/**/*"]}

1.2. Automatisierung und Tests

Fügen Sie einen Linter (ESLint) und einen Formatierer (Prettier) hinzu. Wenn es keine Tests gibt, schreiben Sie zumindest Integrationstests für kritische Bereiche. Das ist Ihre Absicherung gegen Regressionen.

• ESLint mit dem Plugin für TypeScript fängt logische Fehler ab.
• Jest oder Vitest für Modultests.
• Richten Sie Pre-Commit-Hooks (Husky) ein, damit der Code vor dem Commit geprüft wird.

2. Schrittweise Migration: von JS zu TS

Versuchen Sie nicht, alles auf einmal umzuschreiben. Verwenden Sie einen iterativen Ansatz. Das beste Werkzeug hierfür ist allowJs: true in der tsconfig. Dies ermöglicht das Einbinden von JavaScript-Dateien aus TypeScript.

2.1. Umbenennung von Dateien und grundlegende Typisierung

Beginnen Sie mit der Umbenennung der einfachsten Dateien wie utils.js oder helpers.js in .ts. Der Compiler wird sich über implizite any beschweren. Ihre Aufgabe ist es, die Funktionssignaturen zu beschreiben.

Vorher (JavaScript):

function calculateDiscount(price, percent) {  return price - (price * percent / 100);}

Nachher (TypeScript):

function calculateDiscount(price: number, percent: number): number {  return price - (price * percent / 100);}

2.2. Arbeiten mit "any" und "unknown"

In Legacy-Code gibt es viele implizite any. Versuchen Sie nicht, sofort alles perfekt zu typisieren. Verwenden Sie any als temporäre Lösung, aber markieren Sie es mit TODO. Für Daten aus externen Quellen (API, localStorage) verwenden Sie besser unknown mit anschließender Typprüfung.

// Temporäre Lösungfunction processData(data: any) {  // TODO: Richtigen Typ hinzufügen  console.log(data.name);}

// Korrekter Ansatz für externe Datenfunction processUserData(data: unknown) {  if (typeof data === 'object' && data !== null && 'id' in data) {    const user = data as { id: number; name: string };    console.log(user.name);  }}

3. Refactoring komplexer Konstrukte

Wenn die grundlegende Typisierung abgeschlossen ist, gehen Sie zur Verbesserung der Architektur über. Legacy-Code leidet oft unter "göttlichen Objekten" und verworrenen Aufrufketten.

3.1. Herausziehen von Interfaces und Typen

Anstatt Objekte mit unbekannter Struktur zu übergeben, erstellen Sie Interfaces. Dies macht den Code selbst-dokumentierend.

// Schlechtfunction saveUser(user: any) {  // Unklar, welche Felder user hat}

// Gu