TypeScript vs. JavaScript

TypeScript und JavaScript stehen in einem besonderen Verhältnis zueinander: TypeScript ist keine völlig eigenständige Sprache, sondern eine Erweiterung von JavaScript. Trotzdem gibt es bedeutende Unterschiede, die beim Einsatz in echten Projekten entscheidend sind.

Der grundlegende Unterschied: Dynamische vs. statische Typen

JavaScript ist dynamisch typisiert. Das bedeutet, eine Variable kann zur Laufzeit jeden beliebigen Typ annehmen. Dieser Ansatz bietet Flexibilität, birgt aber auch Risiken.

In JavaScript ist folgendes problemlos möglich:

let wert = 42;
wert = "jetzt ein Text"; // Kein Fehler in JavaScript
wert = true;             // Auch das ist erlaubt

TypeScript hingegen ist statisch typisiert. Einmal deklarierte Variablen behalten ihren Typ:

let wert: number = 42;
wert = "jetzt ein Text"; // Compilerfehler: Type 'string' is not assignable to type 'number'

Diese einfache Einschränkung verhindert eine ganze Klasse von Laufzeitfehlern.

Fehlererkennung: Zur Laufzeit vs. zur Entwicklungszeit

In JavaScript zeigen sich viele Fehler erst, wenn der Code tatsächlich ausgeführt wird. Das kann in der Produktion passieren, wenn echte Nutzer die Anwendung verwenden.

Betrachte folgendes JavaScript-Beispiel:

function berechnePreis(preis, rabatt) {
  return preis - preis * (rabatt / 100);
}

// Später im Code:
const ergebnis = berechnePreis("29.99", 10);
// Ergebnis: "29.99" - "29.99" * 0.1 = "29.99" - 2.999 = "29.99-2.999" (falsche Stringkonkatenation)

TypeScript würde diesen Fehler im Editor anzeigen, noch bevor der Code kompiliert wird:

function berechnePreis(preis: number, rabatt: number): number {
  return preis - preis * (rabatt / 100);
}

const ergebnis = berechnePreis("29.99", 10);
// Compilerfehler: Argument of type 'string' is not assignable to parameter of type 'number'

Syntaktische Unterschiede

TypeScript fügt JavaScript mehrere neue Syntaxelemente hinzu:

Typannotationen direkt an Variablen und Parametern:

const name: string = "Anna";
const alter: number = 30;
const aktiv: boolean = true;

Schnittstellen zur Beschreibung von Objektstrukturen:

interface Produkt {
  id: number;
  bezeichnung: string;
  preis: number;
  verfügbar?: boolean; // Das Fragezeichen kennzeichnet optionale Felder
}

Generics für wiederverwendbare, typsichere Funktionen:

function ersterWert<T>(liste: T[]): T | undefined {
  return liste[0];
}

const zahl = ersterWert([1, 2, 3]);     // Rückgabetyp: number | undefined
const text = ersterWert(["a", "b"]);   // Rückgabetyp: string | undefined

All diese Syntaxelemente existieren in reinem JavaScript nicht.

Werkzeugunterstützung und Entwicklererlebnis

Hier zeigt sich einer der praktisch spürbarsten Unterschiede. Editoren wie Visual Studio Code können TypeScript-Code tiefgreifend analysieren.

Bei JavaScript hat der Editor nur begrenzte Informationen über die Struktur des Codes. Bei TypeScript kennt der Editor die genauen Typen aller Variablen, Parameter und Rückgabewerte. Das ermöglicht:

• Präziseres Autocomplete mit korrekten Vorschlägen
• Zuverlässigere Refactoring-Funktionen
• Sofortige Fehlermeldungen direkt im Editor
• Präzise Sprung-zu-Definition-Funktion auch über Modulgrenzen hinweg

Kompilierung und Build-Prozess

JavaScript kann direkt im Browser oder in Node.js ausgeführt werden. TypeScript benötigt immer einen Kompilierungsschritt.

In einem TypeScript-Projekt sieht der Build-Ablauf typischerweise so aus:

// Quellcode: src/rechner.ts
export function addiere(a: number, b: number): number {
  return a + b;
}

// Nach tsc-Kompilierung: dist/rechner.js
export function addiere(a, b) {
  return a + b;
}

Die Typannotationen werden beim Kompilieren vollständig entfernt. Das bedeutet, der erzeugte JavaScript-Code ist oft sogar kürzer als der TypeScript-Quellcode.

Wann eignet sich welche Sprache?

JavaScript eignet sich gut für:

• Kleine Skripte und Einzel-Seiten-Anwendungen ohne komplexe Logik
• Schnelle Prototypen, bei denen Geschwindigkeit wichtiger als Korrektheit ist
• Projekte, die keine Build-Pipeline benötigen oder unterstützen können

TypeScript eignet sich gut für:

• Mittelgroße bis große Anwendungen mit mehreren Entwicklern
• Bibliotheken und Frameworks, die von anderen genutzt werden
• Projekte, bei denen Wartbarkeit und Refactoring langfristig wichtig sind
• Teams, die bereits mit typisierten Sprachen vertraut sind

Kompatibilität und Migration

Ein wichtiger Vorteil von TypeScript ist die vollständige Abwärtskompatibilität mit JavaScript. Jede gültige JavaScript-Datei lässt sich mit der Erweiterung .ts umbenennen und ist sofort gültiger TypeScript-Code. Die Migration kann schrittweise erfolgen.

Wer die Unterschiede direkt ausprobieren möchte, findet auf typescript-playground.de die Möglichkeit, beide Ansätze im Browser zu vergleichen. Der Playground zeigt dabei sowohl den TypeScript-Quellcode als auch den kompilierten JavaScript-Output nebeneinander, was das Verständnis der Kompilierung erheblich erleichtert.

Fazit

TypeScript ist kein Ersatz für JavaScript, sondern eine Ergänzung. Die Wahl zwischen beiden hängt von Projektgröße, Teamstruktur und den Anforderungen an Wartbarkeit ab. Für die meisten modernen Webprojekte spricht heute mehr für TypeScript als dagegen.