diff --git a/05_typescript/uebungen/u01_erkennung-typenfehlern/assets/js/bundle.js b/05_typescript/uebungen/u01_erkennung-typenfehlern/assets/js/bundle.js new file mode 100644 index 0000000..4d6fff6 --- /dev/null +++ b/05_typescript/uebungen/u01_erkennung-typenfehlern/assets/js/bundle.js @@ -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(); +})(); diff --git a/05_typescript/uebungen/u01_erkennung-typenfehlern/index.html b/05_typescript/uebungen/u01_erkennung-typenfehlern/index.html new file mode 100644 index 0000000..24f132d --- /dev/null +++ b/05_typescript/uebungen/u01_erkennung-typenfehlern/index.html @@ -0,0 +1,24 @@ + + + + + + Übung 1: Erkennung von Typenfehlern + + + + +
+
+
+

Übung 1: Erkennung von Typenfehlern

+

+ 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. +

+
+
+
+ + diff --git a/05_typescript/uebungen/u01_erkennung-typenfehlern/package.json b/05_typescript/uebungen/u01_erkennung-typenfehlern/package.json new file mode 100644 index 0000000..34036a0 --- /dev/null +++ b/05_typescript/uebungen/u01_erkennung-typenfehlern/package.json @@ -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" +} diff --git a/05_typescript/uebungen/u01_erkennung-typenfehlern/src/main.ts b/05_typescript/uebungen/u01_erkennung-typenfehlern/src/main.ts new file mode 100644 index 0000000..5511d5c --- /dev/null +++ b/05_typescript/uebungen/u01_erkennung-typenfehlern/src/main.ts @@ -0,0 +1,5 @@ +function calculateDiscount(price: number, discount: string): number { + return price - parseFloat(discount); +} + +const finalPrice = calculateDiscount(100, 10); diff --git a/05_typescript/uebungen/u02_user-email/assets/js/bundle.js b/05_typescript/uebungen/u02_user-email/assets/js/bundle.js new file mode 100644 index 0000000..fd18a3d --- /dev/null +++ b/05_typescript/uebungen/u02_user-email/assets/js/bundle.js @@ -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(); +})(); diff --git a/05_typescript/uebungen/u02_user-email/index.html b/05_typescript/uebungen/u02_user-email/index.html new file mode 100644 index 0000000..f7fb9fd --- /dev/null +++ b/05_typescript/uebungen/u02_user-email/index.html @@ -0,0 +1,34 @@ + + + + + + Übung 2: User E-Mail + + + + +
+
+
+

Übung 2: User E-Mail

+

+ 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. +

+
    +
  • + Ändere den Code, um einen Typ (Interface) einzuführen, der eine optionale E-Mail-Eigenschaft + enthält. +
    • +
  • + Verwende eine bedingte Anweisung für das Vorhandensein der E-Mail-Eigenschaft, bevor du versuchst, auf sie + zuzugreifen. +
    • +
+
+
+
+ + diff --git a/05_typescript/uebungen/u02_user-email/package.json b/05_typescript/uebungen/u02_user-email/package.json new file mode 100644 index 0000000..574718d --- /dev/null +++ b/05_typescript/uebungen/u02_user-email/package.json @@ -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" +} diff --git a/05_typescript/uebungen/u02_user-email/src/main.ts b/05_typescript/uebungen/u02_user-email/src/main.ts new file mode 100644 index 0000000..fc51dbc --- /dev/null +++ b/05_typescript/uebungen/u02_user-email/src/main.ts @@ -0,0 +1,6 @@ +const user = { + name: 'John Doe', + age: 30, +}; + +console.log(user.email.toLowerCase()); diff --git a/05_typescript/uebungen/u03_vehicle-interface/index.html b/05_typescript/uebungen/u03_vehicle-interface/index.html new file mode 100644 index 0000000..7d5532e --- /dev/null +++ b/05_typescript/uebungen/u03_vehicle-interface/index.html @@ -0,0 +1,68 @@ + + + + + + Übung 3: Vehicle Interface + + + + +
+
+
+

Übung 3: Vehicle Interface

+

+ 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. +

+

Aufgaben:

+
    +
  1. + Identifiziere alle Unstimmigkeiten zwischen dem Interface Vehicle und dem Objekt + myCar. +
    2. +
  2. + Ändere das Interface Vehicle, das Objekt myCar oder beides, damit sie richtig + übereinstimmen. +
    3. +
  3. + Stelle sicher, dass die Funktion operateVehicle beide Methoden fehlerfrei aufrufen kann und + dass sie den Fahrzeugstatus korrekt zurückgibt. +
    4. +
+

Anweisungen:

+
    +
  • + Das Interface Vehicle umfasst zwei Methoden: +
      +
    • + startEngine: Akzeptiert einen String-Parameter für den Schlüssel und gibt einen + booleschen Wert zurück, der angibt, ob der Motor erfolgreich gestartet wurde. +
      • +
    • + drive: Akzeptiert einen Zahlenparameter für die Geschwindigkeit und gibt einen String + zurück, der den Fahrstatus beschreibt. +
      • +
    +
    • +
  • + Das Objekt myCar sollte beide Methoden korrekt implementieren, um das Interface Vehicle zu + entsprechen. +
    • +
  • + Ändere entweder das Interface Vehicle oder das Objekt myCar so, dass sie + übereinstimmen. +
    • + +

    + Stelle sicher, dass operateVehicle den Status des Fahrzeugs zurückgibt, nachdem du versucht + hast, den Motor zu starten und zu fahren. +

    +
+
+
+
+ + diff --git a/05_typescript/uebungen/u03_vehicle-interface/package.json b/05_typescript/uebungen/u03_vehicle-interface/package.json new file mode 100644 index 0000000..4ffcaba --- /dev/null +++ b/05_typescript/uebungen/u03_vehicle-interface/package.json @@ -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" +} diff --git a/05_typescript/uebungen/u03_vehicle-interface/src/main.ts b/05_typescript/uebungen/u03_vehicle-interface/src/main.ts new file mode 100644 index 0000000..0994685 --- /dev/null +++ b/05_typescript/uebungen/u03_vehicle-interface/src/main.ts @@ -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)); diff --git a/05_typescript/uebungen/uebungen-01-03-ts.zip b/05_typescript/uebungen/uebungen-01-03-ts.zip new file mode 100644 index 0000000..564e74b Binary files /dev/null and b/05_typescript/uebungen/uebungen-01-03-ts.zip differ diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/05_type-definition-fn.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/05_type-definition-fn.js index f797875..0b92d69 100644 --- a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/05_type-definition-fn.js +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/05_type-definition-fn.js @@ -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)); } })(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/06_optional-exception.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/06_optional-exception.js new file mode 100644 index 0000000..69927e5 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/06_optional-exception.js @@ -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?.()); + } +})(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/07_static-type-check2.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/07_static-type-check2.js new file mode 100644 index 0000000..cb22d40 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/07_static-type-check2.js @@ -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!"; + } + } +})(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/08_explicit-type-annotation.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/08_explicit-type-annotation.js new file mode 100644 index 0000000..a8c624c --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/08_explicit-type-annotation.js @@ -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 }); + } +})(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/index.html b/05_typescript/unterricht/tag28/01_ts-fundamentals/index.html index 1b6c316..0c9fa4e 100644 --- a/05_typescript/unterricht/tag28/01_ts-fundamentals/index.html +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/index.html @@ -7,6 +7,13 @@ + + + + + + +
diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/05_type-definition-fn.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/05_type-definition-fn.ts index 8f32c14..baad489 100644 --- a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/05_type-definition-fn.ts +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/05_type-definition-fn.ts @@ -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)); } diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.js new file mode 100644 index 0000000..7ae9e41 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.js @@ -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); +} diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.ts new file mode 100644 index 0000000..5e601e2 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.ts @@ -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 +} diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/07_static-type-check2.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/07_static-type-check2.ts new file mode 100644 index 0000000..9533c9e --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/07_static-type-check2.ts @@ -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!"; + } +} diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/08_explicit-type-annotation.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/08_explicit-type-annotation.ts new file mode 100644 index 0000000..a52d586 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/08_explicit-type-annotation.ts @@ -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. +}