10 Strategien zur Migration zu TypeScript

Dieses Kapitel gibt einen Überblick über Strategien zur Migration von Codebasen von JavaScript zu TypeScript. Es werden auch Materialien für weiterführende Lektüre erwähnt.

10.1 Drei Strategien

Dies sind drei Strategien zur Migration zu TypeScript

• Wir können eine Mischung aus JavaScript- und TypeScript-Dateien für unsere Codebasis unterstützen. Wir beginnen mit nur JavaScript-Dateien und wechseln dann immer mehr Dateien zu TypeScript.

• Wir können unseren aktuellen (nicht-TypeScript-) Build-Prozess und unsere reine JavaScript-Codebasis beibehalten. Wir fügen statische Typinformationen über JSDoc-Kommentare hinzu und verwenden TypeScript als Typ-Checker (nicht als Compiler). Sobald alles korrekt typisiert ist, wechseln wir zum Bauen zu TypeScript.

• Bei großen Projekten kann es während der Migration zu viele TypeScript-Fehler geben. Dann können Snapshot-Tests uns helfen, behobene und neue Fehler zu finden.

Weitere Informationen

• „Migration von JavaScript“ im TypeScript Handbook

10.2 Strategie: Gemischte JavaScript/TypeScript-Codebasen

Der TypeScript-Compiler unterstützt eine Mischung aus JavaScript- und TypeScript-Dateien, wenn wir die Compiler-Option --allowJs verwenden

• TypeScript-Dateien werden kompiliert.
• JavaScript-Dateien werden einfach in das Ausgabeverzeichnis kopiert (nach einigen einfachen Typ-Prüfungen).

Zuerst gibt es nur JavaScript-Dateien. Dann wechseln wir die Dateien nach und nach zu TypeScript. Währenddessen wird unsere Codebasis weiter kompiliert.

So sieht tsconfig.json aus

{
  "compilerOptions": {
    ···
    "allowJs": true
  }
}

Weitere Informationen

• „Inkrementelle Migration von JavaScript zu TypeScript“ von Clay Allsopp.

10.3 Strategie: Hinzufügen von Typinformationen zu reinen JavaScript-Dateien

Dieser Ansatz funktioniert wie folgt

• Wir verwenden weiterhin unsere aktuelle Build-Infrastruktur.
• Wir führen den TypeScript-Compiler aus, aber nur als Typ-Checker (Compiler-Option --noEmit). Zusätzlich zur Compiler-Option --allowJs (zum Zulassen und Kopieren von JavaScript-Dateien) müssen wir auch die Compiler-Option --checkJs verwenden (zum Typ-Prüfen von JavaScript-Dateien).
• Wir fügen Typinformationen über JSDoc-Kommentare (siehe Beispiel unten) und Deklarationsdateien hinzu.
• Sobald der Typ-Checker von TypeScript keine Beschwerden mehr hat, verwenden wir den Compiler, um die Codebasis zu erstellen. Der Wechsel von .js-Dateien zu .ts-Dateien ist jetzt nicht dringend, da die gesamte Codebasis bereits vollständig statisch typisiert ist. Wir können jetzt sogar Typdateien (Dateiendung .d.ts) erstellen.

So geben wir statische Typen für reines JavaScript über JSDoc-Kommentare an

/**
 * @param {number} x - The first operand
 * @param {number} y - The second operand
 * @returns {number} The sum of both operands
 */
function add(x, y) {
  return x + y;
}

/** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */
/** @typedef {(data: string, index?: number) => boolean} Predicate */

Weitere Informationen

• §4.4 „Verwenden des TypeScript-Compilers für reine JavaScript-Dateien“

• „Wie wir bei Unsplash schrittweise zu TypeScript migriert sind“ von Oliver Joseph Ash

10.4 Strategie: Migration großer Projekte durch Snapshot-Tests der TypeScript-Fehler

In großen JavaScript-Projekten kann der Wechsel zu TypeScript zu viele Fehler verursachen – unabhängig davon, welchen Ansatz wir wählen. Dann kann das Snapshot-Testen der TypeScript-Fehler eine Option sein

• Wir führen den TypeScript-Compiler zum ersten Mal auf der gesamten Codebasis aus.
• Die vom Compiler erzeugten Fehler werden unser anfänglicher Snapshot.
• Während wir an der Codebasis arbeiten, vergleichen wir die neue Fehlerausgabe mit dem vorherigen Snapshot
  • Manchmal verschwinden bestehende Fehler. Dann können wir einen neuen Snapshot erstellen.
  • Manchmal treten neue Fehler auf. Dann müssen wir entweder diese Fehler beheben oder einen neuen Snapshot erstellen.

Weitere Informationen

• „Wie man 100.000 Codezeilen schrittweise zu Typescript migriert“ von Dylan Vann

10.5 Fazit

Wir haben uns kurz mit Strategien zur Migration zu TypeScript beschäftigt. Zwei weitere Tipps

• Beginnen Sie Ihre Migration mit Experimenten: Spielen Sie mit Ihrer Codebasis und probieren Sie verschiedene Strategien aus, bevor Sie sich für eine davon entscheiden.
• Erstellen Sie dann einen klaren Plan für die Zukunft. Sprechen Sie mit Ihrem Team über die Priorisierung
  • Manchmal kann die schnelle Beendigung der Migration Priorität haben.
  • Manchmal ist es wichtiger, dass der Code während der Migration voll funktionsfähig bleibt.
  • Und so weiter…