© Teguh Jati Prasetyo/Shutterstock.com
Teil 4: Flow - Typsicherheit auf React-Art

Typsicherer Code mit Flow


Im Bereich von JavaScript-Bibliotheken und JavaScript-Werkzeugen hat Facebook in letzter Zeit viel Aufmerksamkeit erzeugt. Allen voran sind hier React und der Paketmanager Yarn zu nennen. Neben diesen bekannten Werkzeugen gibt es noch eine ganze Reihe momentan noch weniger bekannter Hilfsmittel aus dem Hause Facebook wie zum Beispiel das Testframework Jest oder den Type Checker Flow, der im Mittelpunkt dieses Artikels stehen wird.

Mit seinen ambitionierten Projekten schafft es Facebook, zusammen mit der Community ein Ökosystem aufzusetzen, mit dem sich Projekte sicher, schnell und mit hoher Qualität umsetzen lassen. Wir werfen einen genauen Blick unter die Haube von Flow. Sie lernen die wichtigsten Features von Flow kennen und sehen, wie Sie typsicheren Code in Ihrer JavaScript-Applikation schreiben können. Außerdem sehen Sie, was dieses Werkzeug für Sie und Ihre Applikation leisten kann. Zunächst erfahren Sie, wo Flow im Vergleich zu TypeScript steht und worin die wichtigsten Unterschiede zwischen beiden Werkzeugen liegen.

Warum ein Typsystem?

Bevor Sie sich nun in die Welt von Flow stürzen, sollten Sie sich zunächst die Frage stellen, welchen Nutzen Ihnen Typsicherheit in JavaScript bringt. Grundsätzlich bedeutet der Einsatz eines Typsystems einen gewissen Mehraufwand. Dies gilt sowohl für die Einarbeitung in die Bibliothek beziehungsweise die Sprache als auch für den zusätzlich erforderlichen Quellcode und die etwas erhöhte Komplexität.

Die Vorteile, die Flow Ihnen bietet, wiegen diese Nachteile jedoch sehr schnell wieder auf. Allen voran reduziert die Typsicherheit potenzielle Fehlerquellen. Gehen Sie hier nur einmal davon aus, Sie schreiben eine Funktion und können festlegen, welche Datentypen die einzelnen Argumente haben und welchen Typ die Funktion zurückgibt. Der Umgang mit derlei Funktionen gestaltet sich gerade in umfangreichen Applikationen wesentlich einfacher, da die angegebenen Typen einerseits die Schnittstelle der Funktion genau festlegen und so eine Form von Dokumentation darstellen, und das Typsystem andererseits sicherstellt, dass Sie diese Schnittstelle nicht verletzen. Rufen Sie in normalem JavaScript eine Funktion mit den falschen Datentypen auf, führt dies erst zur Laufzeit der Applikation zu einem Fehler. Mit einem Typsystem werden Sie bereits zum Zeitpunkt der Überprüfung des Quellcodes, also wesentlich früher, auf Ihren Fehler aufmerksam gemacht, was Ihnen unter dem Strich wertvolle Zeit spart. Insgesamt gewinnen Sie durch die Verwendung eines Typsystems an Sicherheit bei der Entwicklung, die sich gerade bei Umbauarbeiten im Quellcode bezahlt macht. In diesem Abschnitt war nur die Rede von einem abstrakten Typsystem. In der JavaScript-Welt gibt es, wie so oft, zahlreiche Lösungen für das gleiche Problem. Wirklich relevant sind aktuell aufgrund ihrer großen Verbreitung nur TypeScript und Flow. Diese beiden Werkzeuge unterscheiden sich jedoch in einigen zentralen Punkten wesentlich voneinander.

Die Unterschiede zwischen Flow und TypeScript

TypeScript wurde 2012 von Microsoft entwickelt. Es ist selbst in JavaScript geschrieben und ein Open-Source-Projekt, das auf GitHub verwaltet wird. Flow auf der anderen Seite ist etwas jünger. Der erste Commit wurde im Oktober 2014 getätigt. Auch Flow ist ein Open-Source-Projekt, dessen Quellcode Sie ebenfalls auf GitHub einsehen können. Damit enden die Gemeinsamkeiten jedoch auch schon. Im Gegensatz zu TypeScript ist Flow nicht in JavaScript, sondern in OCaml geschrieben. Der gravierendste Unterschied zwischen beiden besteht jedoch darin, dass TypeScript ein Transpiler und Flow ein statischer Type Checker ist. Transpiler bedeutet in diesem Fall, dass der TypeScript-Compiler den TypeScript-Code Ihrer Applikation entgegennimmt und ihn in JavaScript-Code umwandelt. TypeScript ist in der Lage, den Code so zu transformieren, dass ihn auch ältere Browser verstehen. Flow dagegen arbeitet mit regulärem JavaScript-Quellcode, der mit Annotationen versehen ist. Es wird keinerlei Transformation am Quellcode vorgenommen. Das hat allerdings den unschönen Nebeneffekt, dass auch die Annotationen nicht automatisch entfernt werden. Führen Sie Ihren Quellcode mit Flow-Annotationen aus, wird sehr schnell ein SyntaxError von der JavaScript Engine Ihres Browsers geworfen. Damit Sie Ihre Applikation ausführen können, benötigen Sie also weitere Hilfsmittel, wie beispielsweise Babel. Sobald das Set-up für Ihre Applikation steht, haben Sie keine weiteren Schwierigkeiten von Flow zu erwarten. Insgesamt ist Flow eine etwas leichtgewichtigere Alternative im Vergleich zu TypeScript. Benötigen Sie also das Transpiling von TypeScript nicht, ist Flow ein Werkzeug, das Sie für die Entwicklung Ihrer Applikation in Betracht ziehen sollten.

Installation und Konfiguration

Die statische Typprüfung mit Flow erfolgt mithilfe eines Pakets mit dem Namen flow-bin. Dieses können Sie in Ihrem Projekt mit dem Kommando yarn add --dev flow-bin installieren. Alternativ können Sie für die Installation natürlich auch npm verwenden. Bevor Sie Ihren Quellcode überprüfen können, müssen Sie Ihr Projekt zunächst initialisieren. Dies geschieht mit dem Befehl yarn run flow init. Das sorgt dafür, dass eine Konfigurationsdatei für Flow mit dem Namen .flowconfig in Ihrer Applikation erzeugt wird. Nach diesem Schritt können Sie nun zur eigentlichen Überprüfung Ihres Quellcodes übergehen. Diese starten Sie mit dem Kommando yarn run flow. Hier sehen Sie ein einfaches Beispiel, mit dem Sie Ihr Set-up testen können:

function greet(name: string): void { console.log('Hello ' + name); } greet(1);

Damit Flow Ihren Quellcode überprüfen kann, müssen Sie in die Datei, die den Quellcode enthält, den Kommentar aus der ersten Zeile des Beispiels einfügen. Fehlt dieser, bezieht Flow die Datei nicht in die Prüfung ein. Die Syntax zur Angabe von Typen in Flow gleicht der in TypeScript. Die Typinformation wird nach der zugehörigen Variable durch einen Doppelpunkt getrennt angegeben. Im Beispiel kommen der Typ string, also eine reguläre Zeichenkette, sowie void, ein leerer Typ, zum Einsatz. Die Funktion greet wird jedoch statt mit einer Zeichenkette mit einer Zahl aufgerufen. Das Ergebnis der Typprüfung ist erwartungsgemäß ein Fehler, da der erwartete und der tatsächliche Typ nicht kompatibel sind.

Damit Sie diesen Code nun entweder im Browser oder auch in Node.js ausführen können, müssen die Annotationen automatisiert entfernt werden. Die einfachste Möglichkeit, dies zu erreichen, ist die Verwendung von flow-remove-types. Dieses Werkzeug entfernt sämtliche Flow-spezifischen Angaben und hinterlässt nur gültigen und damit lauffähigen JavaScript-Code. Sie installieren es über Ihren Paketmanager mit dem Kommando yarn add --dev flow-remove-types. Liegt der Quellcode Ihrer Applikation beispielsweise in einem Verzeichnis mit dem Namen src, können Sie ihn mit dem folgenden Kommando ganz einfach transformieren: yarn run flow-remove-types src --pretty --out-dir dist. Dieser Befehl sorgt dafür, dass sämtliche Dateien, die im src-Verzeichnis liegen, in das Zielverzeichnis, das Sie mit der Option --out-dir angegeben haben, kopiert werden. Die Option --pretty sorgt dafür, dass unschöne Leerzeichen, die durch die Transformation entstehen, entfernt werden.

Die zweite, etwas aufwendigere, aber auch wesentlich mächtigere, Variante ist die Verwendung von Babel. Babel ist ein modular aufgebauter Compiler für JavaScript. Mit den babel-flow-presets ist Babel in der Lage, die Annotationen aus Ihrem Quellcode zu entfernen. De...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang