Technologie · Sprache

TypeScript — Typen statt Dokumentation, die niemand schreibt

TypeScript setzen wir ein, sobald Frontend-Code eine Größe erreicht, bei der niemand mehr alles im Kopf hat. Typen beschreiben, was eine Funktion erwartet und was aus einer Schnittstelle zurückkommt — und tun das dauerhaft, ohne dass jemand ein Wiki pflegt. Der Nutzen zeigt sich nicht beim Schreiben, sondern beim Ändern, ein Jahr später.

wo Frontend-Code größer wird

Was ist TypeScript?

TypeScript ist für uns kein anderes JavaScript, sondern dasselbe JavaScript mit einer Zusage darüber, was durch die Funktionen läuft.

Wofür wir TypeScript einsetzen

Überall dort, wo Frontend-Code mehr ist als ein paar Zeilen Interaktion. In Astro-Projekten schreiben wir Komponenten und Datenzugriffe typisiert. In Shopware-6-Themes typisieren wir die eigenen Plugins und die Übergabe zwischen Twig und JavaScript. Bei individuellen Oberflächen — Konfiguratoren, Redaktionswerkzeugen, Dashboards hinter dem Login — ist TypeScript für uns die Voraussetzung, nicht die Kür. Kleine Skripte in einer WordPress-Seite bleiben dagegen oft schlicht JavaScript.

Den größten Effekt hat TypeScript an Schnittstellen. Wenn eine REST- oder GraphQL-API Daten liefert, beschreiben Typen die Antwort, und der Compiler meldet sich, wenn das Backend ein Feld umbenennt oder optional macht. Aus OpenAPI-Beschreibungen lassen sich diese Typen erzeugen, statt sie abzutippen. Fehler dieser Art fallen sonst erst im Browser auf — im ungünstigen Fall beim Kunden, an einem Freitagnachmittag.

Wie wir damit arbeiten

Wir fangen streng an, weil das Nachziehen teurer ist. strict ist eingeschaltet, any braucht eine Begründung, und Typen aus fremden Paketen prüfen wir, statt ihnen zu glauben. Der Compiler läuft in der Continuous Integration, nicht nur auf dem Entwicklerrechner — sonst wird der erste rote Fehler irgendwann ignoriert. Für Bestandsprojekte gilt der umgekehrte Weg: schrittweise Migration, Datei für Datei, beginnend bei den Stellen, die am häufigsten angefasst werden.

Gebaut wird mit Vite, geprüft mit ESLint und dem TypeScript-Compiler getrennt voneinander — Bundler transpilieren, sie prüfen nicht. Typen halten wir nah an den Daten: eine Quelle für Formen, die Backend und Frontend teilen, statt zweier Definitionen, die auseinanderlaufen. Und wir schreiben keine Typen, die nur den Compiler beeindrucken. Ein generisches Ungetüm, das niemand liest, ist keine Dokumentation, sondern eine zweite Sprache im Projekt.

Grenzen: was TypeScript nicht leistet

TypeScript prüft, was der Compiler sieht — und der sieht nur Ihren Code. Alles, was zur Laufzeit von außen kommt, ist zunächst eine Behauptung: API-Antworten, Formulardaten, Werte aus dem Local Storage, Inhalte aus dem CMS. Wer sie ohne Prüfung als typisiert behandelt, hat Sicherheit auf dem Papier. An diesen Rändern validieren wir zur Laufzeit, etwa mit Zod. Ein Typfehler, den niemand prüft, ist ein Laufzeitfehler mit Vorlaufzeit.

Nicht jedes Projekt braucht TypeScript. Für ein paar Zeilen in einer Landingpage steht der Aufwand für Build, Konfiguration und Typdefinitionen in keinem Verhältnis; dort schreiben wir modernes JavaScript und gut. Auch ersetzt TypeScript keine Tests. Es prüft Formen, nicht Verhalten — dass eine Preisberechnung die richtige Zahl liefert, weiß der Compiler nicht. Und wo Typen nur mit Casts durchgehen, stimmt meist das Datenmodell nicht.

Häufige Fragen

Lohnt sich TypeScript auch in kleinen Projekten?

Bei wenigen Zeilen Frontend-Code lohnt sich TypeScript meistens nicht. Die Grenze verläuft dort, wo Code von mehreren Personen angefasst wird oder länger lebt als das Projekt, in dem er entstanden ist. Ab dieser Größe zahlt sich die Typisierung aus, weil Umbenennungen, Refaktorierungen und Schnittstellenänderungen sichtbar werden, statt still zu scheitern. Für ein Skript in einer Landingpage reicht modernes JavaScript.

Kann man ein bestehendes JavaScript-Projekt auf TypeScript umstellen?

Ja, eine Umstellung läuft schrittweise und ohne Neubau. TypeScript lässt sich neben JavaScript betreiben: Man aktiviert den Compiler, erlaubt zunächst gemischte Dateien und wandelt dann Modul für Modul um, beginnend bei den Stellen mit den meisten Änderungen. Wichtig ist, die Strenge früh hochzuziehen, statt jahrelang mit lockeren Einstellungen zu leben. Sonst entsteht ein Projekt, das TypeScript heißt und JavaScript bleibt.

Verhindert TypeScript Fehler im Livebetrieb?

TypeScript verhindert eine bestimmte Klasse von Fehlern, nämlich falsche Annahmen über Datenformen, und zwar vor dem Livegang statt danach. Was es nicht verhindert, sind Denkfehler in der Fachlogik und Daten, die zur Laufzeit anders aussehen als vereinbart. Deshalb prüfen wir eingehende Daten zusätzlich zur Laufzeit und schreiben Tests für das Verhalten. Typen und Tests beantworten unterschiedliche Fragen; wer eines gegen das andere tauscht, verliert.

TypeScript im Bestand oder im Neubau?

Wir übernehmen auch Systeme, die woanders gebaut wurden — nach einem Blick in Code und Hosting.

Womit wir sonst arbeiten

Anrufen Projekt anfragen