From 64722b9dd2b4dbe95c3707a2c7861e8159864419 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Wed, 14 Oct 2026 14:41:26 +0200 Subject: [PATCH] --- .../assets/js/bundle.js | 18 +++++ .../u01_erkennung-typenfehlern/index.html | 24 +++++++ .../u01_erkennung-typenfehlern/package.json | 13 ++++ .../u01_erkennung-typenfehlern/src/main.ts | 5 ++ .../u02_user-email/assets/js/bundle.js | 18 +++++ .../uebungen/u02_user-email/index.html | 34 +++++++++ .../uebungen/u02_user-email/package.json | 13 ++++ .../uebungen/u02_user-email/src/main.ts | 6 ++ .../uebungen/u03_vehicle-interface/index.html | 68 ++++++++++++++++++ .../u03_vehicle-interface/package.json | 13 ++++ .../u03_vehicle-interface/src/main.ts | 24 +++++++ 05_typescript/uebungen/uebungen-01-03-ts.zip | Bin 0 -> 14740 bytes .../assets/js/05_type-definition-fn.js | 13 ++++ .../assets/js/06_optional-exception.js | 28 ++++++++ .../assets/js/07_static-type-check2.js | 22 ++++++ .../assets/js/08_explicit-type-annotation.js | 26 +++++++ .../tag28/01_ts-fundamentals/index.html | 7 ++ .../src/05_type-definition-fn.ts | 25 ++++++- .../src/06_optional-exception.js | 28 ++++++++ .../src/06_optional-exception.ts | 41 +++++++++++ .../src/07_static-type-check2.ts | 37 ++++++++++ .../src/08_explicit-type-annotation.ts | 43 +++++++++++ 22 files changed, 505 insertions(+), 1 deletion(-) create mode 100644 05_typescript/uebungen/u01_erkennung-typenfehlern/assets/js/bundle.js create mode 100644 05_typescript/uebungen/u01_erkennung-typenfehlern/index.html create mode 100644 05_typescript/uebungen/u01_erkennung-typenfehlern/package.json create mode 100644 05_typescript/uebungen/u01_erkennung-typenfehlern/src/main.ts create mode 100644 05_typescript/uebungen/u02_user-email/assets/js/bundle.js create mode 100644 05_typescript/uebungen/u02_user-email/index.html create mode 100644 05_typescript/uebungen/u02_user-email/package.json create mode 100644 05_typescript/uebungen/u02_user-email/src/main.ts create mode 100644 05_typescript/uebungen/u03_vehicle-interface/index.html create mode 100644 05_typescript/uebungen/u03_vehicle-interface/package.json create mode 100644 05_typescript/uebungen/u03_vehicle-interface/src/main.ts create mode 100644 05_typescript/uebungen/uebungen-01-03-ts.zip create mode 100644 05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/06_optional-exception.js create mode 100644 05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/07_static-type-check2.js create mode 100644 05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/08_explicit-type-annotation.js create mode 100644 05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.js create mode 100644 05_typescript/unterricht/tag28/01_ts-fundamentals/src/06_optional-exception.ts create mode 100644 05_typescript/unterricht/tag28/01_ts-fundamentals/src/07_static-type-check2.ts create mode 100644 05_typescript/unterricht/tag28/01_ts-fundamentals/src/08_explicit-type-annotation.ts 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 0000000000000000000000000000000000000000..564e74b2196566fc77205e7ea941359407e3c4c7 GIT binary patch literal 14740 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 AEdT%j literal 0 HcmV?d00001 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. +}