Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

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üm­mern wir uns heute um das Tooling für Entwickler und Architekten. Es gibt zahl­rei­che Fehler, die man sowohl in JavaScript, als auch in TypeScript bege­hen kann. TypeScript ist zwar das bes­sere JavaScript, führt aber nicht in jedem Fall auto­ma­tisch zu einer höhe­ren Code-Qualität.

In die­sem Beitrag schauen wir uns die auto­ma­ti­schen Prüfungen an, die sich für TypeScript akti­vie­ren las­sen. Diese erken­nen Fehler früh­zei­tig und wei­sen auf Qualitätsdefizite hin. Dabei unter­stüt­zen uns Visual Studio Code und der TypeScript-Compiler.

Wer findet alle Fehler in folgendem Code?

Das fol­gende Beispiel soll eine fik­tive Logging-Klasse dar­stel­len. Sie bie­tet rund um das Logging ver­schie­dene Funktionen.

Leider steckt die Klasse vol­ler Fehler und Makel, die aller­dings alle nicht die Compilierung zu JavaScript ver­hin­dern. Die Fehler machen sich dann unter Umständen zur Laufzeit bemerk­bar, oder spä­ter in der Wartung.

Wieviele Fehler sind es? Die Auflösung folgt im nächs­ten Abschnitt.

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

Visual Studio und der TypeScript-Compiler sind in der Lage, sämt­li­che Fehler und Defizite in der Code-Qualität im Beispiel oben auto­ma­tisch zu erken­nen. Standardmäßig sind jedoch nicht alle Prüfungen akti­viert. Das wol­len wir nach­ho­len.

Mittels tsc –init erzeu­gen wir eine tsconfig.json im sel­ben Verzeichnis wie die TypeScript-Datei. (Der TypeScript-Compiler tsc muss dafür zuvor mit­tels npm install typescript ‑g instal­liert wor­den sein.)

In der tsconfig.json las­sen sich die Prüfungen ein­kom­men­tie­ren und akti­vie­ren:

Und sofort füllt sich die TypeScript-Datei mit roten und grü­nen "squ­ig­gly lines", bunt ange­mahn­ten Code-Stellen.

Kommentare beschrei­ben hier zusätz­lich die erkann­ten Probleme:

Nicht alle her­vor­ge­ho­be­nen Stellen im Code sind wirk­lich Fehler. Sie kön­nen aber als Code nied­ri­ger Qualität ein­ge­stuft wer­den, der bestimmte Qualitätsmerkmale der Software beein­träch­ti­gen kann. Hartgesottene JavaScript-Entwickler wird eini­ges davon viel­leicht nicht scheuen, aber in einem gemix­ten Team kann sol­cher Code schnell zu Problemen füh­ren.

Hier also die Auflösung: Es sind 10 Codestellen, über die man nach­ge­dacht haben sollte.

Und der ver­bes­serte Code könnte so aus­se­hen:

Kürzer und feh­ler­freier.

Zusammefassung

Wir haben gelernt, wie sich ver­schie­dene Prüfungen für TypeScript-Code akti­vie­ren las­sen. Visual Studio Code und der TypeScript-Compiler bil­den dabei ein star­kes Team und unter­stüt­zen die Fehlerbehebung visu­ell. Einzelne Prüfungen kön­nen in der tsconfig.json akti­viert oder deak­ti­viert wer­den. Die Code-Qualität lässt sich dadurch erhö­hen und Laufzeitfehler ver­mei­den.

Happy Coding!

Related Posts

Pin It on Pinterest