Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
+49 (0) 351/8 33 82-0

TypeScript-Tipps: Code-Qualität einfach erhöhen

In diesem Beitrag schauen wir uns die automatischen Prüfungen an, die sich für TypeScript aktivieren lassen. Diese erkennen Fehler frühzeitig und weisen auf Qualitätsdefizite hin. Dabei unterstützen uns Visual Studio Code und der TypeScript-Compiler.

In der Reihe TypeScript-Tipps kümmern wir uns heute um das Tooling für Entwickler und Architekten. Es gibt zahlreiche Fehler, die man sowohl in JavaScript, als auch in TypeScript begehen kann. TypeScript ist zwar das bessere JavaScript, führt aber nicht in jedem Fall automatisch zu einer höheren Code-Qualität.

In diesem Beitrag schauen wir uns die automatischen Prüfungen an, die sich für TypeScript aktivieren lassen. Diese erkennen Fehler frühzeitig und weisen auf Qualitätsdefizite hin. Dabei unterstützen uns Visual Studio Code und der TypeScript-Compiler.

Wer findet alle Fehler in folgendem Code?

Das folgende Beispiel soll eine fiktive Logging-Klasse darstellen. Sie bietet rund um das Logging verschiedene Funktionen.

Leider steckt die Klasse voller Fehler und Makel, die allerdings alle nicht die Compilierung zu JavaScript verhindern. Die Fehler machen sich dann unter Umständen zur Laufzeit bemerkbar, oder später in der Wartung.

Wieviele Fehler sind es? Die Auflösung folgt im nächsten Abschnitt.

Fehler automatisch aufdecken und Code-Qualität erhöhen

Visual Studio und der TypeScript-Compiler sind in der Lage, sämtliche Fehler und Defizite in der Code-Qualität im Beispiel oben automatisch zu erkennen. Standardmäßig sind jedoch nicht alle Prüfungen aktiviert. Das wollen wir nachholen.

Mittels tsc –init erzeugen wir eine tsconfig.json im selben Verzeichnis wie die TypeScript-Datei. (Der TypeScript-Compiler tsc muss dafür zuvor mittels npm install typescript -g installiert worden sein.)

In der tsconfig.json lassen sich die Prüfungen einkommentieren und aktivieren:

Und sofort füllt sich die TypeScript-Datei mit roten und grünen „squiggly lines“, bunt angemahnten Code-Stellen.

Kommentare beschreiben hier zusätzlich die erkannten Probleme:

Nicht alle hervorgehobenen Stellen im Code sind wirklich Fehler. Sie können aber als Code niedriger Qualität eingestuft werden, der bestimmte Qualitätsmerkmale der Software beeinträchtigen kann. Hartgesottene JavaScript-Entwickler wird einiges davon vielleicht nicht scheuen, aber in einem gemixten Team kann solcher Code schnell zu Problemen führen.

Hier also die Auflösung: Es sind 10 Codestellen, über die man nachgedacht haben sollte.

Und der verbesserte Code könnte so aussehen:

Kürzer und fehlerfreier.

Zusammefassung

Wir haben gelernt, wie sich verschiedene Prüfungen für TypeScript-Code aktivieren lassen. Visual Studio Code und der TypeScript-Compiler bilden dabei ein starkes Team und unterstützen die Fehlerbehebung visuell. Einzelne Prüfungen können in der tsconfig.json aktiviert oder deaktiviert werden. Die Code-Qualität lässt sich dadurch erhöhen und Laufzeitfehler vermeiden.

Happy Coding!

Kommentar hinterlassen


Pin It on Pinterest