© Excellent backgrounds/Shutterstock.com
Teil 2: Integration in IDEs und Editoren

Go with the flow


Dieser Artikel widmet sich dem Workflow für ein TypeScript-Projekt. Aufbauend auf dem Package Manager npm [1] und dessen Fähigkeiten als Build-System wird schrittweise ein TypeScript-Projekt aufgesetzt, das sich leicht verwalten lässt. Es umfasst neben der Kompilierung von Sass [2] und TypeScript auch Techniken wie Linting und Unit-Tests. Im Laufe des Artikels wird deutlich werden, dass es gar nicht so schwer ist, TypeScript in den eigenen Prozess zu integrieren.

Die Einführung einer neuen Technologie ist immer mit Aufwand im Umbau der Arbeitsprozesse verbunden. Ganz besonders trifft das auf eine neue Programmiersprache zu. Im schlimmsten Fall sind alle Build-Skripte und Entwicklungsumgebungen der Entwickler anzupassen und Mitarbeiter zu schulen. Im besten Fall sollte sich die Integration in bereits bestehende Workflows nahtlos gestalten.

Der Erfolg von TypeScript hängt auch damit zusammen, dass es nicht den Weg des befürchteten Vendor Lock-ins eingeschlagen hat, sondern auf maximale Integration in das JavaScript-Ökosystem setzt. Der beliebte Package Manager npm wird, nach einem kleinen Ausflug in JavaScript-basierte Build-Systeme wie Gulp oder Grunt, wieder verstärkt als Build-System verwendet. Mit der zentralen Konfigurationsdatei package.json ist damit die Verwaltung von Abhängigkeiten und Build-Skripten direkt im Projekt angesiedelt. Auch TypeScript wird über npm bereitgestellt und ist somit nur einen Eintrag in dieser Datei von seinem Einsatz entfernt. Mit TypeScript 2.0 wurde die Verwaltung von Definitionsdateien, die der Compiler benötigt, um Abhängigkeiten zu Fremdbibliotheken aufzulösen (Methoden, Klassen und Interfaces), über die package.json handhabbar gemacht. Das war ein wichtiger Schritt hin zu einer vollständigen Integration in das JavaScript-Ökosystem. Im Folgenden wird schrittweise ein TypeScript-Projekt aufgebaut, das sich für die Entwicklung im Frontend eignet. Der Workflow hat sich bei uns in der Praxis bewährt und ist so flexibel, dass er leicht auf die eigenen Bedürfnisse angepasst werden kann.

Listing 1: Minimale „index.html“

<!DOCTYPE HTML> <html lang="en"> <head> <title>TypeScript</title> </head> <body> <div id="greeting">Hello TypeScript!</div> <div id="result">42</div> </body> </html>

Statisch starten

Da ein Frontend-Projekt aufgesetzt werden soll, liegt der Start mit einer index.html nahe (Listing 1). Sie dient zur Demonstration und enthält gerade einmal zwei div-Elemente mit jeweils einer ID (Abb. 1). Abgelegt wird sie im Projektordner unter src/index.html.

dienst_typescript_1.tif_fmt1.jpgAbb. 1: „index.html“ im Rohzustand (bei 300 Prozent Größe)

Das Herzstück: package.json

Jetzt ist es natürlich nervig, bei jeder Änderung von Dateien manuell einen Refresh des Browsers anstoßen zu müssen. Deswegen überlassen wir das einem Package namens browser-sync [3]. Bevor wir es jedoch benutzen können, sollten wir eine package.json in unserem Projektordner anlegen (Listing 2). Diese enthält neben einigen allgemeinen Informationen des Projekts wie Name, Version, Beschreibung, Main-Datei, Contributors und der Lizenz auch einen devDependencies- und scripts-Block. Als Abhängigkeit in devDependencies wird browser-sync eingetragen. Mit npm install --only=dev wird das Package in den node_modules-Ordner heruntergeladen. Im scripts-Block wird der Startbefehl abgelegt, ein einfaches Shell-Kommando, das Browser-Sync im Watch-Modus startet. Die benötigte Konfigurationsdatei bs-config.js steuert z. B., auf welchem Port der Webserver lauscht. Sie kann vollständig im zum Artikel gehörigen GitHub-Repository eingesehen werden [4]. Das Kommando npm run serve startet das Skript. Sobald sich eine in der bs-config.js spezifizierte Datei ändert, wird der Browser automatisch neu geladen.

Listing 2: Minimale „package.json“

{ "name": "JavaMagazin_Workflow_Example", "version": "1.0.0", "description": "Workflow example", "main": "index.js", "contributors": [ "Johannes Dienst <info@johannesdienst.net>" ], "devDependencies": { "browser-sync": "^2.17.6" }, "scripts": { "serve": "browser-sync start --config bs-config.js", }, "license": "MIT" }

Ein bisschen Styling bitte

Die Indexseite sieht noch etwas unschön aus. Zeit, ihr ein Styling zu verpassen. Das geht heutzutage fast nicht mehr ohne CSS-Präprozessor. In diesem Fall ist Sass die erste Wahl. Wir legen eine minimale SCSS-Datei (Listing 3) unter src/scss/default.scss ab.

Listing 3: default.scss

#greeting { font-size: 25px; text-align: center; } #result { text-align: center; }

Da noch kein Watch-Job implementiert ist, ist es ratsam, sich ein wenig Gedanken zu machen, wie nicht nur Sass, sondern auch alle weiteren Builder leicht eingebunden werden können. Das Ziel ist es, mit npm run watch alle Watch-Jobs gleichzeitig anzuwerfen. Zuerst bauen wir dafür ein Build Target build:css, das die default.scss nach src/css/default.css kompiliert. Da CSS in die Kategorie der statischen Ressourcen fällt, von denen es auch...

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