TypeScript Visual Studio Code Tutorial

In meinem TypeScript Visual Studio Code Tutorial lerne ich nicht nur TypeScript sondern auch wie JavaScript funktioniert und wie man mit Visual Studio Code effizient programmiert und den Entwicklungsprozess automatisiert.

TypeScript Visual Studio Code Tutorial

In dieser Tutorialserie beschäftige ich mich mit TypeScript. JavaScript und mich verbindet eine über viele Jahre aufgebaute Abneigung. Obwohl ich es mehrfach versucht habe kann ich mich mit dieser Scripsprache einfach nicht anfreunden. Leider (aus meiner Sicht) erfreut sich JavaScript einer steigenden Beliebtheit und man kann damit im Browser mittlerweile dank HTML5 die tollsten Dinge machen. Dank guten Frameworks erstellen sich Frontends für Business Applikationen wie von selbst und man kann auch mühelos 2D und 3D Spiele programmieren. Insbesondere als Plattform unabhängiger Technologiestack ist JS auch für mobile Devices sehr interessant. Für mein aktuelles Projekt brauche ich solche Funktionalität. Da ich dort auf .NET Core Basis arbeite ist TypeScript die erste Wahl.

Den Beispielcode dieser Artikelserie findest du wie immer auf meiner GitHub Seite in einem eigenen Typescript Repository.

Installation

Am besten wir starten sofort mit de Praxis und dem obligatorischen Hallo Welt Beispiel. Ich gehe davon aus, dass Visual Studio Code bereits installiert ist. Falls nicht findet man den Download auf der offiziellen Visual Studio Code Webseite. Zusätzlich brauchen wir noch den TypeScript Compiler tsc, den installiert man wie folgt:

npm install -g typescript

npm: The term ’npm‘ is not recognized as a name of a cmdlet, function, script file, or executable program.

Auf meinem Windows 10 Rechner ist npm noch nicht installiert, das lässt sich ändern indem man node.js installiert:

Wichtig: der Installationspfad muss auch den Umgebungsvariablen hinzugefügt werden, das macht der Installer per Default (Windows *.msi).

Wichtig: jeder Prozess merkt sich die aktuellen Umgebungsvariablen. Damit npm in der Konsole funktionieren kann, muss diese zuerst neu gestartet werden. Dann klappt aber der Befehl von oben:

ein kurzer Check ergibt nach der Installation folgendes Bild:

Zur Zeit der Erstellung dieses Artikels war das die aktuelle Version vom TypeScript Compiler.

Hallo Welt

Wir erstellen einen neuen Ordner für das Projekt und starten Visual Studio Code gleich von der Kommandozeile aus. Das klappt Plattformübergreifend sowohl unter Windows, Mac OS als auch Linux:

mkdir HelloWorld
cd HelloWorld
code .

Im Visual Studio Code fügen wir nun ein einzelnes Codefile für TypeScript namens helloworld.ts hinzu mit folgendem Inhalt:
let message: string = 'Hello World';
console.log(message);

Visual Studio Code ist nicht nur ein einfacher Texteditor für Programmiersprachen. Die bietet auch alle möglichen Plugins für die Softwareentwicklung. Mit dabei ist auch ein integriertes Terminal. In meinem Fall habe ich eine CMD Session geöffnet.

Mit dem Befehlt tsc gefolgt vom Dateinamen wird die Quelldatei compiliert:

tsc helloworld.ts

Führst du den Befehl aus, dann erscheint eine neue Datei helloworld.js im Ordner. Das ist das Ergebnis der Kompilierungsprozess. Ein schneller Vergleich der *.ts mit der *.js Datei zeigt kaum einen Unterschied. Ausgeführt wird das erste Beispiel mit:

node helloworld.js

Auf meinem Screenshot erkennt man gut, dass die Konsolenausgabe von JavaScript direkt in der Konsole ausgegeben wird. Weitere Details dazu wie man entwickelt und die IDE effizient einsetzt in den folgenden Teilen. Das Beispiel erscheint manchem Leser vermutlich recht sinnlos, da Quell- und Zieldatei nahezu ident sind. Wozu also TypeScript?

Was ist TypeScript?

TypeScript ist eine OpenSource Programmiersprache von Microsoft und baut auf JavaScript auf. Was ist der Unterschied zu JavaScript und warum brauche ich das? Einfach erklärt ist jeder JavaScript Code auch gleich TypeScript Code aber nicht umgekehrt. Das heißt TypeScript ist JavaScript mit zusätzlichen Features. Diese Features bringen Vorteile von Objekt orientierten Programmiersprachen in die Entwicklung von JavaScript wie beispielsweise strikte Typen. Der mit TypeScript erstellte Code muss deshalb wie man es von C++, C# oder Java kennt erst mittels Compiler in normalen JavaScript Code übersetzt werden. Das klingt nach viel Overhead, tatsächlich hilft der Compiler sauberen und guten Code zu schreiben. In Summe ist man als Entwickler schneller.

Warum TypeScript?

Als gelernter C++ Entwickler traue ich meinem Code nicht. Da sind immer Fehler drin, wenn auch nur irgendwelche Tippfehler. Vermutlich habe ich deshalb so eine Abneigung gegen JavaScript, weil dort selbst offensichtlich falscher oder unvollständiger Code läuft. Fehler findet man nur, wenn man jeden Code auch durchläuft. Fehler in seltener Logik im 150ten if findet so eigentlich nur noch der Anwender. Ich wünsche mir einen Compiler, der mir bei der Entwicklung bereits Fehler und Warnungen anzeigt und dank strikter Typen Umwandlungen von nicht kompatiblen Datentypen gar nicht zu lässt.

Fazit

Das war mein erster kleiner Ausflug in die Welt von JavaScript und Typescript im TypeScript Visual Studio Code Tutorial. In den folgenden Seiten zeige ich wie man effizient entwickelt und ein erstes komplexes Beispiel erstellt.