init webseite ts and claude

04_typescript/agenda.md

@@ -509,7 +509,7 @@ Projekte + weiteres Modul einbinden
 
 **Übungen:**
 
-Übungen 10 - 18
+Übungen 10 - 19
 
 ---
 
@@ -519,11 +519,10 @@ Projekte + weiteres Modul einbinden
 
 - TS Funktionen und Objekte
 - Abschluss TypeScript Grundlagen
-- Abschlussquiz
 
 **Übungen:**
 
-Übungen 19 - 31
+Übungen 20 - 31
 Projektarbeit
 
 ---
@@ -532,6 +531,7 @@ Projektarbeit
 
 **Inhalt:**
 
+- Abschlussquiz
 - Projekt-Webseite in TS
 - Optimierung mit KI
 - 1:1 Meeting

04_typescript/faq/describable-fn.js

@@ -0,0 +1,10 @@
+const greet = () => {
+  return 'Hello!';
+};
+
+greet.description = 'Function that says hello';
+greet.anotherProp = 'Wert';
+
+console.log(greet());
+console.log(greet.description);
+console.log(greet.anotherProp);

04_typescript/faq/describable-fn.ts

@@ -0,0 +1,29 @@
+// Type - describable Function
+type GreetFn = {
+  anotherProp: string;
+  (): void;
+};
+
+// Type - Object
+type Greet = {
+  prop: string;
+  greed: () => void;
+};
+
+const greetObj: Greet = {
+  prop: 'bin ein objekt',
+  greed: () => {
+    console.log('hello');
+  },
+};
+
+const greet: GreetFn = () => {
+  return 'Hello!';
+};
+
+// greet.description = 'Function that says hello';
+greet.anotherProp = 'Wert';
+
+console.log(greet());
+// console.log(greet.description);
+console.log(greet.anotherProp);

04_typescript/uebungen/20_fn-call-signatures/assets/js/bundle.js

@@ -0,0 +1,33 @@
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __commonJS = (cb, mod) => function __require() {
+    try {
+      return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+    } catch (e) {
+      throw mod = 0, e;
+    }
+  };
+
+  // src/main.ts
+  var require_main = __commonJS({
+    "src/main.ts"() {
+      (() => {
+        const double = (num) => num * 2;
+        const halve = (num) => num / 2;
+        const describeAndApply = (dnObj, num) => {
+          console.log(dnObj.description);
+          return dnObj(num);
+        };
+        const describableDouble = Object.assign(double, {
+          description: "This operation doubles the number."
+        });
+        const describableHalve = Object.assign(halve, {
+          description: "This operation halves the number."
+        });
+        console.log(describeAndApply(describableDouble, 10));
+        console.log(describeAndApply(describableHalve, 10));
+      })();
+    }
+  });
+  require_main();
+})();

04_typescript/uebungen/20_fn-call-signatures/src/main.ts

@@ -1,38 +1,43 @@
-// Step 1: Define the NumberOperation call signature
+(() => {
+  // Übung 20: Call Signatures für Zahlenoperationen
 
-// Step 2: Implement double and halve functions
+  // In dieser Übung erstellst und verwendest du ein paar einfache Funktionen, die sich an bestimmte Call Signatures für die Arbeit mit Zahlen halten.
 
-// Step 3: Define the DescribableNumberOperation type
+  // Anweisungen:
 
-// Step 4: Implement describeAndApply function
+  // 1 Definiere eine Funktion vom Typ NumberOperation, die ein einzelnes number annimmt und ein number zurückgibt.
 
-// Test all functions
-const describableDouble: DescribableNumberOperation = Object.assign(double, {
-  description: 'This operation doubles the number.',
-});
+  type NumberOperation = (num: number) => number;
 
-const describableHalve: DescribableNumberOperation = Object.assign(halve, {
-  description: 'This operation halves the number.',
-});
+  // 2 Implementiere zwei Funktionen, double und halve, die der Call Signature NumberOperation folgen:
 
-console.log(describeAndApply(describableDouble, 10)); // => 20
-console.log(describeAndApply(describableHalve, 10)); // => 5
+  // double: Multipliziert die eingegebene Zahl mit 2.
+  const double: NumberOperation = (num) => num * 2; // keine geschweiften Klammern
 
-// Übung 20: Call Signatures für Zahlenoperationen
+  // halve: Teilt die eingegebene Zahl durch 2.
+  const halve: NumberOperation = (num) => num / 2;
 
-// In dieser Übung erstellst und verwendest du ein paar einfache Funktionen, die sich an bestimmte Call Signatures für die Arbeit mit Zahlen halten.
+  // 3 Definiere einen Objekttyp DescribableNumberOperation mit einer description-Property vom Typ string und einer Cal Signature, die NumberOperation entspricht.
+  type DescribableNumberOperation = {
+    description: string;
+    (num: number): number;
+  };
 
-// Anweisungen:
+  // 4 Implementiere eine Funktion describeAndApply, die ein DescribableNumberOperation Objekt annimmt, dessen description protokolliert und die Operation auf eine bestimmte Zahl anwendet.
+  const describeAndApply = (dnObj: DescribableNumberOperation, num: number) => {
+    console.log(dnObj.description);
+    return dnObj(num);
+  };
 
-// 1 Definiere eine Funktion vom Typ NumberOperation, die ein einzelnes number annimmt und ein number zurückgibt.
+  // 5 Teste alle Funktionen mit ein paar Zahlen.
+  const describableDouble: DescribableNumberOperation = Object.assign(double, {
+    description: 'This operation doubles the number.',
+  });
 
-// 2 Implementiere zwei Funktionen, double und halve, die der Call Signature NumberOperation folgen:
+  const describableHalve: DescribableNumberOperation = Object.assign(halve, {
+    description: 'This operation halves the number.',
+  });
 
-// double: Multipliziert die eingegebene Zahl mit 2.
-// halve: Teilt die eingegebene Zahl durch 2.
-
-// 3 Definiere einen Objekttyp DescribableNumberOperation mit einer description-Property vom Typ string und einer Cal Signature, die NumberOperation entspricht.
-
-// 4 Implementiere eine Funktion describeAndApply, die ein DescribableNumberOperation Objekt annimmt, dessen description protokolliert und die Operation auf eine bestimmte Zahl anwendet.
-
-// 5 Teste alle Funktionen mit ein paar Zahlen.
+  console.log(describeAndApply(describableDouble, 10)); // => 20
+  console.log(describeAndApply(describableHalve, 10)); // => 5
+})();

04_typescript/uebungen/21_fn-identity/src/main.ts

@@ -1,15 +1,33 @@
-// Übung 21: Eine allgemeine Identitätsfunktion erstellen
+(() => {
+  // Übung 21: Eine allgemeine Identitätsfunktion erstellen
 
-// In dieser Übung erstellst du eine einfache generische Funktion namens identity, die den ihr übergebenen Wert zurückgibt. So lernst du, wie generische Funktionen mit verschiedenen Typen arbeiten können, ohne die Typsicherheit zu verlieren.
+  // In dieser Übung erstellst du eine einfache generische Funktion namens identity, die den ihr übergebenen Wert zurückgibt. So lernst du, wie generische Funktionen mit verschiedenen Typen arbeiten können, ohne die Typsicherheit zu verlieren.
 
-// Anweisungen:
+  // Anweisungen:
 
-// 1 Implementiere eine generische identity Funktion, die einen Parameter vom Typ T annimmt und denselben Wert zurückgibt.
+  // 1 Implementiere eine generische identity Funktion, die einen Parameter vom Typ T annimmt und denselben Wert zurückgibt.
 
-// 2 Rufe identity mit einer number auf und speichere das Ergebnis.
+  const identity = <T>(x: T): T => {
+    return x;
+  };
 
-// 3 Rufe identity mit einer string auf und speichere das Ergebnis.
+  // 2 Rufe identity mit einer number auf und speichere das Ergebnis.
 
-// 4 Rufe identity mit einem Array von Objekten auf und speichere das Ergebnis.
+  const resultNum = identity<number>(2);
 
-// 5 Stelle sicher, dass TypeScript die Rückgabetypen ohne explicit Type Annotations korrekt herleitet.
+  // 3 Rufe identity mit einer string auf und speichere das Ergebnis.
+
+  const resultString = identity<string>('John');
+
+  // 4 Rufe identity mit einem Array von Objekten auf und speichere das Ergebnis.
+
+  const resultArr = identity<object[]>([
+    { firstName: 'John' },
+    { lastName: 'Wick' },
+    { firstName: 'Jane', lastName: 'Doe' },
+  ]);
+
+  // 5 Stelle sicher, dass TypeScript die Rückgabetypen ohne explicit Type Annotations korrekt herleitet.
+
+  console.log(`Num: ${resultNum}, String: ${resultString}, Arr: ${JSON.stringify(resultArr)}`);
+})();

04_typescript/uebungen/22_fn-optional-props/src/main.ts

@@ -1,19 +1,26 @@
-createUserProfile('JohnDoe', 25, 'john@example.com');
-// => "User JohnDoe is 25 years old and can be contacted at john@example.com."
+(() => {
+  // Übung 22: Optionale Parameter implementieren
 
-createUserProfile('JaneDoe');
-// => "User JaneDoe is 18 years old and can be contacted at N/A."
+  // Erstelle die Funktion createUserProfile, die drei Parameter benötigt: einen obligatorischen username und zwei optionale Parameter, age und email. Die Funktion sollte einen String mit einer Profilzusammenfassung zurückgeben. Wenn keine optionalen Parameter angegeben werden, sollten die Standardwerte verwendet werden, um das Profil zu vervollständigen.
 
-// Übung 22: Optionale Parameter implementieren
+  // Anweisungen:
 
-// Erstelle die Funktion createUserProfile, die drei Parameter benötigt: einen obligatorischen username und zwei optionale Parameter, age und email. Die Funktion sollte einen String mit einer Profilzusammenfassung zurückgeben. Wenn keine optionalen Parameter angegeben werden, sollten die Standardwerte verwendet werden, um das Profil zu vervollständigen.
+  // Definiere eine Funktion createUserProfile, die akzeptiert:
 
-// Anweisungen:
+  // username (erforderlich, String)
+  // age (optional, Zahl, Standardwert ist 18)
+  // email (optional, String, Standardwert: "N/A")
 
-// Definiere eine Funktion createUserProfile, die akzeptiert:
+  // Keine Fragezeichen nötig
+  const createUserProfile = (username: string, age: number = 18, email: string = 'N/A') => {
+    return `User ${username} is ${age} years old and can be contacted at ${email}.`;
+  };
 
-// username (erforderlich, String)
-// age (optional, Zahl, Standardwert ist 18)
-// email (optional, String, Standardwert: "N/A")
+  // Die Funktion sollte einen String zurückgeben, der das Profil des Nutzers zusammenfasst.
 
-// Die Funktion sollte einen String zurückgeben, der das Profil des Nutzers zusammenfasst.
+  console.log(createUserProfile('JohnDoe', 25, 'john@example.com'));
+  // => "User JohnDoe is 25 years old and can be contacted at john@example.com."
+
+  console.log(createUserProfile('JaneDoe'));
+  // => "User JaneDoe is 18 years old and can be contacted at N/A."
+})();

04_typescript/uebungen/23_fn-rest-params-args/src/main.ts

@@ -1,23 +1,42 @@
-// Example usage of sumAll
-// Define total
-console.log(total); // => 15
+(() => {
+  // Übung 23: Restparameter und Restargumente
 
-// Example usage of calculateHypotenuse with spread syntax
-// Define hypotenuse
-console.log(hypotenuse); // => 5
+  // Schreibe zwei Funktionen: eine, die Restparameter verwendet, um eine unterschiedliche Anzahl von Zahlen zu akzeptieren und ihre Summe zu berechnen, und eine andere, die die Spread-Syntax verwendet, um ein Array von Zahlen in einzelne Argumente für eine mathematische Funktion zu verteilen.
 
-// Attempting to call calculateHypotenuse with incorrect number of arguments
-const invalidSides = [3, 4, 5];
-// Define invalidHypotenuse to call calculateHypotenuse with invalidSides => TypeScript Error: Expected 2 arguments, but got 3.
+  // Anweisungen:
 
-// Übung 23: Restparameter und Restargumente
+  // 1 Definiere eine Funktion sumAll, die einen Restparameter, bestehend aus einer variablen Anzahl von numerischen Argumenten, annimmt und die Summe aller übergebenen Zahlen zurückgibt. Verwende die Methode reduce, um die Summe des Arrays zu berechnen.
 
-// Schreibe zwei Funktionen: eine, die Restparameter verwendet, um eine unterschiedliche Anzahl von Zahlen zu akzeptieren und ihre Summe zu berechnen, und eine andere, die die Spread-Syntax verwendet, um ein Array von Zahlen in einzelne Argumente für eine mathematische Funktion zu verteilen.
+  const sumAll = (...nums: number[]) => {
+    return nums.reduce((sum, num) => sum + num, 0);
+  };
 
-// Anweisungen:
+  // 2 Als Nächstes definierst du eine Funktion namens calculateHypotenuse, die zwei Zahlen als Argumente akzeptiert und die Hypotenuse mithilfe der Formel √(a² + b²) berechnet. Du solltest diese Funktion aufrufen, indem du ein Array mit zwei Zahlen mit Hilfe der Spread-Syntax ausbreitest. (Tipp: Verwende Math.sqrt())
+  const calculateHypotenuse = (...[n1, n2]: [number, number]): number => {
+    return Math.sqrt(n1 ** 2 + n2 ** 2);
+  };
 
-// 1 Definiere eine Funktion sumAll, die einen Restparameter, bestehend aus einer variablen Anzahl von numerischen Argumenten, annimmt und die Summe aller übergebenen Zahlen zurückgibt. Verwende die Methode reduce, um die Summe des Arrays zu berechnen.
+  // 3 Teste schließlich die Funktion sumAll, indem du sie mit mehreren Zahlen aufrufst und das Ergebnis protokollierst. Teste die Funktion calculateHypotenuse, indem du ein Array mit zwei Zahlen erstellst, dieses Array in die Funktion überträgst und das Ergebnis protokollierst. Versuche außerdem, calculateHypotenuse mit einem Array aufzurufen, das nicht genau zwei Zahlen enthält, um das Type-Checking von TypeScript zu beobachten.
 
-// 2 Als Nächstes definierst du eine Funktion namens calculateHypotenuse, die zwei Zahlen als Argumente akzeptiert und die Hypotenuse mithilfe der Formel √(a² + b²) berechnet. Du solltest diese Funktion aufrufen, indem du ein Array mit zwei Zahlen mit Hilfe der Spread-Syntax ausbreitest. (Tipp: Verwende Math.sqrt())
+  // console.log(sumAll([1, 2, 3, 4, 5]));
+  // console.log(sumAll(1, 2, 3, 4, 5));
 
-// 3 Teste schließlich die Funktion sumAll, indem du sie mit mehreren Zahlen aufrufst und das Ergebnis protokollierst. Teste die Funktion calculateHypotenuse, indem du ein Array mit zwei Zahlen erstellst, dieses Array in die Funktion überträgst und das Ergebnis protokollierst. Versuche außerdem, calculateHypotenuse mit einem Array aufzurufen, das nicht genau zwei Zahlen enthält, um das Type-Checking von TypeScript zu beobachten.
+  // Example usage of sumAll
+  // Define total
+  const sumNums = sumAll(1, 2, 3, 4, 5);
+  console.log(sumNums); // => 15
+  console.log(sumAll()); // => 0
+
+  // Example usage of calculateHypotenuse with spread syntax
+  // Define hypotenuse
+
+  console.log(calculateHypotenuse(3, 4)); // => 5
+
+  // Attempting to call calculateHypotenuse with incorrect number of arguments
+  const invalidSides: [number, number] = [3, 4];
+  const invalidSides2: number[] = [3, 4, 5];
+
+  // Define invalidHypotenuse to call calculateHypotenuse with invalidSides => TypeScript Error: Expected 2 arguments, but got 3.
+  calculateHypotenuse(...invalidSides);
+  // calculateHypotenuse(...invalidSides2); // A spread argument must either have a tuple type or be passed to a rest parameter.
+})();

04_typescript/uebungen/24_fn-destructuring/src/main.ts

@@ -1,19 +1,36 @@
-// Example usage of displayUserInfo
-displayUserInfo({ name: 'John' }); // => Hello, John! You are 25 years old.
-displayUserInfo({ name: 'Alice', age: 30 }); // => Hello, Alice! You are 30 years old.
+(() => {
+  // Übung 24: Parameter Destrukturierung
 
-// Example usage of getFirstTwoElements
-getFirstTwoElements([5, 10]); // => First: 5, Second: 10
-getFirstTwoElements([8]); // => First: 8, Second: undefined
+  // In dieser Übung übst du die Anwendung der Parameterdestrukturierung in TypeScript, indem du zwei einfache Funktionen erstellst. Die erste Funktion destrukturiert einen Objektparameter und verwendet einen Standardwert für eine seiner Eigenschaften. Die zweite Funktion destrukturiert einen Array-Parameter. Beide Funktionen enthalten Type Annotations, um sicherzustellen, dass sie die richtige Struktur erhalten.
 
-// Übung 24: Parameter Destrukturierung
+  // Anweisungen:
 
-// In dieser Übung übst du die Anwendung der Parameterdestrukturierung in TypeScript, indem du zwei einfache Funktionen erstellst. Die erste Funktion destrukturiert einen Objektparameter und verwendet einen Standardwert für eine seiner Eigenschaften. Die zweite Funktion destrukturiert einen Array-Parameter. Beide Funktionen enthalten Type Annotations, um sicherzustellen, dass sie die richtige Struktur erhalten.
+  // 1 Erstelle eine Funktion displayUserInfo, die die Eigenschaften name und age aus einem Objektparameter destrukturiert und einen Standardwert für age liefert.
 
-// Anweisungen:
+  // interface User {
+  type User = {
+    name: string;
+    age?: number;
+  };
 
-// 1 Erstelle eine Funktion displayUserInfo, die die Eigenschaften name und age aus einem Objektparameter destrukturiert und einen Standardwert für age liefert.
+  const displayUserInfo = (user: User): void => {
+    const { name, age = 18 } = user;
 
-// 2 Erstelle eine Funktion getFirstTwoElements, die die ersten beiden Elemente aus einem Array-Parameter zerstört.
+    console.log(`Hello, ${name}! You are ${age} years old`);
+  };
 
-// 3 Teste deine Funktionen, indem du sie mit den richtigen Argumenten aufrufst.
+  // 2 Erstelle eine Funktion getFirstTwoElements, die die ersten beiden Elemente aus einem Array-Parameter zerstört.
+  const getFirstTwoElements = ([firstEl, secondEL]: [number, number?]): void => {
+    console.log(`First: ${firstEl}, Second: ${secondEL}`);
+  };
+
+  // 3 Teste deine Funktionen, indem du sie mit den richtigen Argumenten aufrufst.
+
+  // Example usage of displayUserInfo
+  displayUserInfo({ name: 'John' }); // => Hello, John! You are 25 years old.
+  displayUserInfo({ name: 'Alice', age: 30 }); // => Hello, Alice! You are 30 years old.
+
+  // Example usage of getFirstTwoElements
+  getFirstTwoElements([5, 10]); // => First: 5, Second: 10
+  getFirstTwoElements([8]); // => First: 8, Second: undefined
+})();

04_typescript/uebungen/25_obj-read-only/src/main.ts

@@ -1,17 +1,69 @@
-// Übung 25: Optionale und readonly Eigenschaften
+(() => {
+  // Übung 25: Optionale und readonly Eigenschaften
 
-// In dieser Übung erstellst du eine interface für eine Product, die erforderliche, optionale und readonly Eigenschaften enthält. Anschließend schreibst du eine Funktion, die Informationen über das Produkt protokolliert und dabei optionale Eigenschaften korrekt behandelt.
+  // In dieser Übung erstellst du eine interface für eine Product, die erforderliche, optionale und readonly Eigenschaften enthält. Anschließend schreibst du eine Funktion, die Informationen über das Produkt protokolliert und dabei optionale Eigenschaften korrekt behandelt.
 
-// Anweisungen:
+  // Anweisungen:
 
-// 1 Definiere ein Product Interface, die Folgendes beinhaltet:
+  // 1 Definiere ein Product Interface, die Folgendes beinhaltet:
 
-// Erforderliche Eigenschaften id (Number) und name (String).
-// Optionale Eigenschaften price (Number) und description (String).
-// Eine readonly category (String) Eigenschaft.
+  // Erforderliche Eigenschaften id (Number) und name (String).
+  // Optionale Eigenschaften price (Number) und description (String).
+  // Eine readonly category (String) Eigenschaft.
 
-// 2 Schreibe eine Funktion printProductDetails, die ein Product Objekt annimmt und:
+  interface Product {
+    id: number;
+    name: string;
+    price?: number;
+    description?: string;
+    readonly category: string;
+  }
 
-// Druckt die name, category und id.
-// Wenn price undefined ist, drucke "Price: Not available".
-// Wenn description undefined ist, drucke "No description availabler".
+  // 2 Schreibe eine Funktion printProductDetails, die ein Product Objekt annimmt und:
+
+  // Druckt die name, category und id.
+  // Wenn price undefined ist, drucke "Price: Not available".
+  // Wenn description undefined ist, drucke "No description availabler".
+
+  const printProductDetails = (product: Product): void => {
+    // let price = product.price ? product.price : 'Not avaible';
+    // let descr = product.description ? product.description : 'No description avaible';
+    let price = product.price ?? 'Not avaible';
+    let descr = product.description ?? 'No description avaible';
+
+    console.log(
+      `Name: ${product.name}, Kategorie: ${product.category}, ID: ${product.id}, Preis: ${price}, Beschreibung: ${descr}`,
+    );
+  };
+
+  //Aus Faulheit mit KI Objekte zum testen erstellt
+
+  // 1. Produkt mit ALLEN Eigenschaften
+  const fullProduct: Product = {
+    id: 101,
+    name: 'Gaming Laptop',
+    category: 'Elektronik',
+    price: 1299.99,
+    description: 'Leistungsstarker Laptop für Gaming und Arbeit.',
+  };
+
+  // 2. Produkt OHNE optionale Eigenschaften (weder Preis noch Beschreibung)
+  const minimalProduct: Product = {
+    id: 102,
+    name: 'Kaffeetasse',
+    category: 'Haushalt',
+  };
+
+  // 3. Produkt NUR MIT Beschreibung (ohne Preis)
+  const noPriceProduct: Product = {
+    id: 103,
+    name: 'Antikes Buch',
+    category: 'Bücher',
+    description: 'Ein rares Sammlerstück aus dem 19. Jahrhundert.',
+  };
+
+  // Tests ausführen:
+  printProductDetails(fullProduct); //Name: Gaming Laptop, Kategorie: Elektronik, ID: 101, Preis: 1299.99, Beschreibung: Leistungsstarker Laptop für Gaming und Arbeit.
+  printProductDetails(minimalProduct); //Name: Kaffeetasse, Kategorie: Haushalt, ID: 102, Preis: Not avaible, Beschreibung: No description avaible
+  printProductDetails(noPriceProduct); //Name: Antikes Buch, Kategorie: Bücher, ID: 103, Preis: Not avaible, Beschreibung: Ein rares Sammlerstück aus dem 19. Jahrhundert.
+})();

04_typescript/uebungen/26_obj-update/src/main.ts

@@ -1,19 +1,41 @@
-// Übung 26: Eine verschachtelte Objekteigenschaft aktualisieren
+(() => {
+  // Übung 26: Eine verschachtelte Objekteigenschaft aktualisieren
 
-// In dieser Übung definierst du ein Interface mit readonly und veränderbaren Eigenschaften und aktualisierst ein verschachteltes Objekt innerhalb des Interfaces. Du übst den Umgang mit verschachtelten Objekten und readonly Eigenschaften.
+  // In dieser Übung definierst du ein Interface mit readonly und veränderbaren Eigenschaften und aktualisierst ein verschachteltes Objekt innerhalb des Interfaces. Du übst den Umgang mit verschachtelten Objekten und readonly Eigenschaften.
 
-// Anweisungen:
+  // Anweisungen:
 
-// Erstelle ein Employee Interface, die Folgendes enthält:
+  // Erstelle ein Employee Interface, die Folgendes enthält:
+  // Eine readonly employeeId (Number) Eigenschaft.
+  // Eine veränderbare Detail-Eigenschaft, die ein Objekt ist, das Folgendes enthält: position (String), salary (Number)
 
-// Eine readonly employeeId (Number) Eigenschaft.
+  interface Employee {
+    readonly employeeId: number;
+    details: {
+      position: string;
+      salary: number;
+    };
+  }
 
-// Eine veränderbare Detail-Eigenschaft, die ein Objekt ist, das Folgendes enthält: position (String), salary (Number)
+  // Schreibe eine Funktion updateEmployeePosition die:
 
-// Schreibe eine Funktion updateEmployeePosition die:
+  // Akzeptiert ein Employee Objekt und einen neuen position String.
+  const updateEmployeePosition = (emp: Employee, pos: string) => {
+    emp.details.position = pos;
+    console.log(`ID: ${emp.employeeId}, Position: ${emp.details.position}, Salaray: ${emp.details.salary}`);
+  };
 
-// Akzeptiert ein Employee Objekt und einen neuen position String.
+  // Aktualisiert die position des Mitarbeiters, verhindert aber jede Änderung der employeeId.
 
-// Aktualisiert die position des Mitarbeiters, verhindert aber jede Änderung der employeeId.
+  // Teste die Funktion, indem du ein Employee-Objekt erstellst und die Position aktualisierst.
 
-// Teste die Funktion, indem du ein Employee-Objekt erstellst und die Position aktualisierst.
+  const employee: Employee = {
+    employeeId: 1,
+    details: {
+      position: 'normaler Angestellter',
+      salary: 1400,
+    },
+  };
+
+  updateEmployeePosition(employee, 'cooler Angestellter');
+})();

04_typescript/uebungen/27_obj-interface-props/src/main.ts

@@ -5,21 +5,42 @@
 // Anweisungen:
 
 // 1 Definiere ein Car Interface, die Folgendes beinhaltet:
-
 // Erforderliche Eigenschaften make (string) und model (string).
-
 // Optionale Eigenschaften year (Number) und color (String).
-
 // Eine readonly vin (string) Eigenschaft (Fahrzeugidentifikationsnummer).
+interface Car {
+  make: string;
+  model: string;
+  year?: number;
+  color?: string;
+  readonly vin: string;
+}
 
 // 2 Schreibe eine Funktion createCar die:
-
 // Nimmt make, model und vin auf und gibt ein Car Objekt zurück.
-
 // Optional können year und color akzeptiert werden.
 
+type CreateCarFn = (a: string, b: string, c: string, d?: number, e?: string) => Car;
+
+// const createCar = (make: string, model: string, vin: string, year?: number, color?: string): Car => {
+//   return { make, model, vin, year, color };
+// };
+
+const createCar: CreateCarFn = (make, model, vin, year, color) => {
+  return { make, model, vin, year, color };
+};
+
 // 3 Schreibe eine weitere Funktion paintCar die:
-
 // Akzeptiert ein Car Objekt und einen neuen color String.
-
 // Aktualisiert die color des Fahrzeugs (falls vorhanden), verhindert aber jede Änderung an der vin.
+const paintCar = (car: Car, color: string): Car => {
+  const res: Car = car;
+  res.color = color;
+  return res;
+};
+
+let car1 = createCar('VW', 'Golf', '1234', 2020, 'blau');
+console.log(car1);
+
+car1 = paintCar(car1, 'gelb');
+console.log(car1);

04_typescript/uebungen/28_obj-excess-prop-check/src/main.ts

@@ -9,7 +9,18 @@
 // - make: String
 // - model: String
 // - year: Number
+interface Car {
+  make: string;
+  model: string;
+  year: number;
+}
 
 // 2 Schreibe eine Funktion printCarDetails, die ein Objekt vom Typ Car annimmt und die Details des Autos ausgibt (make, model und year).
+const printCarDetails = (car: Car) => {
+  console.log(`Hersteller: ${car.make}`);
+  console.log(`Model: ${car.model}`);
+  console.log(`Baujahr: ${car.year}`);
+};
 
 // 3 Versuche, der Funktion ein Objekt zu übergeben, das eine zusätzliche Eigenschaft hat, z. B. color. Beobachte, wie TypeScript mit der überzähligen Eigenschaft umgeht und erkläre, warum der Fehler auftritt.
+// printCarDetails({ make: 'VW', model: 'Golf', year: 2020, color: 'blue' });

04_typescript/uebungen/29_obj-extending-interface/src/main.ts

@@ -1,11 +1,37 @@
-// Übung 29: Extending einer einzelnen Interface
+{
+  // Übung 29: Extending einer einzelnen Interface
 
-// In dieser Übung wirst du eine bestehende Product Interface erweitern, um einen spezifischeren Typ Electronics zu erstellen. Du wirst zusätzliche Eigenschaften für Elektronikprodukte definieren und ein Objekt des Typs Electronics erstellen.
+  // In dieser Übung wirst du eine bestehende Product Interface erweitern, um einen spezifischeren Typ Electronics zu erstellen. Du wirst zusätzliche Eigenschaften für Elektronikprodukte definieren und ein Objekt des Typs Electronics erstellen.
 
-// Anweisungen:
+  // Anweisungen:
 
-// 1 Definiere ein Product Interface mit den Eigenschaften id, name und price.
+  // 1 Definiere ein Product Interface mit den Eigenschaften id, name und price.
+  interface Product {
+    readonly id: number;
+    name: string;
+    price: number;
+  }
 
-// 2 Erweitere die Product Interface um eine Electronics Interface und füge die Eigenschaften brand und warranty hinzu.
+  // 2 Erweitere die Product Interface um eine Electronics Interface und füge die Eigenschaften brand und warranty hinzu.
+  interface Electronics extends Product {
+    brand: string;
+    warranty: number;
+  }
 
-// 3 Erstelle ein Objekt vom Typ Electronics.
+  // 3 Erstelle ein Objekt vom Typ Electronics.
+  const comp: Electronics = {
+    id: 1,
+    name: 'Computer',
+    price: 1499.99,
+    brand: 'Asus',
+    warranty: 24,
+  };
+
+  const konsole: Electronics = {
+    id: 2,
+    name: 'Steam',
+    price: 1039.99,
+    brand: 'Valve',
+    warranty: 24,
+  };
+}

04_typescript/uebungen/30_obj-subtyp/src/main.ts

@@ -1,11 +1,25 @@
-// Übung 30: Einzigartige Eigenschaften zu einem Subtyp hinzufügen
+{
+  // 1 Erweitere die Product Interface, um eine Furniture Interface zu erstellen.
+  interface Product {
+    readonly id: number;
+    name: string;
+    price: number;
+  }
 
-// In dieser Übung wirst du die Product Interface erweitern, um einen Typ Furniture zu erstellen, der spezielle Eigenschaften für Möbel hinzufügt, wie material und dimensions.
+  // 2 Füge die Eigenschaften material und dimensions zu den Möbeln hinzu.
+  interface Furniture extends Product {
+    material: string;
+    dimensions: { length: number; width: number; height: number };
+  }
 
-// Anweisungen:
+  // 3 Erstelle ein Objekt vom Typ Furniture, das ein Möbelstück darstellt.
+  const schrank: Furniture = {
+    id: 2,
+    name: 'Schrank',
+    price: 199.99,
+    material: 'Holz',
+    dimensions: { length: 0.7, width: 1.5, height: 1.7 },
+  };
 
-// 1 Erweitere die Product Interface, um eine Furniture Interface zu erstellen.
-
-// 2 Füge die Eigenschaften material und dimensions zu den Möbeln hinzu.
-
-// 3 Erstelle ein Objekt vom Typ Furniture, das ein Möbelstück darstellt.
+  console.log(JSON.stringify(schrank, null, 2));
+}

04_typescript/uebungen/31_obj-generics-fns/src/main.ts

@@ -1,9 +1,23 @@
-// Übung 31: Generic Functions für Arrays
+{
+  // Übung 31: Generic Functions für Arrays
 
-// In dieser Übung erstellst du eine generische Funktion, die mit Arrays beliebigen Typs funktioniert. Du definierst eine Funktion, die das erste Element des Arrays zurückgibt und es TypeScript ermöglicht, den Elementtyp aus dem übergebenen Array abzuleiten.
+  // In dieser Übung erstellst du eine generische Funktion, die mit Arrays beliebigen Typs funktioniert. Du definierst eine Funktion, die das erste Element des Arrays zurückgibt und es TypeScript ermöglicht, den Elementtyp aus dem übergebenen Array abzuleiten.
 
-// Anweisungen:
+  // Anweisungen:
 
-// 1 Definiere eine generische Funktion getFirstElement, die ein Array beliebigen Typs annimmt und das erste Element oder undefined zurückgibt, wenn das Array leer ist.
+  // 1 Definiere eine generische Funktion getFirstElement, die ein Array beliebigen Typs annimmt und das erste Element oder undefined zurückgibt, wenn das Array leer ist.
+  const getFirstElement = <T>(arg: T[]): T => {
+    return arg[0];
+  };
 
-// 2 Rufe die Funktion mit Arrays verschiedener Typen auf (number[], string[], etc.) und protokolliere das Ergebnis.
+  // 2 Rufe die Funktion mit Arrays verschiedener Typen auf (number[], string[], etc.) und protokolliere das Ergebnis.
+  console.log(getFirstElement<number>([1, 2, 3]));
+  console.log(getFirstElement<string>(['a', 'b', 'c']));
+  console.log(
+    getFirstElement<object>([
+      { name: 'a', id: 1 },
+      { name: 'b', id: 2 },
+    ]),
+  );
+  console.log(getFirstElement([]));
+}

04_typescript/unterricht/tag34/01_ts-functions/src/01_fn-type-expression.ts

@@ -5,7 +5,7 @@ Dabei werden die Typen ihrer Eingänge (Parameter) und ihres Ausgangs (Rückgabe
 */
 
 {
-  type MathFn = (x: number, y: number) => number; // Funktionstype-deklaration
+  type MathFn = (x: number, y: number) => number; // Funktionstyp-deklaration
 
   const mathOperationFn = (fn: MathFn): number => {
     return fn(4, 5);
@@ -15,6 +15,10 @@ Dabei werden die Typen ihrer Eingänge (Parameter) und ihres Ausgangs (Rückgabe
     return a * b;
   };
 
+  function multiplyFn(a: number, b: number): number {
+    return a * b;
+  }
+
   const multiply2: MathFn = (a, b) => {
     return a * b;
   };
@@ -52,9 +56,9 @@ Dabei werden die Typen ihrer Eingänge (Parameter) und ihres Ausgangs (Rückgabe
     console.log(message);
   };
 
+  // RECOMMENDED
   type LogFn = (param: string) => void;
 
-  // RECOMMENDED
   const logMessage3: LogFn = (message) => {
     console.log(message);
   };

04_typescript/unterricht/tag34/01_ts-functions/src/02_fn-call-signature.ts

@@ -39,6 +39,23 @@ Eine Call Signature ermöglicht es dir, die Art und Weise zu beschreiben, wie ei
   console.log(multiply(25, 25)); //=> 625
 
   //--------
+
+  type Person = {
+    name: string;
+    age: number;
+    walk: (speed?: number) => string;
+  };
+
+  const person: Person = {
+    name: 'John',
+    age: 23,
+    walk() {
+      return "i'm walking.";
+    },
+  };
+
+  console.log(person.walk());
+
   // VORSICHT SONDERFALL in der Signatur bei describable Function
 
   // Bei Describable Function : anstatt => für Rückgabe

04_typescript/unterricht/tag34/01_ts-functions/src/06_fn-destructuring.ts

@@ -11,6 +11,7 @@ Destrukturierung vereinfacht deinen Code, indem du Werte direkt aus Objekten ode
     console.log(`Hello, ${name}! You are ${age} years old.`);
   };
 
+  // NEGATIV BEISPIEL - NOT RECOMMENDED
   const greetUser3: (o: { name: string; age: number }) => void = (
     {
       name,
@@ -37,6 +38,17 @@ Destrukturierung vereinfacht deinen Code, indem du Werte direkt aus Objekten ode
 
   greetUser4({ name: 'Alice', age: 25 });
 
+  // RECOMMENDED ALTERNATIVE
+  type User = { name: string; age: number };
+
+  const greetUser5 = (user: User) => {
+    const { name, age } = user;
+
+    console.log(`Hello, ${name}! You are ${age} years old.`);
+  };
+
+  greetUser5({ name: 'Alice', age: 25 });
+
   // -----
   const sum = ({ a, b, c }: { a: number; b: number; c: number }): void => {
     console.log(a + b + c);

04_typescript/unterricht/tag34/01_ts-functions/src/07_never-void-unknown.ts

@@ -3,7 +3,7 @@
 In TypeScript gibt es drei spezielle Typen: never, unknown und void. Diese Typen werden in bestimmten Situationen verwendet, um bestimmte Verhaltensweisen zu modellieren.
 */
 
-// - void wird für Funktionen verwendet, die keinen Wert zurückgeben, was bedeutet, dass die Funktion eine Aktion ausführt, ohne ein Ergebnis zu liefern. Es wird kein Ergebnis erwartet, dennoch können Ergebnisse zurückgegeben werden ohne Fehlermeldung
+// - void wird für Funktionen verwendet, die keinen Wert zurückgeben, was bedeutet, dass die Funktion eine Aktion ausführt, ohne ein Ergebnis zu liefern. Es wird kein Ergebnis erwartet, dennoch können Ergebnisse zurückgegeben werden ohne Fehlermeldung, wenn void in einer "call Signature" (Funktionstyp-Deklaration verwendet wird)
 
 // - unknown ist eine sicherere Alternative zu any und erfordert Type-Checking, bevor Operationen mit Werten unbekannten Typs durchgeführt werden, wodurch Laufzeitfehler vermieden werden.
 
@@ -16,9 +16,9 @@ In TypeScript gibt es drei spezielle Typen: never, unknown und void. Diese Typen
   const logMessage = (message: string): void => {
     console.log(message);
   };
+
   const logMessage2: LogFn = (message) => {
     console.log(message);
-    return 'message';
   };
 
   logMessage('Hello, TypeScript!');
@@ -114,6 +114,7 @@ In TypeScript gibt es drei spezielle Typen: never, unknown und void. Diese Typen
         return 'Handling a circle';
       case 'square':
         return 'Handling a square';
+
       default:
         // throw new Error("shape doesn't exist");
         const _exhaustiveCheck: never = shape; // TypeScript error if a new shape is added

04_typescript/unterricht/tag34/02_ts-objects/src/01_obj-props.ts

@@ -48,6 +48,7 @@ In TypeScript kannst du die Modifizierer für Eigenschaften in Objekten verwende
   // ?? operator => nullish coalescing
   const printBookInfo = (book: Book) => {
     const author = book.author ?? 'Unknown'; // Use "Unknown" if author is undefined
+    const author2 = book.author ? book.author : 'Unknown'; // Use "Unknown" if author is undefined
     const pages = book.pages ?? 'Page count not available';
     console.log(`Title: ${book.title}, Author: ${author}, Pages: ${pages}`);
   };

04_typescript/unterricht/tag34/02_ts-objects/src/04_obj-more-types.ts

@@ -82,7 +82,7 @@
   type StringNumberMap = Record<string, number>;
 
   const numbers: StringNumberMap = {
-    one: 1,
+    true: 1,
     two: 2,
     three: 3,
   };

04_typescript/unterricht/tag35/README.md

@@ -0,0 +1,5 @@
+# Projektarbeit & Exkurs
+
+- Abschlussquiz
+- **Exkurs Webprojekt in TS mit KI Part I**
+- 1:1 Meeting

04_typescript/unterricht/tag35/meeting.md

@@ -0,0 +1,6 @@
+# Meeting Fr. 31.07.2026
+
+- [ ] 14:20 - 14:30 Uhr Adel
+- [ ] 14:30 - 14:40 Uhr Kahleel
+- [ ] 14:40 - 14:50 Uhr Ersin
+- [ ] 14:50 - 15:00 Uhr Andreas