Kapitel 5: Funktionstypen

🎯 Lernziele

In diesem Kapitel lernen Sie:

• ✅ Funktionsparameter typisieren
• ✅ Rückgabetypen definieren
• ✅ Optionale und Standardparameter
• ✅ Rest-Parameter
• ✅ Funktionsüberladung (Overloads)
• ✅ Arrow Function Typen

---

5.1 Funktionsparameter typisieren

📖 Einfache Definition

In TypeScript geben Sie den Typ jedes Parameters an.

💻 Code-Beispiel

// Grundlegende Funktionsdefinition
function greet(name: string, age: number): void {
  console.log(`Hallo ${name}, du bist ${age} Jahre alt!`);
}

// Aufruf
greet("Max", 25);  // ✅ Richtig
greet("Max");        // ❌ Fehler: Zu wenig Argumente
greet("Max", 25, 30); // ❌ Fehler: Zu viele Argumente
greet("Max", "25"); // ❌ Fehler: Argument 2 hat falschen Typ

🎨 Pfeilfunktionen (Arrow Functions)

// Pfeilfunktion mit Typen
const add = (a: number, b: number): number => {
  return a + b;
};

console.log(add(5, 3));  // Ausgabe: 8

---

5.2 Rückgabetypen definieren

📖 Einfache Definition

Der Rückgabetyp wird nach den Parametern mit : angegeben.

💻 Code-Beispiel

// Expliziter Rückgabetyp
function multiply(a: number, b: number): number {
  return a * b;
}

// Rückgabetyp: string
function formatName(first: string, last: string): string {
  return `${first} ${last}`;
}

// Rückgabetyp: void (kein Rückgabewert)
function logMessage(message: string): void {
  console.log(message);
}

// Rückgabetyp: never (wirft immer einen Fehler oder Endlosschleife)
function throwError(message: string): never {
  throw new Error(message);
}

💡 Type Inference (Typableitung)

TypeScript kann Rückgabetypen oft automatisch erkennen:

// TypeScript erkennt automatisch: Rückgabetyp number
function add(a: number, b: number) {
  return a + b;  // Return type: number
}

// Aber: Explizite Typen sind besser für Dokumentation!

---

5.3 Optionale Parameter (?)

📖 Einfache Definition

Optionale Parameter müssen nicht übergeben werden.

💻 Code-Beispiel

// Optionale Parameter (mit ?)
function greet(name: string, greeting?: string): string {
  if (greeting) {
    return `${greeting}, ${name}!`;
  }
  return `Hallo, ${name}!`;
}

console.log(greet("Max"));           // Ausgabe: Hallo, Max!
console.log(greet("Max", "Hi"));    // Ausgabe: Hi, Max!

⚠️ Wichtig

Optionale Parameter müssen nach den Pflichtparametern stehen:

// ❌ Falsch: Optionale Parameter können nicht vor Pflichtparametern stehen
function greet(greeting?: string, name: string): string { ... }

// ✅ Richtig
function greet(name: string, greeting?: string): string { ... }

---

5.4 Standardparameter (Default Parameters)

📖 Einfache Definition

Standardparameter haben einen Standardwert, wenn kein Argument übergeben wird.

💻 Code-Beispiel

// Standardparameter
function greet(name: string, greeting: string = "Hallo"): string {
  return `${greeting}, ${name}!`;
}

console.log(greet("Max"));           // Ausgabe: Hallo, Max!
console.log(greet("Max", "Hi"));    // Ausgabe: Hi, Max!

🎨 Kombination mit optionales Parametern

function createUser(name: string, age?: number, isAdmin: boolean = false): void {
  console.log(`Name: ${name}, Age: ${age || "unbekannt"}, Admin: ${isAdmin}`);
}

createUser("Max");              // Name: Max, Age: unbekannt, Admin: false
createUser("Max", 25);         // Name: Max, Age: 25, Admin: false
createUser("Max", 25, true);   // Name: Max, Age: 25, Admin: true

---

5.5 Rest-Parameter (...)

📖 Einfache Definition

Rest-Parameter erlauben einer Funktion, beliebig viele Argumente zu akzeptieren.

💻 Code-Beispiel

// Rest-Parameter (muss der letzte Parameter sein!)
function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3));       // Ausgabe: 6
console.log(sum(1, 2, 3, 4, 5)); // Ausgabe: 15

🎨 Rest-Parameter mit anderen Parametern

function greetWithTags(name: string, ...tags: string[]): string {
  return `Hallo ${name}! Tags: ${tags.join(", ")}`;
}

console.log(greetWithTags("Max", "admin", "user"));  
// Ausgabe: Hallo Max! Tags: admin, user

---

5.6 Funktionsüberladung (Overloads)

📖 Einfache Definition

Funktionsüberladung erlaubt einer Funktion, verschiedene Parameterkombinationen zu akzeptieren.

💻 Code-Beispiel

// Überladungs-Signaturen (Overload Signatures)
function format(value: string): string;
function format(value: number): string;
function format(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  }
  return value.toFixed(2);
}

// Verwendung
console.log(format("hallo"));  // Ausgabe: HALLO
console.log(format(3.14159));  // Ausgabe: 3.14

🎨 Praxis-Beispiel

// Überladung für eine API-Funktion
function fetchData(url: string): Promise<any>;
function fetchData(config: { url: string; method: string }): Promise<any>;
function fetchData(param: string | { url: string; method: string }): Promise<any> {
  // Implementierung...
  return Promise.resolve(null);
}

// Beide Aufrufe sind erlaubt
fetchData("https://api.example.com");
fetchData({ url: "https://api.example.com", method: "GET" });

---

5.7 Arrow Function Typen

📖 Einfache Definition

Pfeilfunktionen können auf zwei Arten typisiert werden.

💻 Code-Beispiel

Methode 1: Typen in der Funktion

const add = (a: number, b: number): number => {
  return a + b;
};

Methode 2: Funktions-Type Alias

// Funktions-Type definieren
type MathOperation = (a: number, b: number) => number;

// Verwendung
const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;
const multiply: MathOperation = (a, b) => a * b;

🎨 Interface für Funktionen

// Interface für eine Funktion
interface GreetFunction {
  (name: string): string;
}

const greet: GreetFunction = (name) => `Hallo, ${name}!`;

---

5.8 this Typisieren

📖 Einfache Definition

TypeScript erlaubt Ihnen, den Typ von this in Funktionen zu definieren.

💻 Code-Beispiel

interface User {
  name: string;
  age: number;
  greet: () => string;
}

const user: User = {
  name: "Max",
  age: 25,
  greet() {
    return `Hallo, ich bin ${this.name}`;
  }
};

console.log(user.greet());  // Ausgabe: Hallo, ich bin Max

---

5.9 Praxis: Tool-Funktionen typisieren

💻 Vollständiges Beispiel

// Type Alias für eine API-Antwort
type ApiResponse<T> = {
  success: boolean;
  data: T;
  message?: string;
};

// Tool-Funktion: API-Antwort erstellen
function createSuccessResponse<T>(data: T): ApiResponse<T> {
  return {
    success: true,
    data
  };
}

function createErrorResponse<T>(message: string): ApiResponse<T> {
  return {
    success: false,
    data: {} as T,
    message
  };
}

// Verwendung
interface User {
  id: number;
  name: string;
}

const successResponse = createSuccessResponse<User>({
  id: 1,
  name: "Max"
});

const errorResponse = createErrorResponse<User>("Benutzer nicht gefunden");

console.log(successResponse);
console.log(errorResponse);

---

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Funktionsparameter typisieren: (name: string, age: number)
• ✅ Rückgabetypen definieren: function greet(): string
• ✅ Optionale Parameter: greeting?: string
• ✅ Standardparameter: greeting: string = "Hallo"
• ✅ Rest-Parameter: ...numbers: number[]
• ✅ Funktionsüberladung: Mehrere Signaturen für eine Funktion
• ✅ Arrow Function Typen: Pfeilfunktionen typisieren

---

🎯 Nächstes Kapitel

Im Kapitel 6 lernen wir Klassen und objektorientierte Programmierung in TypeScript!

👉 Weiter zu Kapitel 6: Klassen

---

❓ Häufig gestellte Fragen

F: Muss ich Rückgabetypen immer angeben?

A: Nicht immer. TypeScript kann sie oft ableiten. Aber es ist eine gute Praxis, sie anzugeben (bessere Dokumentation).

F: Was ist der Unterschied zwischen void und never?

A:

• void: Funktion gibt keinen Wert zurück
• never: Funktion kehrt niemals zurück (wirft Fehler oder Endlosschleife)

F: Kann ich optionale und Standardparameter kombinieren?

A: Ja! function greet(name: string, greeting?: string = "Hallo")

---

🎉 Herzlichen Glückwunsch! Sie haben Kapitel 5 abgeschlossen!