Typsicheres JavaScript mit React Native - TypeScript und Flow im Vergleich

JavaScript ist die Webprogrammiersprache schlechthin und gehört überhaupt zu den populärsten Programmiersprachen. Sie ist für die Frontend-Entwicklung unverzichtbar und öffnet einem Webentwickler durch die zahlreichen Frameworks und Libraries immer neue Möglichkeiten. Allerdings kommt nicht jeder Programmierer so ganz ins Reine mit Javascript.

Ein großer Kritikpunkt an JavaScript war schon lange die mangelnde Typsicherheit. Programmierer, die aus typsicheren Programmiersprachen wie z. B. Java, C# oder C kommen, betrachten die mangelnde Typsicherheit als klaren Nachteil.

Das dachte sich auch Microsoft und veröffentlichte im Jahr 2012 TypeScript , eine statisch typisierte Programmiersprache, die zu JavaScript kompiliert wird.

TypeScript gegenüber steht der von Facebook 2014 veröffentlichte JavaScript-TypeChecker Flow. FlowTypes werden durch Babel zu validem JavaScript kompiliert.

Ich arbeite schon seit Anfang meines Praktikums bei Cap3 mit TypeScript und habe es sehr schätzen gelernt. Da man jedoch im Netz immer wieder auf Flow stößt, wollte ich den JavaScript-TypeChecker auch mal anhand einer simplen React Native Application ausprobieren und TypeScript gegenüberstellen.

Setup Das Setup von React Native mit TypeScript gestaltete sich lange Zeit als kompliziert. Heutzutage kann man mit einem Konsolenbefehl unter den richtigen Vorraussetzungen eine React Native Application erzeugen und dieser durch ein npm-Package und zwei selbst erstellte Dateien TypeScript hinzufügen. Einfach ist allerdings auch anders, da man in der Regel selbst immer noch Konfigurationen hinzufügen muss und die Vorlagen im Internet sich alle unterscheiden. Typdefinitionen der einzelnen Packages muss man über NPM oder YARN installieren und/oder aus GitHub-Repos kopieren.

Da Flow sowie React Native von Facebook entwickelt wurden, habe ich erwartet, dass sich das Setup als unkomplizierter erweist. Bei dem oben erwähnten Konsolenbefehl bekommt man Flow schon mitgeliefert. Ein paar Anpassungen und schon ist Flow konfiguriert. Ein paar Anpassungen? Also ist es trotzdem nicht wirklich unkomplizierter.

Für erfahrene Webprogrammierer stellt beides kein Problem dar. Für Anfänger allerdings kann es ziemlich frustrierend werden, das eine oder andere zum Laufen zu bringen. Wenn man also ohne Vorerfahrung mit React Native in Berührung kommt, neigt man eventuell eher dazu auf die beiden nützlichen Kontrahenten zu verzichten.

Workflow/Tooling In beiden Fällen sollte man in seiner IDE bestimmte Erweiterungen installieren. Bei TypeScript hat man allerdings eine deutlich größere Auswahl, sodass man noch deutlich schneller arbeiten kann als mit Flow. Das Linting von Flow hat nur ab und zu funktioniert bzw. nur wenn man das Dokument speichert oder etwas im Code ändert. Der TypeScript-Linter allerdings funktioniert immer so, wie man es sich wünscht.

Fehlermeldungen sind in TypeScript oft etwas erschlagend, jedoch wenn man sich an sie gewöhnt hat, geben sie einem wertvolle Hinweise. In Flow wirken die Fehlermeldungen oft etwas kryptisch und nicht wirklich hilfreich. Zudem habe ich Fehlermeldungen bekommen, die in den node_modules gefunden wurden. Diese muss man dann in der Konfiguration ignorieren.

Ein großes Plus für TypeScript sind auch die Auto-Import-Erweiterungen. Hier nimmt einem z. B. “TypeScript Importer” für Visual Studio Code nahezu alle “Import”-Anweisungen ab. Dazu kommt noch die Auto-Complete-Funktionalität, die sich in TypeScript einfach besser anfühlt. Man bekommt hier nahezu sofort Vorschläge, während bei Flow oft eine kleine Verzögerung besteht.

Typisierung Flow und TypeScript verfügen über alle gängigen Typen und unterstützen auch generische Typen. Der große Unterschied liegt in der Typisierung von npm-Packages. Während TypeScript-Types von ziemlich vielen Packages bereitgestellt werden, werden Flow-Types oft nur sporadisch unterstützt. In einem Fall konnte in Flow ein Typ nicht gefunden werden, der zur Typisierung sehr praktisch gewesen wäre. Typen von npm-Packages erweisen sich als sehr nützlich, da sie z. B. in Visual Studio Code IntelliSense mit Code-Vorschlägen bereichern.

Fazit Ich muss zugeben, dass ich schon sehr voreingenommen war, da ich nie wirklich Probleme mit TypeScript hatte oder etwas vermisst habe. Allerdings hätte Flow mich durchaus überzeugen können, wenn das Setup unkomplizierter als bei TypeScript gewesen wäre. Für TypeScript-Programmierer sehe ich keinen Grund auf Flow umzusteigen. Bei ähnlichem Aufwand, bekommt man mit TypeScript einfach mehr. Wer sich aber generell auf typsicheres JavaScript einlassen will, hat auf jeden Fall mit beiden Technologien einen Mehrwert.