Eine Einführung in TypeScript – Typsicher JavaScript entwickeln

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

https://www.typescriptlang.org/

TypeScript bietet ein Typsystem, welches auf JavaScript aufbaut. Dies bedeutet, der TypeScript Kompiler, kann frühzeitig Fehler im Code entdecken und den Entwickler (also uns) daran hindern, etwas dummes zu tun. Im Folgenden möchte ich Dir eine kleine Einführung in TypeScript geben.

Installation

Um TypeScript zu installieren, solltest Du zunächst sicherstellen, dass NodeJS und npm auf deinem System installiert sind. Sollte das noch nicht der Fall sein, kannst du NodeJS (als auch NPM) hier (https://nodejs.org) herunterladen.

Danach erstellen wir ein neues npm Projekt (in einem Verzeichnis deiner Wahl):

npm init
npm install --save typescript

Mit obigem Befehl fügen wir dem aktuellen Projekt TypeScript hinzu. Der Node Package Manager (NPM) kümmert sich dabei um alles. Sobald dies abgeschlossen ist, können wir uns mit

tsc --init

eine Standard TypeScript Konfiguration erzeugen lassen. Nun können wir loslegen TypeScript Code zu schreiben.

Hello Type-Safe World

Erstellen wir nun eine neue Datei (z.B. hello-typescript.ts). Der Dateiname spielt hierbei keine Rolle, lediglich die Dateiendung ist nun interessant, da TypeScript Dateien auf .ts und nicht auf .js enden.

Die Datei öffnen wir nun im Editor unserer Wahl (in meinem Fall: IntelliJ). Und schon können wir wie gewohnt JavaScript entwickeln, nur jetzt auch mit Typisierung.

const printHello = () => {
    console.log("Hello Type-Safe World");
};

Die Datei können wir nun über die Kommandozeile in eine JavaScript Datei übersetzen lassen.

npx tsc <dateiname>.ts

Somit erhalten wir eine <Dateiname>.js Datei. Mit ungefähr folgendem Inhalt:

"use strict";
var printHello = function () {
    console.log("Hello Type-Safe World");
};

Vorhandene Typen in TypeScript

Schlüsselwort	Beschreibung
any	Wird eine Variable mit any annotiert, kann sie jeden beliebig Datentyp halten.
number	Damit können Ganzzahlen als auch Fließkommazahlen dargestellt und gespeichert werden.
boolean	Ein Bool’scher Wert, der Wahr oder Falsch annehmen kann.
string	Eine Zeichenkette wie z.B. „hello world“
void	Das Gegenteil von any, es beschreibt, dass kein Datentyp vorhanden ist. Dies wird meist als Rückgabewert einer Funktion angegeben.
null	Beschreibt, dass eine Variable keinen Wert hat.
undefined	Beschreibt, dass eine Variable nicht initialisiert wurde.

Es gibt außerdem noch weitere Typen, wie z.B: „never“ oder „object“. Auf diese werde ich zu einem späteren Zeitpunkt noch einmal zurück kommen.

7030cookie-checkEine Einführung in TypeScript – Typsicher JavaScript entwickelnno