In meinem letzten Beitrag bin ich ja darauf eingegangen warum TypeScript eine gute Wahl ist, um damit Apps zu entwickeln. Besonders wenn sie am Ende als JavaScript-App laufen. In diesem Beitrag stelle ich vor, wie man das dann tatsächlich in einer echten App einsetzt.

Was braucht es dafür?

Das ist die Frage deren Antwort vermutlich einige von euch erst einmal zurückschrecken lässt. Denn um das Ganze verwenden zu können, braucht es ein paar Werkzeuge und Konfigurationen. Aber keine Angst, in diesem Beitrag wird alles erklärt und steht auch vollständig auf GitHub frei zur Verfügung. 🙂

Node.js

Alles hier fängt damit an, dass man auf seinem Rechner Node.js installieren muss, wenn man es nicht schon hat. Node.js ist eine JavaScript Laufzeitumgebung, ähnlich deinem Browser, die aber ohne grafische Oberfläche auskommt. Node.js stellt einen Server dar, in dem JavaScript Apps oder Module laufen können und genau das brauchen wir. Viele moderne und einfache Entwicklungsprozesse – vor allem die, die mit dem Web verwandt sind wie User Apps – verwenden Node.js und von den Werkzeugen die es mitbringt oder ermöglicht zu profitieren.

npm

Und eines dieser angesprochenen Werkzeuge kommt ohne weitere Installation direkt mit Node.js. Und das ist npm. Npm ist der “Node Package Manager”, mit dessen Hilfe wir weitere Werkzeuge verwalten, installieren und auch ausführen werden. Es ist ein Kommandozeilen-Werkzeug, was heißt dass wir alles was wir tun werden über die Kommandozeile machen werden. Aber keine Sorge, das klingt komplizierter als es ist.

Der Dreh- und Angelpunkt von npm ist die Konfigurationsdatei “package.json” die zu einem von npm verwalteten Projekt gehört. Hier werden Scripts und vor allem verwendete Node-Modules definiert und verwaltet. In unserem Fall ist das sehr übersichtlich:

• ein selbst geschriebes kleines Script zum kompilieren des TypeScript Codes (“build-server”)
• zwei Node-Modules die es braucht damit TypeScript korrekt kompiliert werden kann (“@types/core-js” und “ts-loader”)
• TypeScript selbst, inklusive Compiler (“typescript”)
• das Bundling-Tool Webpack (“webpack”), ein Hilfs-Werkzeug das dafür sorgt dass alles am Ende hübsch zusammengeschnürt in der vom UserApp-Server erwarteten “main.js” landet

Hat man einmal eine solche package.json zusammengestellt, dann kann man, wenn man in der Kommandozeile in das Verzeichnis des Projektes an dem diese Konfiguration liegt navigiert, einfach per “npm install” alle Pakete installieren die dort definiert sind. Das kann ein paar Minuten dauern, sollte aber reibungslos funktionieren. Dabei wird das Verzeichnis “node_modules” erzeugt, in dem alle Pakete installiert werden. Dieses Verzeichnis musst du dir aber nie anschauen oder gar anfassen, lass es einfach in Ruhe dort leben. 😀

Hat man das alles geschafft ist man vorbereitet und es kann losgehen.

TypeScript Compiler

In der Datei “tsconfig.json” wird der nun installierte TypeScript-Compiler konfiguriert. Ich will jetzt nicht in aller Tiefe jedes Detail besprechen. Damit könnte man eigene Blogs füllen und ihr könnt euch hier mit Hilfe der Dokumentation eure eigene Konfiguration zusammenstellen. Die mitgelieferte Konfiguration reicht aber grundsätzlich aus. Aber auf ein paar der Konfigurationen will ich kurz eingehen.

Die Compiler-Option “noImplicitAny” erzwingt dich in deiner gesamten App, an jeder Stelle, die im letzten Beitrag der Serie beschriebe statische Typisierung zu verwenden. Ich empfehle, das so zu machen, damit man gar nicht erst damit anfangen kann zu schludern und die Typisierung an einigen Stellen wegzulassen.

In “excludes” werden Pfade beschrieben die vom Compiler ausgeschlossen sein sollen. In unserem Fall das “node_modules” Verzeichnis, da dort nur installierte Module leben die nicht angefasst werden sollten.

In “includes” werden Pfade und (TypeScript-)Datein definiert, die der Compiler bei seinem compile-Vorgang berücksichtigen soll.

Die Datei “api/UserApps-API.d.ts” enthält die TypeScript-Definition der Knuddels User App API die der Compiler braucht um zu wissen wie er deinen Code kompilieren soll. Denn von Haus aus kennt er die Knuddels-API natürlich nicht. Langfristig wollen wir diese Definition vermutlich auch als Node-Module verfügbar machen.

In unserer Beispiel-App liegt alles an User App-Server Code im Verzeichnis “ServerApp”, weshalb wir alle TypeScript-Dateien (“*.ts”) in diesem Verzeichnis und allen eventuellen Kind-Verzeichnissen (die doppelten Sternchen) als “zu kompilieren” definieren.

Webpack

Webpack ist ein Bundling-Tool das einem dabei hilft große und auf viele Dateien aufgeteilte Apps mit Hilfe von Modulen zu einzelnen “Bündeln” von Dateien zusammenzufassen. Dabei können theoretisch auch zusätzliche Funktionen auf den durch Webpack verarbeiteten Code angewendet werden, wie z.B. Plugins die Kommentare entfernen oder die Datei am Ende durch Variablen-Umbenennung und das Entfernen von Leerzeichen kleiner machen. Wir verwenden hier lediglich den im npm-Abschnitt angesprochenen “ts-loader” um mit dessen Hilfe alle TypeScript-Datein zu laden und durch den Compiler zu jagen.

Interessant sind in der Webpack Konfigurationsdatei “webpack.server.config” vor allem die Punkte “entry.main” und “output.filename”.

“entry.main” definiert den logischen Einstiegspunkt deiner App. Von dort aus lädt Webpack alle im Code importierten weiteren Klassen und Dateien um sie anschließend in das große Bündel zu übernehmen.

“output.filename” definiert die Datei in die am Ende das fertig kompilierte TypeScript, aus dem jetzt JavaScript geworden ist, geschrieben werden soll. In unserem Fall direkt die “main.js”. Diese Datei kannst du danach direkt auf den FTP deiner App hochladen wenn du willst.

Der erste User App Code mit TypeScript

Schauen wir uns nun den Code der Beispiel-App im Verzeichnis „ServerApp“ an.

Zuerst den Einstiegspunkt, die „main.ts“. Hier passiert ziemlich wenig, außer dass die eigentliche Server Klasse importiert und instanziert wird. Dazwischen passiert noch eine sehr wichtige Aktion, ohne die deine App später nicht auf dem Server läuft: Wir deklarieren eine Variable “App” und sagen so dem Compiler, dass er einfach davon ausgehen soll, dass es diese Variable geben wird. Das ist notwendig, da der User App Server später nach dieser Variablen suchen wird. Ohne dieses bekannt machen als externe globale Variable würde deine App nicht funktionieren, da Webpack geschlosse Modul-Bundles erzeugt.

In der “Server.ts” ist dann der tatsächliche Code der Beispiel-App zu finden. Mal abgesehen davon, dass es eine mit TypeScript geschriebene Klasse ist, fallen euch sicher die von der UserApp-API bekannten Methoden “onAppStart”, “onUserJoined” und “onPrepareShutdown” sowie das Feld “chatCommands” auf. Diese Methoden und Felder müssen “public” sein, damit sie später auch korrekt funktionieren wenn sie auf dem UserApp Server laufen.

Die App macht nichts besonderes außer zur Begrüßung und Abschied ein paar Informationen und Begrüßungs- und Abschiedsnachrichten zu schreiben. Man kann sich mittels “/typescript” ein paar interessante Informationen über TypeScript sagen lassen.

Hinweis: Durch ein noch ausstehendes Update funktioniert das ganze aktuell nur auf dem DEV-Server korrekt.

Im Grunde sind das aber nur ein paar Zeilen Beispiel-Code, der ein paar TypeScript-Features wie z.B. die statische Typisierung, Arrow-Functions und Template-Strings zeigen soll und demonstriert, dass man die Knuddels UserApps-API mit TypeScript benutzten kann und wie das zusammen aussieht.

Und so funktioniert alles zusammen!

Außer gucken haben wir ja bisher nicht gemacht. Jetzt geht’s darum tatsächlich die Beispiel-App zu kompilieren und  dann auf dem Server zu starten.

Im Grunde verhält es sich da sehr ähnlich wie der bisherige Entwicklungsprozess einer User App auch, nur dass man nun einen kleinen Zwischenschritt zwischen Code schreiben und dem tatsächlichen Hochladen hat.

Und zwar muss man nur, wie beim installieren der Node-Modules, mit der Kommandozeile in das Verzeichnis des Projekts navigieren und dann dort “npm run build-server” ausführen. Das Script “build-server” haben wir ja in der package.json bereits definiert. Es ruft letztendlich nur Webpack mit der mitgelieferten Webpack-Konfiguration auf und aktiviert detaillierte Fehlermeldungen, damit das Suchen von eventuellen Fehlern erleichtert wird. Funktioniert alles wird die “main.js” erzeugt bzw. überschrieben und man kann sie dann einfach, wie bei jeder anderen App auch, einfach hochladen und die App aktualisieren.

Hilfreiche Tools

Um sich alle Features von TypeScript auch wirklich zu Nutze zu machen braucht es noch eine IDE (Integrated Development Environment).

Ich selbst nutze seit Jahren WebStorm und bin begeistert und sehr zufrieden damit! Allerdings müsstet ihr hier auf die Lizenzbedingungen achten, denn es kann gut sein dass ihr für eine Lizenz bezahlen müsst.

Sehr zu empfehlen ist auch Visual Studio Code, was genau wie TypeScript selbst auch von Microsoft ist, und daher wunderbar miteinander funktionieren sollte.

Ich habe es selbst noch nicht zusammen mit TypeScript benutzt, aber Atom sollte auch einige Features bieten und gut funktionieren, wenn man das TypeScript-Plugin installiert.

Ansonsten wünsche ich euch viel Spass beim Ausprobieren und Rumspielen. Bei Fragen oder Feedback könnt ihr euch gerne an mich wenden.