05_typescript/agenda.md

@@ -560,7 +560,6 @@ Projektarbeit
 
 **Inhalt:**
 
-- Build Tools im Vergleich & Einführung in Vite
 - Beispiele der Gestaltungsmöglichkeiten in Frameworks
 - Layout & wiederverwendbare Komponenten
 - EventHandler in React

05_typescript/uebungen/u22_fn-optional-props/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 createUserProfile2 = (username, age, email) => {
+          return `User ${username} is ${age ?? 18} years old and can be contacted at ${email ?? "N/A"}.`;
+        };
+        const createUserProfile = (username, age = 18, email = "N/A") => {
+          return `User ${username} is ${age} years old and can be contacted at ${email}.`;
+        };
+        createUserProfile("JohnDoe", 25, "john@example.com");
+        createUserProfile("JaneDoe");
+        createUserProfile("JohnDoe", 25, "john@example.com");
+        createUserProfile("JaneDoe");
+        createUserProfile2("JohnDoe", 25, "john@example.com");
+        createUserProfile2("JaneDoe");
+        createUserProfile2("JohnDoe", 25, "john@example.com");
+        createUserProfile2("JaneDoe");
+      }
+    }
+  });
+  require_main();
+})();

05_typescript/uebungen/u22_fn-optional-props/package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "22_fn-optional-props",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "22_fn-optional-props",
+      "version": "1.0.0",
+      "license": "ISC"
+    }
+  }
+}

05_typescript/uebungen/u22_fn-optional-props/src/main.ts

@@ -1,7 +1,32 @@
-createUserProfile('JohnDoe', 25, 'john@example.com');
-// => "User JohnDoe is 25 years old and can be contacted at john@example.com."
+{
+  const createUserProfile2 = (username: string, age?: number, email?: string): string => {
+    return `User ${username} is ${age ?? 18} years old and can be contacted at ${email ?? 'N/A'}.`;
+  };
 
-createUserProfile('JaneDoe');
+  const createUserProfile = (username: string, age: number = 18, email: string = 'N/A'): string => {
+    return `User ${username} is ${age} years old and can be contacted at ${email}.`;
+  };
+
+  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'));
+
+  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'));
+
+  console.log(createUserProfile2('JohnDoe', 25, 'john@example.com'));
+  // => "User JohnDoe is 25 years old and can be contacted at john@example.com."
+
+  console.log(createUserProfile2('JaneDoe'));
+
+  console.log(createUserProfile2('JohnDoe', 25, 'john@example.com'));
+  // => "User JohnDoe is 25 years old and can be contacted at john@example.com."
+
+  console.log(createUserProfile2('JaneDoe'));
+}
 // => "User JaneDoe is 18 years old and can be contacted at N/A."
 
 // Übung 22: Optionale Parameter implementieren

05_typescript/uebungen/u23_fn-rest-params-args/assets/js/bundle.js

@@ -0,0 +1,17 @@
+(() => {
+  // src/main.ts
+  {
+    const sumAll = (...numbers) => {
+      return numbers.reduce((sum, number) => sum + number, 0);
+    };
+    const calculateHypotenuse = (...[a, b]) => {
+      return Math.sqrt(a ** 2 + b ** 2);
+    };
+    const total = sumAll(1, 2, 3, 4, 5);
+    console.log(total);
+    const sides = [3, 4];
+    const hypotenuse = calculateHypotenuse(...sides);
+    console.log(hypotenuse);
+    const invalidSides = [3, 4, 5];
+  }
+})();

05_typescript/uebungen/u23_fn-rest-params-args/package.json

@@ -9,5 +9,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "type": "commonjs"
+  "type": "module"
 }

05_typescript/uebungen/u23_fn-rest-params-args/src/main.ts

@@ -1,23 +1,38 @@
-// 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 = (...numbers: number[]): number => {
+    return numbers.reduce((sum, number) => sum + number, 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())
 
-// 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.
+  const calculateHypotenuse = (...[a, b]: [number, number]): number => {
+    return Math.sqrt(a ** 2 + b ** 2);
+  };
 
-// 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())
+  // 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.
 
-// 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 total = sumAll(1, 2, 3, 4, 5);
+  console.log(total); // => 15
+
+  // Example usage of calculateHypotenuse with spread syntax
+  // Define hypotenuse
+  const sides: [number, number] = [3, 4];
+  const hypotenuse = calculateHypotenuse(...sides);
+  console.log(hypotenuse); // => 5
+
+  // Attempting to call calculateHypotenuse with incorrect number of arguments
+  const invalidSides = [3, 4, 5];
+  // const invalidHypotenuse = calculateHypotenuse(...invalidSides);
+  // console.log(invalidHypotenuse);
+  // Define invalidHypotenuse to call calculateHypotenuse with invalidSides => TypeScript Error: Expected 2 arguments, but got 3.
+}

05_typescript/uebungen/u24_fn-destructuring/assets/js/bundle.js

@@ -0,0 +1,13 @@
+(() => {
+  // src/main.ts
+  var displayUserInfo = ({ name, age = 25 }) => {
+    console.log(`Hello, ${name}! You are ${age} years old.`);
+  };
+  var getFirstTwoElements = ([first, second]) => {
+    console.log(`First: ${first}, Second: ${second}`);
+  };
+  displayUserInfo({ name: "John" });
+  displayUserInfo({ name: "Alice", age: 30 });
+  getFirstTwoElements([5, 10]);
+  getFirstTwoElements([8]);
+})();

05_typescript/uebungen/u24_fn-destructuring/package.json

@@ -9,5 +9,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "type": "commonjs"
+  "type": "module"
 }

05_typescript/uebungen/u24_fn-destructuring/src/main.ts

@@ -1,11 +1,3 @@
-// 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
-
 // Übung 24: Parameter Destrukturierung
 
 // 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.
@@ -13,7 +5,34 @@ getFirstTwoElements([8]); // => First: 8, Second: undefined
 // Anweisungen:
 
 // 1 Erstelle eine Funktion displayUserInfo, die die Eigenschaften name und age aus einem Objektparameter destrukturiert und einen Standardwert für age liefert.
+const displayUserInfo = ({ name, age = 25 }: { name: string; age?: number }): void => {
+  console.log(`Hello, ${name}! You are ${age} years old.`);
+};
+
+// ---
+type Person = { name: string; age?: number };
+
+const displayUserInfo2 = ({ name, age = 25 }: Person): void => {
+  console.log(`Hello, ${name}! You are ${age} years old.`);
+};
+
+// ---
+type DisplayUserInfoFn = (person: { name: string; age?: number }) => void;
+
+const displayUserInfo3: DisplayUserInfoFn = ({ name, age = 25 }) => {
+  console.log(`Hello, ${name}! You are ${age} years old.`);
+};
 
 // 2 Erstelle eine Funktion getFirstTwoElements, die die ersten beiden Elemente aus einem Array-Parameter zerstört.
 
+const getFirstTwoElements = ([first, second]: number[]): void => {
+  console.log(`First: ${first}, Second: ${second}`);
+};
+
 // 3 Teste deine Funktionen, indem du sie mit den richtigen Argumenten aufrufst.
+
+displayUserInfo({ name: 'John' }); // => Hello, John! You are 25 years old.
+displayUserInfo({ name: 'Alice', age: 30 }); // => Hello, Alice! You are 30 years old.
+
+getFirstTwoElements([5, 10]); // => First: 5, Second: 10
+getFirstTwoElements([8]); // => First: 8, Second: undefined

05_typescript/uebungen/u25_obj-read-only/assets/js/bundle.js

@@ -0,0 +1,30 @@
+(() => {
+  // src/main.ts
+  {
+    const printProductDetails = (product) => {
+      const { id, name, price, description, category } = product;
+      console.log(
+        `Name: ${name}
+ID: ${id}
+Category: ${category}
+Price: ${price ? price : "Not available"}
+${description ? description : "No description available"}`
+      );
+      console.log("\n");
+    };
+    const product1 = {
+      id: 101,
+      name: "Laptop",
+      category: "Electronics"
+    };
+    const product2 = {
+      id: 102,
+      name: "Phone",
+      price: 799,
+      description: "Latest model",
+      category: "Electronics"
+    };
+    printProductDetails(product1);
+    printProductDetails(product2);
+  }
+})();

05_typescript/uebungen/u25_obj-read-only/package.json

@@ -9,5 +9,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "type": "commonjs"
+  "type": "module"
 }

05_typescript/uebungen/u25_obj-read-only/src/main.ts

@@ -1,17 +1,50 @@
-// Ü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.
+  interface Product {
+    id: number;
+    name: string;
+    price?: number;
+    description?: string;
+    readonly category: string;
+  }
 
-// 2 Schreibe eine Funktion printProductDetails, die ein Product Objekt annimmt und:
+  // 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".
+  // Druckt die name, category und id.
+  // Wenn price undefined ist, drucke "Price: Not available".
+  // Wenn description undefined ist, drucke "No description available".
+  const printProductDetails = (product: Product) => {
+    const { id, name, price, description, category } = product;
+    console.log(
+      `Name: ${name}\nID: ${id}\nCategory: ${category}\nPrice: ${price ? price : 'Not available'}\n${description ? description : 'No description available'}`,
+    );
+    console.log('\n');
+  };
+
+  const product1: Product = {
+    id: 101,
+    name: 'Laptop',
+    category: 'Electronics',
+  };
+
+  const product2: Product = {
+    id: 102,
+    name: 'Phone',
+    price: 799,
+    description: 'Latest model',
+    category: 'Electronics',
+  };
+
+  printProductDetails(product1);
+  printProductDetails(product2);
+}

05_typescript/uebungen/u26_obj-update/src/main.ts

@@ -1,19 +1,29 @@
-// Übung 26: Eine verschachtelte Objekteigenschaft aktualisieren
+{
+  // Teste die Funktion, indem du ein Employee-Objekt erstellst und die Position aktualisierst.
+  interface Employee {
+    readonly employeeId: number;
+    details: {
+      position: string;
+      salary: number;
+    };
+  }
 
-// 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.
+  const updateEmployeePosition = (employee: Employee, position: string) => {
+    employee.details.position = position;
+    console.log(`Employee ID: ${employee.employeeId} Position: ${employee.details.position}`);
+  };
 
-// Anweisungen:
+  const employeeNew: Employee = {
+    employeeId: 8015,
+    details: {
+      position: 'Sales',
+      salary: 110,
+    },
+  };
 
-// Erstelle ein Employee Interface, die Folgendes enthält:
+  console.log(employeeNew.details);
 
-// Eine readonly employeeId (Number) Eigenschaft.
+  updateEmployeePosition(employeeNew, 'Dummschwätzer');
 
-// Eine veränderbare Detail-Eigenschaft, die ein Objekt ist, das Folgendes enthält: position (String), salary (Number)
-
-// Schreibe eine Funktion updateEmployeePosition die:
-
-// Akzeptiert ein Employee Objekt und einen neuen position String.
-
-// Aktualisiert die position des Mitarbeiters, verhindert aber jede Änderung der employeeId.
-
-// Teste die Funktion, indem du ein Employee-Objekt erstellst und die Position aktualisierst.
+  console.log(employeeNew.details);
+}

05_typescript/uebungen/u27_obj-interface-props/src/main.ts

@@ -5,21 +5,65 @@
 // 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.
+const createCar = (make: string, model: string, vin: string, options: { year?: number; color?: string }): Car => {
+  let newCar: Car = {
+    make,
+    model,
+    vin,
+  };
+
+  if (options.year) {
+    newCar.year = options.year;
+  }
+
+  if (options.color) {
+    newCar.color = options.color;
+  }
+
+  return newCar;
+};
 
 // 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 => {
+  car.color = color;
+  return car;
+};
+
+const updateCarDetails = (car: Car, year: number, color: string): Car => {
+  if (year) {
+    car.year = year;
+  }
+  if (color) {
+    car.color = color;
+  }
+  return car;
+};
+
+const car1: Car = createCar('Toyota', 'Corolla', '12345VIN', { year: 2020 });
+console.log(paintCar(car1, 'Red'));
+
+const car2: Car = createCar('Honda', 'Civic', '67890VIN', { year: 2018, color: 'Blue' });
+const updatedCar = updateCarDetails(car2, 2021, 'Black');
+console.log(updatedCar); // => { make: 'Honda', model: 'Civic', vin: 'UNCHANGEDVIN', year: 2021, color: 'Black' }
+// console.log(paintCar(car2, 'black'));

05_typescript/uebungen/u28_obj-excess-prop-check/src/main.ts

@@ -1,15 +1,43 @@
-// Übung 28: Excess Property Checks mit Object Literals
+{
+  // Übung 28: Excess Property Checks mit Object Literals
 
-// In dieser Übung definierst du ein Interface Car und schreibst eine Funktion, die ein Objekt vom Typ Car annimmt. Du wirst untersuchen, wie TypeScript Excess Property Checks erzwingt, indem es versucht, ein Objekt mit zusätzlichen Eigenschaften an die Funktion zu übergeben.
+  // In dieser Übung definierst du ein Interface Car und schreibst eine Funktion, die ein Objekt vom Typ Car annimmt. Du wirst untersuchen, wie TypeScript Excess Property Checks erzwingt, indem es versucht, ein Objekt mit zusätzlichen Eigenschaften an die Funktion zu übergeben.
 
-// Anweisungen:
+  // Anweisungen:
 
-// 1 Definiere ein Car Interface mit den folgenden Eigenschaften:
+  // 1 Definiere ein Car Interface mit den folgenden Eigenschaften:
 
-// - make: String
-// - model: String
-// - year: Number
+  // - 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).
+  // 2 Schreibe eine Funktion printCarDetails, die ein Objekt vom Typ Car annimmt und die Details des Autos ausgibt (make, model und 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.
+  // 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.
+
+  interface Car {
+    make: string;
+    model: string;
+    year: number;
+  }
+
+  const printCarDetails = (car: Car) => {
+    console.log(car.make);
+    console.log(car.model);
+    console.log(car.year);
+  };
+
+  printCarDetails({
+    make: 'BMW',
+    model: 'M3',
+    year: 2025,
+    // color: 'red', //Object literal may only specify known properties, and 'color' does not exist in type 'Car'.
+  });
+
+  // printCarDetails({
+  //   make: 'THE Maker',
+  //   model: 'THE model',
+  //   year: 2099,
+  //   typescript: 'meckert rum, ändert aber nichts daran, dass es in JS trotzdem geht',
+  // });
+}

05_typescript/uebungen/u29_obj-extending-interface/src/main.ts

@@ -1,11 +1,60 @@
-// Ü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: string | 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: 'Samsung' | 'LG' | 'Sony';
+    warranty: number;
+  }
 
-// 3 Erstelle ein Objekt vom Typ Electronics.
+  // 3 Erstelle ein Objekt vom Typ Electronics.
+  const tv: Electronics = {
+    id: '123',
+    name: 'LG1000',
+    price: 100,
+    brand: 'LG',
+    warranty: 3,
+  };
+
+  console.log(tv);
+}
+{
+  // Ü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.
+
+  // Anweisungen:
+
+  // 1 Definiere ein Product Interface mit den Eigenschaften id, name und price.
+  interface Product {
+    id: unknown;
+    name: never;
+    price: any;
+  }
+
+  // 2 Erweitere die Product Interface um eine Electronics Interface und füge die Eigenschaften brand und warranty hinzu.
+  interface Electronics extends Product {
+    brand: undefined;
+    warranty: null;
+  }
+
+  // 3 Erstelle ein Objekt vom Typ Electronics.
+  const impossibleElectronicProduct: Electronics = {
+    id: 'Verloren gegangen',
+    name: 'Namenslos',
+    price: 9999999999999999999999999999999999.99,
+    brand: 'Noname marke',
+    warranty: 'gibts nicht',
+  };
+}

05_typescript/uebungen/u30_obj-subtyp/src/main.ts

@@ -1,11 +1,35 @@
-// Übung 30: Einzigartige Eigenschaften zu einem Subtyp hinzufügen
+{
+  // Übung 30: Einzigartige Eigenschaften zu einem Subtyp hinzufügen
 
-// 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.
+  // 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.
 
-// Anweisungen:
+  // Anweisungen:
 
-// 1 Erweitere die Product Interface, um eine Furniture Interface zu erstellen.
+  // 1 Erweitere die Product Interface, um eine Furniture Interface zu erstellen.
 
-// 2 Füge die Eigenschaften material und dimensions zu den Möbeln hinzu.
+  interface Product {
+    readonly id: number;
+    name: string;
+    price: number;
+  }
 
-// 3 Erstelle ein Objekt vom Typ Furniture, das ein Möbelstück darstellt.
+  interface Furniture extends Product {
+    // 2 Füge die Eigenschaften material und dimensions zu den Möbeln hinzu.
+
+    material: string;
+    dimensions: { width: number; height: number; length: number };
+  }
+
+  // 3 Erstelle ein Objekt vom Typ Furniture, das ein Möbelstück darstellt.
+
+  const furniture: Furniture = {
+    id: 1,
+    name: 'Schreibtisch',
+    price: 249.99,
+    material: 'Eichenholz',
+    dimensions: { width: 120, height: 60, length: 75 },
+  };
+
+  console.log(furniture);
+  console.log(furniture.dimensions);
+}

05_typescript/uebungen/u31_obj-generics-fns/assets/js/bundle.js

@@ -0,0 +1,27 @@
+(() => {
+  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 getFirstElement = (arr) => {
+          return arr[0];
+        };
+        const firstNumber = getFirstElement([1, 2, 3]);
+        const firstString = getFirstElement(["apple", "banana", "cherry"]);
+        console.log(firstNumber);
+        console.log(firstString);
+        console.log(getFirstElement([]));
+      }
+    }
+  });
+  require_main();
+})();

05_typescript/uebungen/u31_obj-generics-fns/src/main.ts

@@ -1,9 +1,20 @@
-// Ü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>(arr: Array<T>): T | undefined => {
+    return arr[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.
+  const firstNumber = getFirstElement<number>([1, 2, 3]); // TypeScript infers T as number
+  const firstString = getFirstElement(['apple', 'banana', 'cherry']); // TypeScript infers T as string
+
+  console.log(firstNumber); // => 1
+  console.log(firstString); // => "apple"
+  console.log(getFirstElement([]));
+}

05_typescript/unterricht/tag32/01_ts-functions/src/04_never-void-unknown.ts

@@ -70,6 +70,7 @@ In TypeScript gibt es drei spezielle Typen: never, unknown und void. Diese Typen
         console.error(err);
         throw err; // paranoid
       }
+
       throw new Error('An unknown error occurred.');
     }
   };