TS 07: TypeScript Type Safety & Interfaces

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.

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

TypeScript bietet alle vertrauten Datentypen sowie mächtige Kompositionswerkzeuge:

// 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:

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:

🧠 Diagnostischer Selbst-Check

Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.