Einführung in TypeScript: Was ist TypeScript?

Grundlagen von TypeScript

TypeScript ist eine von Microsoft entwickelte, auf JavaScript basierende Programmiersprache, die eine statische Typisierung hinzufügt. Es wurde als Erweiterung von JavaScript konzipiert, um Entwicklern eine robustere und skalierbare Sprache zu bieten, die besonders für große Anwendungen geeignet ist. Mit TypeScript lassen sich JavaScript-Programme schreiben, die zusätzlich um Typen erweitert werden, was die Entwicklung von Fehlern im Code reduziert.

Was TypeScript besonders auszeichnet, ist seine Fähigkeit, beim Kompilieren in reines JavaScript umgewandelt zu werden, sodass es in jeder JavaScript-Umgebung lauffähig ist, sei es im Browser oder auf einem Node.js-Server.

Unterschiede zu JavaScript

Obwohl TypeScript auf JavaScript aufbaut und voll kompatibel mit dessen Syntax ist, gibt es einige zentrale Unterschiede:

• Statische Typisierung: TypeScript führt Typen für Variablen, Parameter und Rückgabewerte ein. Während JavaScript dynamisch ist und der Datentyp einer Variablen zur Laufzeit bestimmt wird, bietet TypeScript die Möglichkeit, den Typ bereits zur Entwicklungszeit festzulegen.
• Fehlersuche während der Entwicklung: TypeScript bietet durch die Typisierung eine erweiterte Fehlersuche, die bereits während des Schreibens des Codes potenzielle Probleme erkennt. Dies hilft, typische Laufzeitfehler frühzeitig zu vermeiden.
• Unterstützung moderner Features: TypeScript unterstützt moderne JavaScript-Features (z. B. ES6, ES7 und darüber hinaus) und bietet Entwicklern die Möglichkeit, zukunftssicheren Code zu schreiben. TypeScript kompiliert den Code dann in eine ältere JavaScript-Version, die auch in älteren Umgebungen lauffähig ist.
• Zusätzliche Features: TypeScript erweitert JavaScript um mächtige Konzepte wie Interfaces, Enums, abstrakte Klassen und Namespaces, die helfen, Code besser zu organisieren und zu strukturieren.

Vorteile von statischer Typisierung

Dank statischer Typisierung können viele Fehler direkt beim Schreiben des Codes erkannt werden. Typische Probleme wie das Verwenden eines falschen Datentyps oder das Vergessen eines Parameters werden von TypeScript automatisch erkannt und gemeldet.

Durch die Typendefinitionen wird der Code für andere Entwickler verständlicher und leichter wartbar. Der Typ eines Arguments oder Rückgabewertes einer Funktion gibt Aufschluss darüber, welche Art von Daten erwartet wird.

In großen Codebasen ist es oft erforderlich, Code umzustrukturieren oder zu erweitern. Dank TypeScript bleibt der Code während solcher Refactorings stabiler, da Typen-Überprüfungen sicherstellen, dass Änderungen keine unerwarteten Fehler verursachen.

IDEs wie Visual Studio Code bieten in Kombination mit TypeScript intelligente Autovervollständigung, Fehlerdiagnosen in Echtzeit und automatische Code-Vervollständigungen, was die Entwicklungszeit erheblich verkürzt.

Installation und Setup

Um mit TypeScript zu starten, ist nur eine einfache Installation notwendig. TypeScript kann in jedes JavaScript-Projekt integriert werden, unabhängig von der Projektgröße.

Schritt 1: TypeScript installieren

TypeScript kann global oder lokal im Projekt installiert werden. Dafür benötigt man Node.js, welches das `npm`-Paketmanagement enthält. Hier sind die Befehle für beide Optionen:

Global installieren:

  npm install -g typescript

Lokal im Projekt installieren:

  npm install typescript --save-dev

Schritt 2: TypeScript-Dateien kompilieren

TypeScript-Dateien haben die Endung `.ts`. Um eine `.ts`-Datei zu kompilieren, wird der Befehl `tsc` verwendet:

Eine einzelne Datei kompilieren:

  tsc datei.ts

Das Ergebnis ist eine JavaScript-Datei mit der gleichen Basisdatei, z. B. `datei.js`.

Schritt 3: TypeScript-Konfiguration (tsconfig.json)

Für größere Projekte empfiehlt es sich, eine `tsconfig.json`-Datei zu erstellen, die alle Compiler-Einstellungen für das Projekt enthält. Dies ermöglicht die automatische Kompilierung mehrerer Dateien und bietet zusätzliche Konfigurationsmöglichkeiten.

Erstellen einer `tsconfig.json`:

tsc --init

Eine typische `tsconfig.json` könnte wie folgt aussehen:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

In diesem Beispiel wird der Code in ES5 (ECMAScript 5) umgewandelt und es werden nur Dateien aus dem `src`-Ordner kompiliert.

Schritt 4: Ausführen von TypeScript

Da TypeScript in JavaScript kompiliert wird, können die resultierenden `.js`-Dateien in jedem JavaScript-Interpreter ausgeführt werden, z. B. im Browser oder auf einem Node.js-Server:

node datei.js

Fazit

TypeScript bietet Entwicklern viele Vorteile gegenüber reinem JavaScript, insbesondere in größeren und langfristigen Projekten. Die statische Typisierung, moderne Features und die Integration in bestehende JavaScript-Umgebungen machen TypeScript zu einer robusten Wahl für die Entwicklung zuverlässiger und gut wartbarer Anwendungen.