TypeScript Tutorial: Teil 2 - die richtige Entwicklungsumgebung

Einführung in TypeScript: IDEs und Editoren für TypeScript

Johannes Dienst

©Shutterstock/Stocksnapper

Im ersten Teil der Serie wurden die grundlegenden Features von TypeScript vorgestellt. Ohne das richtige Tooling hat aber die beste Sprache keinen Praxisnutzen. Insbesondere die statische Typisierung ermöglicht gepaart mit einer IDE oder einem Editor schnelle Navigation innerhalb der Codebasis, Codevervollständigung und Refactoring. Auch durch das Mitwirken der Community ist rund um TypeScript für jeden Geschmack etwas dabei.

TypeScript Tutorial: Teil 2 – die richtige Entwicklungsumgebung

Der Erfolg einer Programmiersprache wie TypeScript hängt nicht nur von ihren Sprachfeatures ab. Insbesondere das Tooling ist entscheidend, ob sich damit produktiv arbeiten lässt oder es eher bei Spielprojekten bleibt. In dieser Hinsicht hat sich Microsoft bewusst für einen Weg entschieden, der sich in die JavaScript-Landschaft einfügt und strebt die vollständige Integration von TypeScript in die vorhandenen Build-Tools wie npm an.

Microsoft selbst behandelt TypeScript als Programmiersprache erster Klasse und unterstützt es nativ in Visual Studio. Weiter entwickeln sie ein eigenes Plug-in für Sublime. Seit April 2016 gibt es mit Visual Studio Code außerdem einen quelloffenen Editor für Webentwicklung, der in JavaScript und TypeScript entwickelt wird. Durch die aktive Community existieren in allen größeren IDEs und Editoren inzwischen leistungsfähige Plug-ins, die viele Funktionen wie Syntax-Highlighting, Intellisense und Refactoring unterstützen.

Für die Konfiguration eines TypeScript-Projektes gibt es eine Konfigurationsdatei tsconfig.json, die verschiedene Einstellungsmöglichkeiten für den Compiler anbietet. Mit TSLint steht zusätzlich ein Linter zur Verfügung.

TypeScript im Videotutorial

Im entwickler.tutorial Typescript – Eine Einführung, erklärt Thomas Claudius Huber die Grundlagen und Konzepte der TypeScript-Sprache, sowie das Zusammenspiel mit JavaScript.

Der Compiler im eigenen Thread

Die Compiler-Architektur von TypeScript ist explizit so aufgebaut, dass es besonders leicht ist Editoren dafür zu schreiben. Abbildung 1 zeigt die verschiedenen Schichten. Dort fällt auf, dass neben einem Stand-alone-Compiler tsc.ts auch ein Language Service services.ts vorhanden ist. Dies ist ein Interface, das bereits für Editoren benutzt werden kann, um Funktionen wie Code-Formatierung und Syntax-Highlighting bereitzustellen.

Eine Ebene höher existiert mit tsserver (server.ts) ein weiterer Wrapper, der in einem eigenen Thread ausgeführt wird. Dieser besitzt ein JSON-basiertes Interface, mit dem noch leichter Anfragen an den Compiler gestellt werden können. Die Entkopplung in einen eigenen Thread hat zudem den Vorteil, dass bei einem Absturz des tsserver der Editor oder IDE nicht mehr einfrieren kann.

Weiterführende Informationen gibt Anders Heiljsberg persönlich in einem Video. Aber das offizielle tsconfig.json-Handbook ist ebenfalls hilfreich.

Konfigurationsdatei tsconfig.json

Um nicht bei jedem Kompilierungslauf alle Compiler-Optionen wieder auf der Kommandozeile mit anzugeben, gibt es die so genannte tsconfig.json. Mit dieser können Optionen für den Compiler im JSON-Format spezifiziert werden. Die Anwesenheit dieser Datei in einem Verzeichnis zeigt außerdem an, dass es sich um die Wurzel eines TypeScript-Projektes handelt. Deswegen wird sie gerne von Editoren benutzt, um TypeScript-Projekte zu erkennen. Listing 1 zeigt eine abgespeckte Version, der in unserem Unternehmen verwendeten tsconfig.json. Darunter sind ganz allgemeine Informationen, wie die zu erzeugende Modulart und die JavaScript-Version (ES6), die erzeugt werden soll. Weiter soll die Typannotation any erlaubt sein und keine Fehler werfen. Anschließend wird dem Compiler der Ort der TypeScript-Dateien verraten und wo er das erzeugte JavaScript ablegen soll. Außerdem sollen keine SourceMaps erzeugt werden und das JavaScript frei von Kommentaren sein. Zum Schluss werden noch Dekoratoren erlaubt.

Einige Entwicklungsumgebungen und Editoren benutzen einen internen Compiler, der bei jedem Speichern einer TypeScript-Datei eine Kompilierung anstößt. Das wird mit der Einstellung compileOnSave: false verhindert. Mit exclude lassen sich Verzeichnisse und Dateien vom Kompilierungsvorgang ausschließen. In diesem Fall der komplette Ordner node_modules. Eine vollständige Liste der möglichen Optionen findet sich auf typescriptlang.org.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES6",
        "noImplicitAny": false,
        "rootDir": "./src",
        "outDir": "./src/js",
        "sourceMap": false,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    },
    "compileOnSave": false,
    "exclude": [
        "node_modules"
    ]
}

Linten mit tslint.json

Für die Codeanalyse hat sich in JavaScript das Linten durchgesetzt. Auch für TypeScript gibt es diese Form der Qualitätssicherung. Mit TSLint und einer Regeldatei tslint.json lassen sich wie gewohnt Regeln definieren. Listing 2 zeigt einen Ausschnitt eines Regelsatzes, der fordert, dass immer Semikolons am Zeilenende gesetzt werden. Auch die Struktur einer Klasse oder besser gesagt, deren Propertys soll geregelt werden. Zuerst müssen statische, dann Variablen und zu guter Letzt die Funktionen stehen. Eine vollständige Liste der unterstützten Regeln findet sich auf der entsprechenden GitHub-Seite.

{
    "rules": {
        "semicolon": [true, "always"],
        "member-ordering": [
            true,
            "static-before-instance",
            "variables-before-functions"
        ]
    }
}

Direkt vom Hersteller: Visual Studio Code

Mit Visual Studio Code (VS Code) hat Microsoft für die Webentwicklung einen eigenen Editor im Repertoire (Abb. 2). Dieser wird von keinem geringerem als Erich Gamma federführend entwickelt. Das Besondere an VS Code ist die nahtlose Integration von TypeScript, da es selbst in TypeScript geschrieben ist.

VS Code bietet in der Grundausrüstung neben einem flüssigen Entwicklungsgefühl auch integrierten Git-Support sowie einen leistungsfähigen Debugger für Node.js und JavaScript. Die Struktur des Editors ist dabei so ausgelegt, dass er sich leicht erweitern lässt (siehe Interview mit Erich Gamma). Durch so genannte Extensions kann VS Code an jeden Entwicklergeschmack individuell angepasst werden. Neben Syntax-Highlighting und Intellisense unterstützt der Editor eine ganze Reihe von Refaktorisierungen. Die wichtigsten sind das globale Umbenennen von Variablen und die automatische Codeformatierung. Über eine Extension lässt sich der TSLint-Support leicht nachrüsten, der die tslint.json als Konfigurationsdatei erkennt.

Abbildung 2: TypeScript in Visual Studio Code

Abbildung 2: TypeScript in Visual Studio Code

Direkt vom Hersteller 2: Visual Studio

Visual Studio war die erste IDE von Microsoft, die vollen TypeScript Support erhalten hat (Abb. 3). Die Unterstützung der tsconfig.json ist von Haus aus eingebaut. Neben Intellisense und Syntax-Highlighting gibt es zusätzlich einfache Refaktorisierungen und Codenavigation. Einzig TSLint hat sich bei mir in Visual Studio 2015 nicht zum Laufen überreden lassen. Die beste Lösung, die ich gefunden habe, war die Installation von tslint und tslint.msbuild über NuGet-Packages. Beim Ausführen von TSLint warf jedoch Node.js einen Fehler, der anscheinend mit Windows zu tun hatte.

Abbildung 3: TypeScript in Visual Studio

Abbildung 3: TypeScript in Visual Studio

Aus der Community: Eclipse

Mit der Fülle an Plug-ins die für Eclipse verfügbar sind, ist es nicht verwunderlich, dass es sogar mehrere Alternativen für TypeScript gibt. Leider macht nur eines Gebrauch von tsserver, nämlich typescript.java (Abb. 4). Es erkennt ein TypeScript-Projekt an der tsconfig.json und ist in der Lage Intellisense anzubieten. Es gibt keine Integration mit TSLint und auch keine Möglichkeit sinnvoll zu refaktorisieren.

Abbildung 4: TypeScript in Eclipse mit typescript.java

Abbildung 4: TypeScript in Eclipse mit typescript.java

Auch aus der Community: Netbeans

Auch Netbeans bekam von der Community ein TypeScript-Plug-in spendiert (Abb. 5). Das Plug-in nbts unterstützt die tsconfig.json und bietet neben Syntax-Highlighting und Intellisense auch typische IDE-Funktionen wie Fehlererkennung, Auffinden von Deklarationen und Variablenbenutzung und einfache Refaktorisierungen. Die Integration von TSLint ist nicht möglich, so dass dafür auf npm und die Kommandozeile zurückgegriffen werden muss.

Abbildung 5: TypeScript in Netbeans mit nbts-Plugin

Abbildung 5: TypeScript in Netbeans mit nbts-Plugin

Aus der PHP-Welt: WebStorm

Die kommerzielle IDE WebStorm bietet ausgefeilten TypeScript Support (Abb. 6). Dieser ist bereits eingebaut und kann entweder direkt oder über die lokale Node.js-Installation genutzt werden. Es braucht kaum erwähnt werden, dass die Konfigurationsdatei tsconfig.json erkannt wird. Intellisense und Syntax-Highlighting lassen sich direkt nutzen. Außerdem gibt es neben einfachen Refaktorisierung auch fortgeschrittene Techniken, wie die Extraktion von Variablen. Über ein zusätzliches Package tslint stellt es ohne Probleme TSLint über Node.js zur Verfügung, das eine vorhandene tslint.json sofort erkennt und die entsprechenden Codestellen markiert.

 Abbildung 6: TypeScript in Webstorm

Abbildung 6: TypeScript in Webstorm

Aus der Web-Ecke: Atom

Atom erfreut sich in der Webentwicklergemeinde einer immer größeren Beliebtheit. Der relativ neue Editor besticht durch seine leichte Erweiterbarkeit. Mit dem Package atom-typescript bekommt man neben tsconfig.json-Erkennung auch Funktionen, die normalerweise von einer IDE bereitgestellt werden (Abb. 7). Darunter Refaktorisierungen, Codenavigation und Debugging-Support. Auch für TSLint gibt es Packages. Mit linter und linter-tslint ist alles Notwendige installiert. Die tslint.config wird erkannt und die Warnungen im Editor angezeigt.

 Abbildung 7: TypeScript in Atom mit Package atom-typescript

Abbildung 7: TypeScript in Atom mit Package atom-typescript

Der Text-Editor: Sublime

Unter die Kategorie proprietärer Text-Editor fällt Sublime Text, der mit einem zusätzlichen Package namens TypeScript von Microsoft zur TypeScript-Entwicklung ausgebaut wird (Abb. 8). Über Shortcuts sind dann Intellisense, Codenavigation und einfache Refaktorisierungen möglich, wie die Umbenennung von Variablen. Die Konfigurationsdatei tsconfig.json wird auch erkannt. Wird TSLint benötigt, sind zum einen das allgemeine SublimeLinter-Package als auch das speziell für TypeScript zuständige SublimeLinter-contrib-tslint zu installieren. Die Datei tslint.json wird anschließend erkannt und angewendet.

 Abbildung 8: TypeScript in Sublime mit Plugin von Microsoft

Abbildung 8: TypeScript in Sublime mit Plugin von Microsoft

Noch ein Wort zum Transpilieren

Der aufmerksame Leser wird sich an dieser Stelle fragen: Und wie transpiliere ich mein TypeScript zu JavaScript? Tatsächlich ist das in den meisten IDEs und Editoren durchaus möglich und das sogar automatisch beim Speichern einer Datei. Für unseren internen Workflow hat sich das aber nicht bewährt. Hier wird ganz old school über die Kommandozeile und npm in Verbindung mit einer passenden package.json ein Watch-Job angestoßen, der geänderte TypeScript-Dateien automatisch transpiliert. Der Watch-Job nimmt auch wieder die tsconfig.json als Grundlage für seine Arbeit. Dadurch, dass alle Entwickler denselben Watch-Job betreiben, kann es nicht zu Fehlern durch falsch eingestellte IDEs/Editoren kommen und man hat ein wiederholbares Ergebnis. So ist jeder frei seine eigene Entwicklungsumgebung zu verwenden und für sich am effektivsten zu arbeiten.

IDE/Editor Unterstützung/Plug-in nötig tsconfig.json tslint.json
VS Code Nativ Nativ Über Erweiterung
Visual Studio Nativ Nativ Über NuGet-Packages:
tslint
tslint.msbuild
Eclipse typescript.java Unterstützt Nicht verfügbar
Netbeans nbts Unterstützt Nicht verfügbar
Webstorm Nativ Nativ Mit Zusatzpackage über Node.js-Installation
Atom Packages:
atom-typescript
Unterstützt Packages:
linter
linter-tslint
Sublime Package: TypeScript Unterstützt Packages:
SublimeLinter
SublimeLinter-contrib-tslint

Tabelle 1: Übersichtstabelle über die TypeScript-Unterstützung in den populärsten IDEs

Fazit

Die Auswahl an Entwicklungsumgebungen für TypeScript ist groß. Neben den üblichen verdächtigen wie Eclipse, Netbeans, Intellij IDEA/Webstorm und Visual Studio, besitzen die bei Webentwicklern beliebten Editoren Atom und Sublime ebenfalls ausgereifte Plug-ins für die Entwicklung mit TypeScript. Mit Visual Studio Code steht sogar eine eigens in TypeScript selbst geschriebene IDE von Microsoft zur Verfügung, die neben Git-Support auch schon eingebaute TypeScript-Sprachunterstützung bietet. Das von Erich Gamma geleitete Projekt ist so konzipiert, dass es sich noch leichter erweitern lässt als Eclipse. Allen Editoren und IDEs gemeinsam ist die mit dem statischen Typsystem gewonnene Intellisense-Möglichkeit. Unterstützung von Refaktorisierungen gibt es in Netbeans, WebStorm, Visual Studio, Visual Studio Code, Atom und Sublime. Tabelle 1 zeigt kurz und knapp, wie die Unterstützung von TypeScript in den einzelnen Entwicklungsumgebungen und Editoren aktuell aussieht. Die Entscheidung, den Compiler in einen eigenen Thread zu verpacken und über eine API anzusprechen, ist aus meiner Sicht der Grundstein für zukünftige stabile und leistungsfähige Editoren und IDEs. Wie man sieht ist TypeScript im Sinne der Toolunterstützung gut aufgestellt, so dass jeder Entwickler sich sein passendes Werkzeug auswählen kann.

Mehr zum Thema:

TypeScript Tutorial: Grundlagen und Typisierung für JavaScript

Geschrieben von
Johannes Dienst
Johannes Dienst
Johannes Dienst ist Clean Coder aus Leidenschaft bei der DB Systel GmbH. Seine Tätigkeitsschwerpunkte sind die Wartung und Gestaltung von serverseitigen Java- und JavaScript-basierten Applikationen. Twitter: @JohannesDienst
Kommentare

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu: