Erste Schritte mit TypeScript

Jetzt wird es praktisch! In diesem Kapitel schreibst du deinen ersten TypeScript-Code und lernst die grundlegende Syntax für Typ-Annotationen.

Typ-Annotationen

Die grundlegendste TypeScript-Funktion ist die Typ-Annotation. Du fügst nach dem Variablen- oder Parameternamen einen Doppelpunkt und den Typ hinzu:

// Variable mit Typ
let name: string = "Max";
let age: number = 25;
let isStudent: boolean = true;

// TypeScript erkennt jetzt Fehler:
name = 42;      // Fehler: Type 'number' is not assignable to type 'string'
age = "alt";    // Fehler: Type 'string' is not assignable to type 'number'

Type Inference

TypeScript kann Typen oft automatisch erkennen - das nennt sich Type Inference:

// TypeScript erkennt automatisch: string
let message = "Hallo Welt";

// TypeScript erkennt automatisch: number
let count = 42;

// TypeScript erkennt automatisch: boolean
let isActive = true;

// Die explizite Annotation ist hier optional:
let explicitMessage: string = "Hallo Welt";  // OK, aber nicht nötig

Best Practice: Nutze Type Inference wo möglich. Annotiere nur, wenn nötig.

Funktionen typisieren

Parameter und Rückgabewert

// Funktion mit typisierten Parametern und Rückgabewert
function add(a: number, b: number): number {
    return a + b;
}

// Aufruf
const result = add(5, 3);     // result ist automatisch 'number'
add("5", 3);                  // Fehler: Argument of type 'string'...

Void - kein Rückgabewert

function logMessage(message: string): void {
    console.log(message);
}

Arrow Functions

// Arrow Function mit Typen
const multiply = (a: number, b: number): number => {
    return a * b;
};

// Kurzform
const square = (n: number): number => n * n;

Arrays typisieren

// Array von Zahlen
let numbers: number[] = [1, 2, 3, 4, 5];

// Array von Strings
let names: string[] = ["Anna", "Max", "Lisa"];

// Alternative Syntax mit Generic
let scores: Array<number> = [100, 95, 88];

// TypeScript prüft Array-Operationen:
numbers.push(6);        // OK
numbers.push("sechs");  // Fehler!

Objekte typisieren

Inline-Typ

// Objekt mit Inline-Typ
let user: { name: string; age: number } = {
    name: "Max",
    age: 25
};

// Fehler bei falschem Typ oder fehlender Eigenschaft
user = { name: "Anna" };  // Fehler: Property 'age' is missing

Type Alias

Für wiederverwendbare Typen definierst du einen Type Alias:

// Type Alias definieren
type User = {
    name: string;
    age: number;
    email: string;
};

// Type Alias verwenden
let user1: User = {
    name: "Max",
    age: 25,
    email: "max@example.com"
};

let user2: User = {
    name: "Anna",
    age: 30,
    email: "anna@example.com"
};

Optionale Eigenschaften

Verwende ? für optionale Eigenschaften:

type Product = {
    name: string;
    price: number;
    description?: string;  // Optional
};

// Beide sind gültig:
let product1: Product = { name: "Laptop", price: 999 };
let product2: Product = { name: "Maus", price: 29, description: "Wireless" };

Union Types

Ein Wert kann mehrere Typen haben:

// String ODER Zahl
let id: string | number;

id = "abc123";  // OK
id = 42;        // OK
id = true;      // Fehler!

// Praktisches Beispiel
function formatId(id: string | number): string {
    if (typeof id === "string") {
        return id.toUpperCase();
    }
    return id.toString();
}

Literal Types

Typen können auf bestimmte Werte beschränkt sein:

// Nur diese Werte sind erlaubt
type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up";      // OK
move = "forward"; // Fehler!

// Praktisch für Konfiguration
type Theme = "light" | "dark";
type Size = "small" | "medium" | "large";

Any und Unknown

Any - Opt-out aus Type-Checking

let anything: any = 42;
anything = "string";  // OK
anything = true;      // OK
anything.foo();       // Kein Fehler - gefährlich!

Vermeide any! Es schaltet die Typ-Prüfung aus.

Unknown - Sichere Alternative

let something: unknown = 42;
something = "string";  // OK

// Aber: Du musst den Typ prüfen vor der Verwendung
if (typeof something === "string") {
    console.log(something.toUpperCase());  // OK nach Type Guard
}

Praktisches Beispiel

Lass uns ein kleines Programm mit allem Gelernten schreiben:

// Typen definieren
type Task = {
    id: number;
    title: string;
    completed: boolean;
    priority?: "low" | "medium" | "high";
};

// Array von Tasks
let tasks: Task[] = [];

// Task hinzufügen
function addTask(title: string, priority?: "low" | "medium" | "high"): Task {
    const task: Task = {
        id: tasks.length + 1,
        title,
        completed: false,
        priority
    };
    tasks.push(task);
    return task;
}

// Task als erledigt markieren
function completeTask(id: number): boolean {
    const task = tasks.find(t => t.id === id);
    if (task) {
        task.completed = true;
        return true;
    }
    return false;
}

// Alle offenen Tasks
function getOpenTasks(): Task[] {
    return tasks.filter(t => !t.completed);
}

// Testen
addTask("TypeScript lernen", "high");
addTask("Projekt starten", "medium");
addTask("Kaffee trinken");

console.log("Alle Tasks:", tasks);
console.log("Offene Tasks:", getOpenTasks());

completeTask(1);
console.log("Nach Erledigung:", getOpenTasks());

Type Assertions

Manchmal weißt du mehr als TypeScript. Mit Type Assertions sagst du dem Compiler, welcher Typ es ist:

// Element vom DOM holen
const input = document.getElementById("myInput") as HTMLInputElement;
input.value = "Neuer Wert";

// Alternative Syntax
const button = <HTMLButtonElement>document.getElementById("myButton");

Vorsicht: Type Assertions umgehen die Typ-Prüfung. Nutze sie nur, wenn du dir sicher bist!

Zusammenfassung

Du hast die TypeScript-Grundlagen gelernt:

• Typ-Annotationen - : type nach Variablen und Parametern
• Type Inference - TypeScript erkennt Typen automatisch
• Funktionen typisieren - Parameter und Rückgabewerte
• Arrays und Objekte - type[] und Type Aliases
• Union Types - string | number für mehrere mögliche Typen
• Literal Types - Beschränkung auf bestimmte Werte

Im nächsten Modul tauchen wir tiefer in das Typsystem ein und lernen alle grundlegenden Typen kennen!