Einführung in Typescript

17. March 2017 - Javascript, TypeScript

Nun habe ich mich doch mit Angular2 auseinander gesetzt, bzw tue es immer noch. Da Angular2 auf TypeScript basiert, habe ich erst einmal damit angefangen genau zu schauen, was TS eigentlich ist. Warum man es braucht, wofür man es braucht und vor allem, wie man es überhaupt verwendet.

Dieser Beitrag soll also eine kleine Vorbereitung sein auf den Einstieg in Angular2.

Fangen wir an mit TypeScript. Was ist TypeScript überhaupt? Laut offizieller Homepage ist TypeScript

“a typed superset of JavaScript that compiles to plain JavaScript”

Zugegeben, diese Erklärung ist wirklich gut. Zumindest dann, wenn einem Begriffe wie typisiert und Compiler etwas sagen. Und JavaScript am besten auch. Da das aber recht bekannte Begriffe sind, wenn man programmiert, sollte es ein leichtes sein dies zu verstehen.

Im Endeffekt ist TypeScript also etwas, dass in “normales” JavaScript kompiliert wird. Und das trotz und vor allem mit dem Einsatz von Datentypen. Wir können also in TypeScript Datentypen wie Strings und Number verwenden, aber auch Dinge, die man aus der Objekt Orientierten Programmierung kennt, wie Klasse und Interfaces.
Nach dem kompilieren einer solchen TypeScript (.ts) Datei, erhalten wir eine gewöhnliche JavaScript (.js) Datei.

Fangen wir aber erst einmal mit der Installation an.

Ihr braucht NPM. Dann könnt ihr einfach folgendes in die cmd schreiben:

npm install -g typescript

Nun könnt ihr ein neues Projekt anlegen, beispielsweise hello-typescript und als erstes einmal eine tsconfig.json anlegen. Schreibt in diese Datei folgendes rein:

{
  "compilerOptions": {
    "target": "es6"
  }
}

Damit sagt ihr also dem Compiler, wie TS kompiliert werden soll. Hier mit ECMAScript 6.

Nun könnt ihr z.B. einen src Ordner anlegen und dadrin eine app.ts Datei anlegen. Fangen wir jetzt einfach mal damit an eine Variable Vorname anzulegen.

Gewöhnlich geschieht das ja wie folgt:

var vorname;

Jetzt, mit Hilfe von TypeScript, könnt ihr explizit sagen, dass eure Variable vorname vom Typ String sein soll. Dies sieht so aus:

var vorname: string;

Möchtet ihr eure Datei jetzt kompilieren geht einfach mit Hilfe der cmd über cd in euren hello-typescript Ordner und gebt dort ein:

tsc src/app.ts

Dadurch wird eure Datei (hier die Datei app.ts im Order src) kompliliert. Es sollte sich nun bei euch im Projekt eine Datei app.js befinden. Dies ist eine ganz gewöhnliche JavaScript Datei (hier nach ES6, da dies das target ist in meiner typescript.json).

Ihr könnt ja nun einmal der Variablen vorname einen Wert zuweisen. Wenn der Wert kein string ist, sondern beispielsweise eine Zahl und das ganze wieder kompiliert, sollte es einen Fehler geben, der so aussieht:

error TS2322: Type '5' is not assignable to type 'string'

Ihr könnt nun anfangen und Funktionen zu typisieren, sodass diese als Parameter bestimmte Typen erwarten und auch nur bestimmte Typen zurück geben.

Hier mal eine Funktion add, die zwei Zahlen als Wert erwartet und auch nur einen Wert von Typ number zurück gibt.

function add(x: number, y: number): number {
  return x + y;
}

Würdet ihr die Funktion nun aufrufen wollen, müsst ihr zwei Variablen vom Typ number mitübergeben. Ansonsten wird die Datei wieder einen Fehler ausgeben beim Versuch diese zu kompilieren.

Ich hoffe der Beitrag war nützlich als ersten kurzen Einstieg in das Thema TypeScript. Im nächsten Beitrag zeige ich euch wie ihr TypeScript noch einfacher verwendet mit Hilfe von Sublime Text 3 und wie ihr Klassen erstellen könnt.

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

2 responses to “Einführung in Typescript”

  1. […] letzten Beitrag ging es bereits darum was TypeScript ist, wofür man es verwendet und wie man es let…. Nun möchte ich hier einmal kurz erläutern, wie man TypeScript Programme mit Hilfe von Sublime […]

  2. […] wissen, dass es Typescript gibt und wie es ungefähr funktioniert. Ich habe schon mal vor kurzem eine Einführung in Typescript verfasst und noch einen Artikel über Sublime Text 3 und Typescript. Man sollte für Typescript […]

Leave a Reply