Kapitel 1: TypeScript Einführung

🎯 Lernziele

In diesem Kapitel lernen Sie:

• ✅ Was TypeScript ist und warum es wichtig ist
• ✅ Die Vorteile von TypeScript gegenüber JavaScript
• ✅ TypeScript Entwicklungsumgebung einrichten
• ✅ Ihr erstes TypeScript-Programm schreiben

---

1.1 Was ist TypeScript?

📖 Einfache Definition

TypeScript ist eine Erweiterung von JavaScript, die ein statisches Typsystem hinzufügt.

🎨 Visuelle Erklärung

JavaScript (JS)              TypeScript (TS)
┌─────────────┐              ┌─────────────┐
│  Dynamische │              │  Statische   │
│  Typen      │    + TS     │  Typen       │
│              │   ═════>   │  + ES6+      │
│  Flexibel   │              │  Features    │
└─────────────┘              └─────────────┘
     ↓                            ↓
  Browser                      TypeScript
  versteht                     Compiler
  JS                           ↓
                               JavaScript
                               (kann vom
                                Browser
                                ausgeführt
                                werden)

💡 Kernkonzept

TypeScript = JavaScript + Typen + Moderne Features

TypeScript-Code wird zu JavaScript kompiliert, das im Browser ausgeführt werden kann.

---

1.2 Warum TypeScript verwenden?

✅ Vorteile von TypeScript

Vorteil	Beschreibung	Beispiel
Typsicherheit	Fehler werden zur Kompilierungszeit erkannt	let x: number = "Hallo" → Fehler
Intelligente Code-Vervollständigung	IDE zeigt verfügbare Eigenschaften an	user. → zeigt alle Eigenschaften
Bessere Wartbarkeit	Schnelleres Refactoring	Umbenennen einer Variable überall
Selbstdokumentierender Code	Typen erklären, was der Code erwartet	function greet(name: string)
Früher Fehlererkennung	Viele Fehler werden vor der Ausführung gefunden	undefined Zugriff wird erkannt

🆚 TypeScript vs JavaScript

Merkmal	JavaScript	TypeScript
Typen	Dynamisch	Statisch (optional)
Fehlererkennung	Zur Laufzeit	Zur Kompilierungszeit
IDE-Unterstützung	Basis	Hervorragend
Kompilierung	Nicht erforderlich	Erforderlich
Lernkurve	Niedriger	Höher (erfordert JS-Kenntnisse)

---

1.3 TypeScript Entwicklungsumgebung einrichten

Schritt 1: Node.js installieren

TypeScript benötigt Node.js, um den Compiler auszuführen.

Überprüfen Sie, ob Node.js installiert ist:

node --version
npm --version

Wenn nicht installiert:

1. Besuchen Sie https://nodejs.org
2. Laden Sie die LTS-Version herunter
3. Installieren Sie sie (Standardeinstellungen)

---

Schritt 2: TypeScript global installieren

# TypeScript global installieren
npm install -g typescript

# Überprüfen der Installation
tsc --version

Erwartete Ausgabe:

Version 5.x.x

---

Schritt 3: Erstes TypeScript-Programm erstellen

1. Erstellen Sie eine Datei hello.ts:

// hello.ts
function greet(name: string): string {
  return `Hallo, ${name}!`;
}

const result = greet("Welt");
console.log(result);

2. Kompilieren Sie die TypeScript-Datei:

tsc hello.ts

3. Dies erstellt eine hello.js Datei:

// hello.js (automatisch generiert)
function greet(name) {
  return "Hallo, " + name + "!";
}
var result = greet("Welt");
console.log(result);

4. Führen Sie das JavaScript aus:

node hello.js

Erwartete Ausgabe:

Hallo, Welt!

---

1.4 TypeScript Kompilierungsablauf

🔄 Wie TypeScript funktioniert

┌─────────────────┐
│  TypeScript     │
│  Code (.ts)     │
└────────┬────────┘
         │
         ↓
┌─────────────────┐
│  TypeScript     │
│  Compiler (tsc) │
└────────┬────────┘
         │
         ↓
┌─────────────────┐
│  JavaScript     │
│  Code (.js)     │
└────────┬────────┘
         │
         ↓
┌─────────────────┐
│  Browser /      │
│  Node.js        │
│  (Ausführung)   │
└─────────────────┘

⚙️ tsconfig.json (Wichtig!)

Die tsconfig.json Datei konfiguriert den TypeScript-Compiler.

Erstellen Sie eine tsconfig.json:

tsc --init

Standard tsconfig.json:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

---

1.5 TypeScript und JavaScript Interoperabilität

✅ JavaScript-Projekte auf TypeScript umstellen

TypeScript ist eine Superset von JavaScript:

• Jede .js Datei kann in eine .ts Datei umbenannt werden
• TypeScript akzeptiert JavaScript-Code
• Sie können schrittweise migrieren

Schritt-für-Schritt Migration:

1. Benennen Sie .js in .ts um
2. Fügen Sie schrittweise Typen hinzu
3. Aktivieren Sie strict: true in tsconfig.json
4. Beheben Sie Typfehler

---

1.6 Lernplan und Voraussetzungen

📋 Voraussetzungen

✅ Erforderlich:

• Grundlegende JavaScript-Kenntnisse (ES6+)
• Verständnis von Variablen, Funktionen, Objekten
• Grundlegende Kenntnisse von Node.js und npm

⭐ Empfohlen:

• Erfahrung mit ES6+ Features (Arrow Functions, Destructuring)
• Grundlegendes Verständnis von Modulen

---

🗺️ Lernplan für Anfänger

Woche 1: Grundlegende Typen (boolean, number, string)
Woche 2: Arrays, Tuples, Enums
Woche 3: Interfaces und Typaliase
Woche 4: Funktionstypen
Woche 5: Klassen und OOP
Woche 6: Generics
Woche 7: Fortgeschrittene Typen
Woche 8: Praxisprojekte

---

1.7 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ TypeScript ist eine Erweiterung von JavaScript mit Typen
• ✅ TypeScript erkennt Fehler zur Kompilierungszeit
• ✅ TypeScript benötigt einen Compiler (tsc), um JS zu erzeugen
• ✅ tsconfig.json konfiguriert den Compiler
• ✅ TypeScript kann schrittweise in JS-Projekte integriert werden

---

📝 Übungen

Übung 1: Umgebung einrichten

1. Installieren Sie Node.js
2. Installieren Sie TypeScript global
3. Überprüfen Sie die Versionen

Übung 2: Erstes Programm

1. Erstellen Sie eine hello.ts Datei
2. Schreiben Sie eine Funktion add(a: number, b: number): number
3. Kompilieren Sie und führen Sie sie aus

Übung 3: tsconfig.json

1. Initialisieren Sie ein TypeScript-Projekt (tsc --init)
2. Ändern Sie outDir zu "./dist"
3. Kompilieren Sie Ihr Projekt

---

🎯 Nächstes Kapitel

Im Kapitel 2 lernen wir die grundlegenden Typen in TypeScript (boolean, number, string, arrays, etc.).

👉 Weiter zu Kapitel 2: Grundlegende Typen

---

❓ Häufig gestellte Fragen

F: Muss ich TypeScript lernen, um JavaScript zu beherrschen?

A: Nein, aber es wird dringend für größere Projekte empfohlen.

F: Kann ich TypeScript ohne Node.js verwenden?

A: Nein, der TypeScript-Compiler benötigt Node.js.

F: Ist TypeScript schwieriger als JavaScript?

A: Es hat eine steilere Lernkurve, aber die Vorteile überwiegen.

---

🎉 Herzlichen Glückwunsch! Sie haben das erste Kapitel abgeschlossen!