🛡️ TypeScript & Type Safety

TS 07: TypeScript Type Safety & Interfaces

Entdecke die Macht statischer Typen: Interfaces, Union Types, Generics und robuster Code ohne Laufzeit-Überraschungen.

📂 Dateien dieser Einheit:
📄 aufgabe.js (Startercode) 🧪 test_aufgabe.js (Tests) 💡 musterloesung.js (Lösung) 📖 README.md

1. 🛡️ Warum TypeScript? Der digitale Sicherheitsgurt

In reinem JavaScript treten Typfehler oft erst spät zur Laufzeit auf – beispielsweise wenn ein Kunde im Online-Shop auf „Kaufen“ klickt und das Programm mit TypeError: Cannot read properties of undefined abstürzt.

TypeScript erweitert JavaScript um statische Typüberprüfungen. Es wirkt wie ein digitaler Sicherheitsgurt und ein unbestechlicher Bauplan-Wächter: Jeder Parameter, jedes Objekt und jede Schnittstelle wird genau geprüft, noch bevor der Code im Browser ausgeführt wird.

🏗️ Die Architekten-Analogie:
JavaScript ohne Typen ist wie eine Baustelle ohne Plan: Man merkt erst beim Einzug, dass das Treppenhaus fehlt. TypeScript liefert den geprüften Bauplan: Passt ein Baustein nicht, warnt dich der Compiler sofort im Editor!

2. 📋 TypeScript Cheat-Sheet: Basis-Typen & Union Types

TypeScript bietet alle vertrauten Datentypen sowie mächtige Kompositionswerkzeuge:

TypeScript (Basis-Typen & Type Aliases)
// 1. Primitive Typen
const name: string = "Max Mustermann";
const alter: number = 34;
const aktiv: boolean = true;
const hobbies: string[] = ["Coding", "Design"];

// 2. Type Aliases & Union Types (|)
type ID = string | number;
type Status = "offen" | "in_bearbeitung" | "abgeschlossen" | "storniert";

// 3. Spezialtypen
let beliebig: any = "Gefährlich: Deaktiviert alle Checks";
let sicherer: unknown = JSON.parse(daten); // Erfordert Prüfung vor Zugriff
function loggen(msg: string): void { console.log(msg); }

3. 📐 Interfaces: Verträge für Datenstrukturen

Ein interface beschreibt die exakte Form von Objekten. Optionale Eigenschaften werden mit ? gekennzeichnet:

📊 Interface-Diagramm: Auftrag & Positionen
interface Auftrag {
  id: string | number;
  kundeId: string | number;
  positionen: Auftragsposition[];
  summe: number;
  status: AuftragsStatus;
}
interface Auftragsposition {
  titel: string;
  menge: number;
  einzelpreis: number;
}
💡 Optional Chaining & Nullish Coalescing:
Nutze kunde?.adresse?.stadt ?? 'Unbekannt', um verschachtelte Eigenschaften sicher abzurufen, ohne dass Fehler bei null oder undefined auftreten.

4. 🧬 Generics: Typ-Parameter für flexible Funktionen

Mit Generics (<T>) schreibst du Funktionen, die für beliebige Typen funktionieren, ohne den Typenverlust von any:

function umkehren<T>(liste: T[]): T[] {
  return [...liste].reverse();
}

const zahlen = umkehren([1, 2, 3]); // Typ bleibt number[]
const strings = umkehren(["A", "B", "C"]); // Typ bleibt string[]

5. 🎯 Aufgaben & Checkliste

Öffne die Datei aufgabe.js und setze folgende 4 Teilziele um:

💻 In Web-IDE öffnen & Tests starten →