2026-10-14 14:41:26 +02:00
parent 34a9abfe23
commit 64722b9dd2
22 changed files with 505 additions and 1 deletions
@@ -0,0 +1,18 @@
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+
+  // src/main.ts
+  var require_main = __commonJS({
+    "src/main.ts"() {
+      function calculateDiscount(price, discount) {
+        return Number((price - discount).toFixed(2));
+      }
+      var finalPrice = calculateDiscount(100, 10);
+      console.log(`The final price is $${finalPrice}`);
+    }
+  });
+  require_main();
+})();
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 1: Erkennung von Typenfehlern</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/bundle.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <div class="alert alert-primary">
+          <h1>Übung 1: Erkennung von Typenfehlern</h1>
+          <p>
+            In dieser Übung übst du, Type Mismatches in TypeScript-Funktionen zu erkennen und aufzulösen. Dir wird eine
+            Funktion vorgelegt, die falsche Type Annotations hat. Deine Aufgabe ist es, die Probleme zu erkennen und die
+            Funktion so zu korrigieren, dass sie dem beabsichtigten Verhalten entspricht.
+          </p>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+{
+  "name": "01_erkennung-typenfehlern",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "ts": "npx esbuild src/main.ts --watch --bundle --outfile=assets/js/bundle.js --loader:.ts=ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}
@@ -0,0 +1,5 @@
+function calculateDiscount(price: number, discount: string): number {
+  return price - parseFloat(discount);
+}
+
+const finalPrice = calculateDiscount(100, 10);
@@ -0,0 +1,18 @@
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+
+  // src/main.ts
+  var require_main = __commonJS({
+    "src/main.ts"() {
+      var user = {
+        name: "John Doe",
+        age: 30
+      };
+      console.log(user.email?.toLowerCase());
+    }
+  });
+  require_main();
+})();
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 2: User E-Mail</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/bundle.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <div class="alert alert-primary">
+          <h1>Übung 2: User E-Mail</h1>
+          <p>
+            In dieser Übung arbeitest du mit einem Objekt und stellst sicher, dass alle notwendigen Eigenschaften
+            vorhanden sind, bevor du auf sie zugreifst. Du nutzt Static Type-Checking von TypeScript, um undefinierte
+            Fehler beim Zugriff auf Objekteigenschaften zu vermeiden.
+          </p>
+          <ul class="list">
+            <li>
+              Ändere den Code, um einen Typ (<code>Interface</code>) einzuführen, der eine optionale E-Mail-Eigenschaft
+              enthält.
+            </li>
+            <li>
+              Verwende eine bedingte Anweisung für das Vorhandensein der E-Mail-Eigenschaft, bevor du versuchst, auf sie
+              zuzugreifen.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+{
+  "name": "02_user-email",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "ts": "npx esbuild src/main.ts --watch --bundle --outfile=assets/js/bundle.js --loader:.ts=ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}
@@ -0,0 +1,6 @@
+const user = {
+  name: 'John Doe',
+  age: 30,
+};
+
+console.log(user.email.toLowerCase());
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 3: Vehicle Interface</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/bundle.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <div class="alert alert-primary">
+          <h1>Übung 3: Vehicle Interface</h1>
+          <p>
+            In dieser Übung arbeitest du mit einem Interface Vehicle und einem Objekt myCar, um sicherzustellen, dass
+            beide mit den richtigen Methodensignaturen übereinstimmen. In Fällen, in denen Interface und Objekt nicht
+            übereinstimmen, musst du Anpassungen vornehmen.
+          </p>
+          <h4>Aufgaben:</h4>
+          <ol class="list">
+            <li>
+              Identifiziere alle Unstimmigkeiten zwischen dem Interface <code>Vehicle</code> und dem Objekt
+              <code>myCar</code>.
+            </li>
+            <li>
+              Ändere das Interface <code>Vehicle</code>, das Objekt <code>myCar</code> oder beides, damit sie richtig
+              übereinstimmen.
+            </li>
+            <li>
+              Stelle sicher, dass die Funktion <code>operateVehicle</code> beide Methoden fehlerfrei aufrufen kann und
+              dass sie den Fahrzeugstatus korrekt zurückgibt.
+            </li>
+          </ol>
+          <h4>Anweisungen:</h4>
+          <ul class="list">
+            <li>
+              Das Interface Vehicle umfasst zwei Methoden:
+              <ul class="list">
+                <li>
+                  <code>startEngine</code>: Akzeptiert einen String-Parameter für den Schlüssel und gibt einen
+                  booleschen Wert zurück, der angibt, ob der Motor erfolgreich gestartet wurde.
+                </li>
+                <li>
+                  <code>drive</code>: Akzeptiert einen Zahlenparameter für die Geschwindigkeit und gibt einen String
+                  zurück, der den Fahrstatus beschreibt.
+                </li>
+              </ul>
+            </li>
+            <li>
+              Das Objekt <code>myCar</code> sollte beide Methoden korrekt implementieren, um das Interface Vehicle zu
+              entsprechen.
+            </li>
+            <li>
+              Ändere entweder das Interface <code>Vehicle</code> oder das Objekt <code>myCar</code> so, dass sie
+              übereinstimmen.
+            </li>
+
+            <p>
+              Stelle sicher, dass <code>operateVehicle</code> den Status des Fahrzeugs zurückgibt, nachdem du versucht
+              hast, den Motor zu starten und zu fahren.
+            </p>
+          </ul>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+{
+  "name": "03_vehicle-interface",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "ts": "npx esbuild src/main.ts --watch --bundle --outfile=assets/js/bundle.js --loader:.ts=ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}
@@ -0,0 +1,24 @@
+interface Vehicle {
+  startEngine: (key: string) => boolean;
+  drive: (speed: number) => string;
+}
+
+const myCar = {
+  startEngine: () => {
+    console.log('Engine started');
+    return true;
+  },
+  drive: () => {
+    return 'Driving at default speed';
+  },
+};
+
+function operateVehicle(vehicle: Vehicle): string {
+  if (vehicle.startEngine('car-key')) {
+    return vehicle.drive(60);
+  } else {
+    return 'Engine failed to start.';
+  }
+}
+
+console.log(operateVehicle(myCar));
@@ -4,5 +4,18 @@
    let calculateTotal = function(cart) {
      return cart.getTotal();
    };
+    console.log(
+      calculateTotal({
+        getTotal: () => 42
+      })
+    );
+    const sum = (n1, n2) => {
+      return Number(n1) + Number(n2);
+    };
+    const sum2 = (n1, n2) => {
+      return Number(n1) + Number(n2);
+    };
+    console.log(sum(1, 2));
+    console.log(sum2(1, 2));
  }
 })();
@@ -0,0 +1,28 @@
+(() => {
+  // src/06_optional-exception.ts
+  {
+    const vehicle = {
+      make: "Toyota",
+      model: "Corolla",
+      // startEngine: () =>`${vehicle.make} engine startet`;
+      startEngine() {
+        return `${this.make} engine startet`;
+      }
+    };
+    const vehicle2 = {
+      make: "Citroen",
+      model: "AMI",
+      // startEngine: () =>`${vehicle.make} engine startet`;
+      startEngine() {
+        return `${this.make} engine startet`;
+      },
+      stopEngine() {
+        return `${this.make} engine stoppt`;
+      }
+    };
+    console.log(vehicle.startEngine());
+    console.log(vehicle.stopEngine?.());
+    console.log(vehicle2.startEngine());
+    console.log(vehicle2.stopEngine?.());
+  }
+})();
@@ -0,0 +1,22 @@
+(() => {
+  // src/07_static-type-check2.ts
+  {
+    let greetUser = function(name) {
+      const greeting = "Hello, " + name;
+      const timestamp = /* @__PURE__ */ new Date();
+      console.log(greeting);
+    };
+    const calculateArea = (radius, pi) => {
+      return radius * radius * parseFloat(pi);
+    };
+    calculateArea(10, "3.14");
+    greetUser("John Wick");
+    const dayOfWeek = (/* @__PURE__ */ new Date()).getDay();
+    let message = "";
+    if (dayOfWeek === 0 || dayOfWeek === 6) {
+      message = "It's a weekend!";
+    } else if (dayOfWeek === 2) {
+      message = "It's Tuesday!";
+    }
+  }
+})();
@@ -0,0 +1,26 @@
+(() => {
+  // src/08_explicit-type-annotation.ts
+  {
+    let age = 23;
+    let message = "Welcome Text";
+    let toggle = true;
+    const logWelcome = (employee, hireDate) => {
+      console.log(`Welcome ${employee}, your hire date is ${hireDate.toDateString()}!`);
+    };
+    logWelcome("John Wick", /* @__PURE__ */ new Date("2024"));
+    console.log(/* @__PURE__ */ new Date());
+    console.log(/* @__PURE__ */ new Date("2025-07-19"));
+    const processEmployee2 = (employee) => {
+      console.log(
+        `${employee.name} started on ${employee.startDate.toDateString()} with a salary of $${employee.salary}.`
+      );
+    };
+    const processEmployee = (employee) => {
+      console.log(
+        `${employee.name} started on ${employee.startDate.toDateString()} with a salary of $${employee.salary}.`
+      );
+    };
+    processEmployee2({ name: "John Wick", startDate: /* @__PURE__ */ new Date(), salary: 95e3 });
+    processEmployee({ name: "John Wick", startDate: /* @__PURE__ */ new Date(), salary: 95e3 });
+  }
+})();
@@ -7,6 +7,13 @@
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />

    <script src="assets/js/01_interface-user.js" defer></script>
+    <script src="assets/js/02_unions.js" defer></script>
+    <script src="assets/js/03_generics.js" defer></script>
+    <script src="assets/js/04_static-type-checking.js" defer></script>
+    <script src="assets/js/05_type-definition-fn.js" defer></script>
+    <script src="assets/js/06_optional-exception.js" defer></script>
+    <script src="assets/js/07_static-type-check2.js" defer></script>
+    <script src="assets/js/08_explicit-type-annotation.js" defer></script>
  </head>
  <body>
    <main>
@@ -1,10 +1,33 @@
-// Type Definition für Funktionen
+// Type Definition für Funktionen als Paramater
+
 {
+  // Methoden Typ Syntax
  interface ShoppingCart {
+    // getTotal(): number;
    getTotal: () => number;
  }

  function calculateTotal(cart: ShoppingCart): number {
    return cart.getTotal();
  }
+
+  console.log(
+    calculateTotal({
+      getTotal: () => 42,
+    }),
+  );
+
+  // Type Definition von Funktion
+  type SumFn = (a: number, b: number) => number;
+
+  const sum: SumFn = (n1, n2) => {
+    return Number(n1) + Number(n2);
+  };
+
+  const sum2 = (n1: number, n2: number): number => {
+    return Number(n1) + Number(n2);
+  };
+
+  console.log(sum(1, 2));
+  console.log(sum2(1, 2));
 }
@@ -0,0 +1,28 @@
+// Optional Exception Parameter in JS
+{
+  const vehicle = {
+    make: 'Toyota',
+    model: 'Corolla',
+
+    startEngine: function () {
+      return `${this.make} engine startet`;
+    },
+
+    // Methode - Kurzschreibweise ES6
+    startEngine2() {
+      return `${this.make} engine startet`;
+    },
+
+    stopEngine: () => {
+      console.log(this); // => window (browser) | undefined (node)
+      return `${vehicle.make} engine gestoppt`;
+    },
+  };
+
+  console.log(vehicle.startEngine()); // => 'Toyota engine startet'
+  console.log(vehicle.stopEngine()); // => 'Toyota engine startet'
+
+  const weather = [{ main: [{ icon: '10dn', description: 'Clouds' }] }];
+
+  console.log(weather[0]?.test[0]?.test);
+}
@@ -0,0 +1,41 @@
+// Optional Exception Parameter in JS
+{
+  interface Vehicle {
+    make: string;
+    model: string;
+    startEngine: () => string;
+    stopEngine?: () => string; // ?: optional Property
+  }
+
+  const vehicle: Vehicle = {
+    make: 'Toyota',
+    model: 'Corolla',
+    // startEngine: () =>`${vehicle.make} engine startet`;
+    startEngine() {
+      return `${this.make} engine startet`;
+    },
+  };
+
+  const vehicle2: Vehicle = {
+    make: 'Citroen',
+    model: 'AMI',
+    // startEngine: () =>`${vehicle.make} engine startet`;
+    startEngine() {
+      return `${this.make} engine startet`;
+    },
+    stopEngine() {
+      return `${this.make} engine stoppt`;
+    },
+  };
+
+  console.log(vehicle.startEngine()); // => Toyota engine startet
+
+  // Property Esception
+  console.log(vehicle.stopEngine?.()); // => undefined
+
+  // Cannot invoke an object which is possibly 'undefined'.
+  // console.log(vehicle.stopEngine()); // => undefined
+
+  console.log(vehicle2.startEngine()); // => Citroen engine startet
+  console.log(vehicle2.stopEngine?.()); // => Citroen engine stoppt
+}
@@ -0,0 +1,37 @@
+// static type checking - error linting Part II
+{
+  const calculateArea = (radius: number, pi: string): number => {
+    return radius * radius * parseFloat(pi);
+  };
+
+  calculateArea(10, '3.14'); // 314
+  // Argument of type 'number' is not assignable to parameter of type 'string'.
+  //calculateArea(10, 3.14);
+
+  function greetUser(name: string): void {
+    const greeting = 'Hello, ' + name;
+
+    // 'timestamp' is declared but its value is never read.
+    const timestamp = new Date(); // Unused variable
+
+    console.log(greeting);
+  }
+
+  greetUser('John Wick');
+
+  // Logikfehler in bedingten Anweisungen
+
+  const dayOfWeek = new Date().getDay(); // number
+
+  let message = '';
+
+  if (dayOfWeek === 0 || dayOfWeek === 6) {
+    message = "It's a weekend!";
+
+    // This comparison appears to be unintentional because the types 'number' and 'string' have no overlap.
+    // } else if (dayOfWeek === 2 || dayOfWeek === 'Tuesday') {
+    //    message = "It's Tuesday!";
+  } else if (dayOfWeek === 2) {
+    message = "It's Tuesday!";
+  }
+}
@@ -0,0 +1,43 @@
+// Explicit Type Annotations - In TypeScript hast du die Möglichkeit, die Typen von Variablen und Funktionsparametern explizit zu definieren.
+{
+  let age: number = 23;
+  let message: string = 'Welcome Text';
+  let toggle: boolean = true;
+
+  // function logWelcome(employee: string, hireDate: Date) {
+  //   console.log(`Welcome ${employee}, your hire date is ${hireDate.toDateString()}!`);
+  // }
+
+  const logWelcome = (employee: string, hireDate: Date) => {
+    console.log(`Welcome ${employee}, your hire date is ${hireDate.toDateString()}!`);
+  };
+
+  logWelcome('John Wick', new Date('2024')); // => Welcome John Wick, your hire date is Mon Jan 01 2024!
+
+  console.log(new Date());
+  console.log(new Date('2025-07-19')); // => 2025-07-19T00:00:00.000Z
+
+  // function processEmployee(employee: { name: string; startDate: Date; salary: number }) {
+  //   console.log(
+  //     `${employee.name} started on ${employee.startDate.toDateString()} with a salary of $${employee.salary}.`,
+  //   );
+  // }
+
+  type Employee = { name: string; startDate: Date; salary: number };
+
+  const processEmployee2 = (employee: Employee) => {
+    console.log(
+      `${employee.name} started on ${employee.startDate.toDateString()} with a salary of $${employee.salary}.`,
+    );
+  };
+
+  const processEmployee = (employee: { name: string; startDate: Date; salary: number }) => {
+    console.log(
+      `${employee.name} started on ${employee.startDate.toDateString()} with a salary of $${employee.salary}.`,
+    );
+  };
+
+  processEmployee2({ name: 'John Wick', startDate: new Date(), salary: 95000 });
+  processEmployee({ name: 'John Wick', startDate: new Date(), salary: 95000 });
+  // => John Wick started on Wed Oct 14 2026 with a salary of $95000.
+}