From 6bf3c2c7c5ab219e83e87a243630d5ac197762dc Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Tue, 28 Jul 2026 14:03:08 +0200 Subject: [PATCH] --- .../uebungen/04_without-any/index.html | 23 +++++++ .../uebungen/04_without-any/package.json | 13 ++++ .../uebungen/04_without-any/src/main.ts | 6 ++ .../uebungen/05_type-annotations/index.html | 47 +++++++++++++ .../uebungen/05_type-annotations/package.json | 13 ++++ .../uebungen/05_type-annotations/src/main.ts | 7 ++ .../06_optional-properties/index.html | 58 ++++++++++++++++ .../06_optional-properties/package.json | 13 ++++ .../06_optional-properties/src/main.ts | 7 ++ .../uebungen/07_union-types/index.html | 24 +++++++ .../uebungen/07_union-types/package.json | 13 ++++ .../uebungen/07_union-types/src/main.ts | 17 +++++ .../uebungen/08_type-aliase/index.html | 24 +++++++ .../uebungen/08_type-aliase/package.json | 13 ++++ .../uebungen/08_type-aliase/src/main.ts | 26 ++++++++ .../uebungen/09_interfaces/index.html | 25 +++++++ .../uebungen/09_interfaces/package.json | 13 ++++ .../uebungen/09_interfaces/src/main.ts | 27 ++++++++ .../uebungen/10_assertions/index.html | 48 ++++++++++++++ .../uebungen/10_assertions/package.json | 13 ++++ .../uebungen/10_assertions/src/main.ts | 34 ++++++++++ .../o01_create-btn/assets/js/bundle.js | 11 ++++ .../uebungen/o01_create-btn/index.html | 20 ++++++ .../uebungen/o01_create-btn/package.json | 13 ++++ .../uebungen/o01_create-btn/src/CreateBtn.ts | 31 +++++++++ .../uebungen/o01_create-btn/src/main.ts | 19 ++++++ 04_typescript/uebungen/uebungen-04-10-o1.zip | Bin 0 -> 19601 bytes .../01_ts-types/assets/js/03_object-types.js | 21 ++++++ .../01_ts-types/assets/js/04_union-types.js | 24 +++++++ .../assets/js/05_type-statement.js | 31 +++++++++ .../assets/js/06_type-as-statement.js | 12 ++++ .../unterricht/tag32/01_ts-types/index.html | 6 +- .../tag32/01_ts-types/src/03_object-types.ts | 59 +++++++++++++++++ .../tag32/01_ts-types/src/04_union-types.ts | 56 ++++++++++++++++ .../01_ts-types/src/05_type-statement.ts | 62 ++++++++++++++++++ .../01_ts-types/src/06_type-as-statement.ts | 19 ++++++ 36 files changed, 847 insertions(+), 1 deletion(-) create mode 100644 04_typescript/uebungen/04_without-any/index.html create mode 100644 04_typescript/uebungen/04_without-any/package.json create mode 100644 04_typescript/uebungen/04_without-any/src/main.ts create mode 100644 04_typescript/uebungen/05_type-annotations/index.html create mode 100644 04_typescript/uebungen/05_type-annotations/package.json create mode 100644 04_typescript/uebungen/05_type-annotations/src/main.ts create mode 100644 04_typescript/uebungen/06_optional-properties/index.html create mode 100644 04_typescript/uebungen/06_optional-properties/package.json create mode 100644 04_typescript/uebungen/06_optional-properties/src/main.ts create mode 100644 04_typescript/uebungen/07_union-types/index.html create mode 100644 04_typescript/uebungen/07_union-types/package.json create mode 100644 04_typescript/uebungen/07_union-types/src/main.ts create mode 100644 04_typescript/uebungen/08_type-aliase/index.html create mode 100644 04_typescript/uebungen/08_type-aliase/package.json create mode 100644 04_typescript/uebungen/08_type-aliase/src/main.ts create mode 100644 04_typescript/uebungen/09_interfaces/index.html create mode 100644 04_typescript/uebungen/09_interfaces/package.json create mode 100644 04_typescript/uebungen/09_interfaces/src/main.ts create mode 100644 04_typescript/uebungen/10_assertions/index.html create mode 100644 04_typescript/uebungen/10_assertions/package.json create mode 100644 04_typescript/uebungen/10_assertions/src/main.ts create mode 100644 04_typescript/uebungen/o01_create-btn/assets/js/bundle.js create mode 100644 04_typescript/uebungen/o01_create-btn/index.html create mode 100644 04_typescript/uebungen/o01_create-btn/package.json create mode 100644 04_typescript/uebungen/o01_create-btn/src/CreateBtn.ts create mode 100644 04_typescript/uebungen/o01_create-btn/src/main.ts create mode 100644 04_typescript/uebungen/uebungen-04-10-o1.zip create mode 100644 04_typescript/unterricht/tag32/01_ts-types/assets/js/04_union-types.js create mode 100644 04_typescript/unterricht/tag32/01_ts-types/assets/js/05_type-statement.js create mode 100644 04_typescript/unterricht/tag32/01_ts-types/assets/js/06_type-as-statement.js create mode 100644 04_typescript/unterricht/tag32/01_ts-types/src/04_union-types.ts create mode 100644 04_typescript/unterricht/tag32/01_ts-types/src/05_type-statement.ts create mode 100644 04_typescript/unterricht/tag32/01_ts-types/src/06_type-as-statement.ts diff --git a/04_typescript/uebungen/04_without-any/index.html b/04_typescript/uebungen/04_without-any/index.html new file mode 100644 index 0000000..4472844 --- /dev/null +++ b/04_typescript/uebungen/04_without-any/index.html @@ -0,0 +1,23 @@ + + + + + + Übung 4: Vermeiden von any Parametern in Funktionen + + + + +
+
+
+

Übung 4: Vermeiden von any Parametern in Funktionen

+

+ Refaktoriere eine Funktion, die den Type any für ihre Parameter verwendet. Ersetze any durch spezifischere + Typen, um die Type-Safety zu verbessern. +

+
+
+
+ + diff --git a/04_typescript/uebungen/04_without-any/package.json b/04_typescript/uebungen/04_without-any/package.json new file mode 100644 index 0000000..845a96d --- /dev/null +++ b/04_typescript/uebungen/04_without-any/package.json @@ -0,0 +1,13 @@ +{ + "name": "04_without-any", + "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": "module" +} diff --git a/04_typescript/uebungen/04_without-any/src/main.ts b/04_typescript/uebungen/04_without-any/src/main.ts new file mode 100644 index 0000000..4b8567e --- /dev/null +++ b/04_typescript/uebungen/04_without-any/src/main.ts @@ -0,0 +1,6 @@ +const processData = (input: any): any => { + return input * 2; +}; + +let result = processData('100'); +console.log(result); diff --git a/04_typescript/uebungen/05_type-annotations/index.html b/04_typescript/uebungen/05_type-annotations/index.html new file mode 100644 index 0000000..b8a134c --- /dev/null +++ b/04_typescript/uebungen/05_type-annotations/index.html @@ -0,0 +1,47 @@ + + + + + + Übung 5: Type Annotations in TypeScript-Funktionen + + + + +
+
+
+

Übung 5: Type Annotations in TypeScript-Funktionen

+

+ In dieser Übung übst du das Hinzufügen von Type Annotations zu Variablen und Funktionen in TypeScript. Das + hilft dir dabei, zu verstehen, wie TypeScript Typen herleitet und wann es sinnvoll ist, sie explizit zu + deklarieren. +

+

+ Deine Aufgabe ist es, ein einfaches TypeScript-Programm zu erstellen, das die folgenden Schritte ausführt: +

+
    +
  1. + Deklariere eine Variable, um den Namen einer Person zu speichern, und gib ihn explizit + als String ein. +
    2. +
  2. + Deklariere eine Funktion, die zwei Parameter, firstName und + lastName, beide vom Typ String, benötigt und einen verketteten vollständigen Namen (ebenfalls + vom Typ String) zurückgibt. +
    3. +
  3. + Deklariere eine weitere Funktion, die die Summe des Zahlenfeldes + [10, 20, 30] berechnet. Diese Funktion sollte das Zahlenfeld als Eingabe haben und die Summe + der Zahlen zurückgeben (der Rückgabetyp sollte Zahl sein). +
    4. +
  4. + Verwende die Funktionen und Variablen, um eine Nachricht zu protokollieren, die den vollständigen Namen + einer Person und die Summe einer Reihe von Zahlen enthält. +
    5. +
+
+
+
+ + diff --git a/04_typescript/uebungen/05_type-annotations/package.json b/04_typescript/uebungen/05_type-annotations/package.json new file mode 100644 index 0000000..2907c16 --- /dev/null +++ b/04_typescript/uebungen/05_type-annotations/package.json @@ -0,0 +1,13 @@ +{ + "name": "05_type-annotations", + "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": "module" +} diff --git a/04_typescript/uebungen/05_type-annotations/src/main.ts b/04_typescript/uebungen/05_type-annotations/src/main.ts new file mode 100644 index 0000000..b72b5ed --- /dev/null +++ b/04_typescript/uebungen/05_type-annotations/src/main.ts @@ -0,0 +1,7 @@ +// TODO: Deklariere eine Variable, um den Namen einer Person zu speichern, und gib ihn explizit als String ein. + +// TODO: Deklariere eine Funktion, die zwei Parameter, firstName und lastName, beide vom Typ String, benötigt und einen verketteten vollständigen Namen (ebenfalls vom Typ String) zurückgibt. + +// TODO: Deklariere eine weitere Funktion, die die Summe des Zahlenfeldes [10, 20, 30] berechnet. Diese Funktion sollte das Zahlenfeld als Eingabe haben und die Summe der Zahlen zurückgeben (der Rückgabetyp sollte Zahl sein). + +// TODO: Verwende die Funktionen und Variablen, um eine Nachricht zu protokollieren, die den vollständigen Namen einer Person und die Summe einer Reihe von Zahlen enthält. diff --git a/04_typescript/uebungen/06_optional-properties/index.html b/04_typescript/uebungen/06_optional-properties/index.html new file mode 100644 index 0000000..1a4f8bd --- /dev/null +++ b/04_typescript/uebungen/06_optional-properties/index.html @@ -0,0 +1,58 @@ + + + + + + Übung 6: Definieren und Verwenden von Objekttypen mit optionalen Eigenschaften + + + + +
+
+
+

Übung 6: Definieren und Verwenden von Objekttypen mit optionalen Eigenschaften

+

+ In dieser Übung übst du, Object Types mit erforderlichen und optionalen Eigenschaften in TypeScript zu + definieren. Du erstellst eine Funktion, die mit einem Objekt arbeitet, das ein Buch darstellt. Das Objekt + sollte Eigenschaften für den Titel (ein String), den Autor (ein String) und ein optionales Erscheinungsjahr + (eine Zahl) enthalten. Dann implementierst du eine Logik, um sicher auf diese Eigenschaften zuzugreifen und + sie zu verwenden, einschließlich der optionalen Eigenschaft. +

+
    +
  1. + Definiere einen Objekttyp Book mit den folgenden Eigenschaften: +
      +
    • title: Eine Zeichenkette, die den Titel des Buches angibt.
      • +
    • author: Eine Zeichenkette, die den Autor des Buches angibt.
      • +
    • + yearPublished: Eine optionale Zahl, die das Jahr angibt, in dem das Buch veröffentlicht + wurde. +
      • +
    +
    2. +
  2. + Implementiere eine Funktion printBookDetails, die einen Parameter vom Typ + Book annimmt und die Details des Buches ausgibt. + +
      +
    • + Wenn die yearPublished bereitgestellt wird, drucke sie zusammen mit der title und author + aus. +
      • +
    • + Wenn yearPublished nicht angegeben wird, wird eine Meldung gedruckt, die besagt, dass das + Erscheinungsjahr unbekannt ist. +
      • +
    +
    3. +
  3. + Teste die Funktion mit verschiedenen Objekten, die entweder die Eigenschaft + yearPublished enthalten oder nicht. +
    4. +
+
+
+
+ + diff --git a/04_typescript/uebungen/06_optional-properties/package.json b/04_typescript/uebungen/06_optional-properties/package.json new file mode 100644 index 0000000..bf98b04 --- /dev/null +++ b/04_typescript/uebungen/06_optional-properties/package.json @@ -0,0 +1,13 @@ +{ + "name": "06_optional-properties", + "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": "module" +} diff --git a/04_typescript/uebungen/06_optional-properties/src/main.ts b/04_typescript/uebungen/06_optional-properties/src/main.ts new file mode 100644 index 0000000..9a8d28a --- /dev/null +++ b/04_typescript/uebungen/06_optional-properties/src/main.ts @@ -0,0 +1,7 @@ +// Step 1: Define the Book object type + +// Step 2: Implement the function to print book details + +// Test cases to verify your code implementation (comment out the code below to remove the initial errors) +printBookDetails({ title: 'The TypeScript Handbook', author: 'Dan Vanderkam' }); +printBookDetails({ title: 'Clean Code', author: 'Robert C. Martin', yearPublished: 2008 }); diff --git a/04_typescript/uebungen/07_union-types/index.html b/04_typescript/uebungen/07_union-types/index.html new file mode 100644 index 0000000..6da4066 --- /dev/null +++ b/04_typescript/uebungen/07_union-types/index.html @@ -0,0 +1,24 @@ + + + + + + Übung 7: Umgang mit Union Types in TypeScript + + + + +
+
+
+

Übung 7: Umgang mit Union Types in TypeScript

+

+ In dieser Übung übst du den Umgang mit Union Types in TypeScript, indem du eine Funktion erstellst, die + mehrere Typen annimmt und jeden Typ entsprechend behandelt. Du verwendest Techniken fürs Type Narrowing, um + sicherzustellen, dass sich die Funktion je nach Art der Eingabe richtig verhält. +

+
+
+
+ + diff --git a/04_typescript/uebungen/07_union-types/package.json b/04_typescript/uebungen/07_union-types/package.json new file mode 100644 index 0000000..c19d3e0 --- /dev/null +++ b/04_typescript/uebungen/07_union-types/package.json @@ -0,0 +1,13 @@ +{ + "name": "07_union-types", + "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": "module" +} diff --git a/04_typescript/uebungen/07_union-types/src/main.ts b/04_typescript/uebungen/07_union-types/src/main.ts new file mode 100644 index 0000000..84c25ef --- /dev/null +++ b/04_typescript/uebungen/07_union-types/src/main.ts @@ -0,0 +1,17 @@ +{ + const processInput = (input: string | number | boolean): string | number => { + // TODO: Implement logic here to handle different types of input + // - If the input is a string, return the string in uppercase + // - If the input is a number, return the square of the number + // - If the input is a boolean, return "Yes" if true, otherwise "No" + + // Placeholder return statement to be replaced + return input; + }; + + // Test cases to verify your code implementation (comment out the code below to remove the initial errors) + console.log(processInput('example')); // => "EXAMPLE" + console.log(processInput(7)); // => 49 + console.log(processInput(true)); // => "Yes" + console.log(processInput(false)); // => "No" +} diff --git a/04_typescript/uebungen/08_type-aliase/index.html b/04_typescript/uebungen/08_type-aliase/index.html new file mode 100644 index 0000000..d6ffb95 --- /dev/null +++ b/04_typescript/uebungen/08_type-aliase/index.html @@ -0,0 +1,24 @@ + + + + + + Übung 8: Type Aliase in TypeScript verwenden + + + + +
+
+
+

Übung 8: Type Aliase in TypeScript verwenden

+

+ In dieser Übung übst du das Erstellen und Verwenden von Type Aliasen, um deinen TypeScript-Code zu + vereinfachen und klarer zu gestalten. Du definierst Type Aliase für einen Objekt- und einen Union Type und + verwendest diese Aliase dann in Funktionen, um deinen Code lesbarer und wartbarer zu machen. +

+
+
+
+ + diff --git a/04_typescript/uebungen/08_type-aliase/package.json b/04_typescript/uebungen/08_type-aliase/package.json new file mode 100644 index 0000000..dc6ed54 --- /dev/null +++ b/04_typescript/uebungen/08_type-aliase/package.json @@ -0,0 +1,13 @@ +{ + "name": "08_type-aliase", + "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": "module" +} diff --git a/04_typescript/uebungen/08_type-aliase/src/main.ts b/04_typescript/uebungen/08_type-aliase/src/main.ts new file mode 100644 index 0000000..fd40786 --- /dev/null +++ b/04_typescript/uebungen/08_type-aliase/src/main.ts @@ -0,0 +1,26 @@ +// Step 1: Define a type alias 'Person' for an object type with the following properties: +// - name: a string +// - age: a number +// - isActive: a boolean + +// Step 2: Define a type alias 'ResponseStatus' for a union type that includes the following string literals: +// - "success" +// - "failure" +// - "pending" + +// Step 3: Implement a function 'printPersonDetails' that takes a parameter of type 'Person' +// - The function should print out the person's name, age, and activity status ("Active" or "Inactive" based on the isActive property). + +// Step 4: Implement a function 'handleResponse' that takes a parameter of type 'ResponseStatus' +// - The function should print different messages based on the value of the 'ResponseStatus' ("Operation successful", "Operation failed", "Operation pending"). + +// Test cases to verify your code implementation (comment out the code below to remove the initial errors) + +// Create an object of type 'Person' and pass it to 'printPersonDetails' +const person = { name: 'Alice', age: 30, isActive: true }; +printPersonDetails(person); // => Name: Alice, Age: 30, Status: Active + +// Pass different 'ResponseStatus' values to 'handleResponse' +handleResponse('success'); // => "Operation successful" +handleResponse('failure'); // => "Operation failed" +handleResponse('pending'); // => "Operation pending" diff --git a/04_typescript/uebungen/09_interfaces/index.html b/04_typescript/uebungen/09_interfaces/index.html new file mode 100644 index 0000000..4b8003b --- /dev/null +++ b/04_typescript/uebungen/09_interfaces/index.html @@ -0,0 +1,25 @@ + + + + + + Übung 9: Implementieren und Erweitern von Interfaces in TypeScript + + + + +
+
+
+

Übung 9: Implementieren und Erweitern von Interfaces in TypeScript

+

+ In dieser Übung übst du das Erstellen und Verwenden von Interfaces in TypeScript. Du definierst Interfaces, + um die Struktur von Objekten zu beschreiben, und erweiterst diese Interfaces dann, um zusätzliche + Eigenschaften hinzuzufügen. Außerdem lernst du das Konzept der declaration merging kennen, indem du neue + Felder zu einem bestehenden Interface hinzufügst. +

+
+
+
+ + diff --git a/04_typescript/uebungen/09_interfaces/package.json b/04_typescript/uebungen/09_interfaces/package.json new file mode 100644 index 0000000..edefa08 --- /dev/null +++ b/04_typescript/uebungen/09_interfaces/package.json @@ -0,0 +1,13 @@ +{ + "name": "09_interfaces", + "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": "module" +} diff --git a/04_typescript/uebungen/09_interfaces/src/main.ts b/04_typescript/uebungen/09_interfaces/src/main.ts new file mode 100644 index 0000000..9bb1fbf --- /dev/null +++ b/04_typescript/uebungen/09_interfaces/src/main.ts @@ -0,0 +1,27 @@ +// Step 1: Define an interface 'Person' with the following properties: +// - name: a string +// - age: a number + +// Step 2: Extend the 'Person' interface to create an 'Employee' interface with an additional property: +// - employeeId: a number + +// Step 3: Implement a function 'printEmployeeDetails' that takes a parameter of type 'Employee' +// - The function should print out the employee's name, age, and employeeId. + +// Step 4: Declare the 'Display' interface with a property: +// - resolution: a string + +// Step 5: Add a new property 'size: number' to the 'Display' interface using declaration merging + +// Step 6: Implement a function 'printDisplayDetails' that takes a parameter of type 'Display' +// - The function should print out the display's resolution and size. + +// Test cases to verify your code implementation (comment out the code below to remove the initial errors) + +// Create an 'Employee' object and pass it to 'printEmployeeDetails' +const employee = { name: 'Bob', age: 40, employeeId: 12345 }; +printEmployeeDetails(employee); // => Name: Bob, Age: 40, Employee ID: 12345 + +// Create a 'Display' object and pass it to 'printDisplayDetails' +const display = { resolution: '4K', size: 27 }; +printDisplayDetails(display); // => Resolution: 4K, Size: 27 diff --git a/04_typescript/uebungen/10_assertions/index.html b/04_typescript/uebungen/10_assertions/index.html new file mode 100644 index 0000000..435e437 --- /dev/null +++ b/04_typescript/uebungen/10_assertions/index.html @@ -0,0 +1,48 @@ + + + + + + Übung 10: Type Assertions in TypeScript anwenden + + + + +
+
+
+

Übung 10: Type Assertions in TypeScript anwenden

+

+ In dieser Übung verwendest du Type Assertions, um mit unbekannten Typen zu arbeiten und ein Objekt in einen + benutzerdefinierten Typ zu casten. +

+

Anweisungen

+
    +
  • Erstelle ein Objekt mysteryObject mit einer Eigenschaft info, die eine Zeichenkette enthält.
    • + +
  • Das Objekt sollte vom Typ unknown sein.
    • + +
  • Verwende eine Type Assertion, um zu behaupten, dass mysteryObject vom Typ { info: string } ist.
    • + +
  • + Greife auf die Info-Eigenschaft von mysteryObject zu und ändere ihren Wert in eine neue Zeichenkette. +
    • +
  • Definiere einen eigenen Typ ComplexObject mit einer Methode compute, die einen String zurückgibt.
    • + +
  • + Erstelle ein Objekt basicObject mit einer Methode compute. +
      +
    • Die Methode sollte die Zeichenfolge "Basic Computation" zurückgeben.
      • +
    +
    • +
  • + Verwende eine zweistufige Type Assertion, um zu behaupten, dass basicObject vom Typ ComplexObject ist. +
    • + +
  • Rufe die Berechnungsmethode auf basicObject auf und protokolliere das Ergebnis.
    • +
+
+
+
+ + diff --git a/04_typescript/uebungen/10_assertions/package.json b/04_typescript/uebungen/10_assertions/package.json new file mode 100644 index 0000000..d294086 --- /dev/null +++ b/04_typescript/uebungen/10_assertions/package.json @@ -0,0 +1,13 @@ +{ + "name": "10_assertions", + "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": "module" +} diff --git a/04_typescript/uebungen/10_assertions/src/main.ts b/04_typescript/uebungen/10_assertions/src/main.ts new file mode 100644 index 0000000..3a52c34 --- /dev/null +++ b/04_typescript/uebungen/10_assertions/src/main.ts @@ -0,0 +1,34 @@ +// [ ] Step 1: Create an object 'mysteryObject' with a property 'info' that holds a string. +// - The object should be of type 'unknown'. + +// [ ] Step 2: Use a type assertion to assert that 'mysteryObject' is of type '{ info: string }'. + +// [ ] Step 3: Access the 'info' property and assign a new string to it. + +// [ ] Step 4: Define a custom type 'ComplexObject' with a method 'compute' that returns a string. + +// [ ] Step 5: Create an object 'basicObject' with a method 'compute'. +// - The method should return a string "Basic Computation". + +// [ ] Step 6: Use a two-step type assertion to assert that 'basicObject' is of type 'ComplexObject'. + +// [ ] Step 7: Call the 'compute' method on 'basicObject' and log the result. + +// Test cases to verify your code implementation (comment out the code below to remove the initial errors) + +// Verify that 'info' was correctly accessed and modified +console.log('Updated info:', typedMysteryObject.info); // => "Updated Info" + +// Verify that 'compute' method of 'complexObject' returns the expected result +if (complexObject.compute() === 'Basic Computation') { + console.log('compute method returned the expected result.'); +} else { + console.error('compute method did not return the expected result.'); +} + +// Verify 'info' type compatibility +if (typeof typedMysteryObject.info === 'string') { + console.log('info property is of type string.'); +} else { + console.error('info property is not of type string.'); +} diff --git a/04_typescript/uebungen/o01_create-btn/assets/js/bundle.js b/04_typescript/uebungen/o01_create-btn/assets/js/bundle.js new file mode 100644 index 0000000..a443d31 --- /dev/null +++ b/04_typescript/uebungen/o01_create-btn/assets/js/bundle.js @@ -0,0 +1,11 @@ +(() => { + // src/main.ts + (() => { + const DOM = { + output: document.querySelector(".output") + }; + const init = () => { + }; + init(); + })(); +})(); diff --git a/04_typescript/uebungen/o01_create-btn/index.html b/04_typescript/uebungen/o01_create-btn/index.html new file mode 100644 index 0000000..3a6bf15 --- /dev/null +++ b/04_typescript/uebungen/o01_create-btn/index.html @@ -0,0 +1,20 @@ + + + + + + CreateBtn als Modul + + + + +
+
+

CreateBtn als Modul

+
+ Hier sollen 4 verschiedene Buttons erstellt über das CreateBtn Modul hinzugefügt werden. +
+
+
+ + diff --git a/04_typescript/uebungen/o01_create-btn/package.json b/04_typescript/uebungen/o01_create-btn/package.json new file mode 100644 index 0000000..f922271 --- /dev/null +++ b/04_typescript/uebungen/o01_create-btn/package.json @@ -0,0 +1,13 @@ +{ + "name": "create-btn", + "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": "module" +} diff --git a/04_typescript/uebungen/o01_create-btn/src/CreateBtn.ts b/04_typescript/uebungen/o01_create-btn/src/CreateBtn.ts new file mode 100644 index 0000000..6f8b44b --- /dev/null +++ b/04_typescript/uebungen/o01_create-btn/src/CreateBtn.ts @@ -0,0 +1,31 @@ +interface Options {} + +const CreateButton = (options = {}) => { + // Destructuring + const { + classes = [], + iconName = 'circle', + label = 'No Label', + clickHandler = () => { + console.log('no action'); + }, + } = options; + + const btn = document.createElement('button'); + const icon = document.createElement('i'); + const span = document.createElement('span'); + + btn.classList.add('btn', 'btn-sm', ...classes); + icon.classList.add('fas', `fa-${iconName}`); + span.classList.add('visually-hidden'); + span.textContent = label; + + btn.addEventListener('click', clickHandler); + // btn.append(icon,span) + btn.appendChild(icon); + btn.appendChild(span); + + return btn; +}; + +export default CreateButton; diff --git a/04_typescript/uebungen/o01_create-btn/src/main.ts b/04_typescript/uebungen/o01_create-btn/src/main.ts new file mode 100644 index 0000000..88caf2a --- /dev/null +++ b/04_typescript/uebungen/o01_create-btn/src/main.ts @@ -0,0 +1,19 @@ +import CreateBtn from './CreateBtn.ts'; + +(() => { + // === DOM & VARS ======= + const DOM = { + output: document.querySelector('.output') as HTMLDivElement, + }; + + // === INIT ============= + const init = () => {}; + + // === EVENTHANDLER ===== + + // === XHR/FETCH ======== + + // === FUNCTIONS ======== + + init(); +})(); diff --git a/04_typescript/uebungen/uebungen-04-10-o1.zip b/04_typescript/uebungen/uebungen-04-10-o1.zip new file mode 100644 index 0000000000000000000000000000000000000000..3ed895173039e1e6bb81cf5d23741cb2426d6500 GIT binary patch literal 19601 zcmc(`WmJ{H`aVo|cXu}k(nv^4OLup7DvflC64D|DA_~$-cS%bs2uPzy$A3Sb!;!s3 z{H^!Pi)-BOweXsmyXT&3R25<2@SuPndUss?U;p^;Uzku-P+Yvm-nJe#&Ym9ZrcS<` zo<68h&~QJYp`d>KAI-byP>2kUg*L!oePm;&`U?yR3JEI1%@PcZ_)jofCksm-4jT_g zhpS+DRZwk#v7ByWm#v}XoW+GzzpQ;H5TiALm7i#*}qikl7nGJLvUyOC3j_^fCrGses>nE%9pCDP6vT6M%`+C#1b zq3!-Fr6{JNql&;@C%hHU6s6E25+qDR(%Zp~x{0_4;>xQZKZ_H*t*(MI!{HH&8S`O# z{e8fihkB>V_q2BHkho#C*%=KzSt=sWl1rpH1zBE^%jHXO$CG_Yc3MKe$A&&4I~1$; zHB0Q0IA-k}$(K2Y@`|Y!WAm%+cS{}V6}V>Jubn6c6_860-E4QKb&mSsQ9zZ;shK)t z{u29ZoyWUipG zyq{Eb3FESL=)kZ}TK#DZrO=f1)#QVVxEGV4$Q|Pe*Wenl2@53goYZ2vjtLa z&-Josq@D8OcO!KKeVI0mrg3R7GJNgDsXoz?IklWWSWJXcZ;?Xw=sfvcRS^-1YUB2e zYLLa;goT3oZ66g*CkB^|jr33Za4|KvH?_9puyc2Iy2?UiK?WxW8o;M?f+%J)6;{Ol z8A`Lmtvgv69&T=4yzPT-GA!W{uv1UJ-P=cDP@WdW+@5_!Y(5365Q(P6uq z3-#9eCM-r8U#%E{rW!p9v~aP^`3+gskehOXP<fM^tQ=}gOx-HV>>OV5Z1Q)@ zGzU9-S((`1sLS=f7=cScsq{h_H9$d;E}<`y_C+zVg=dGSwJ+7P=P1n@!O6YjYO9Q_ z%9$)rvKoPau$nPu&?PSX-Cg~s+xKBUDwN<5kSq|9-jR8IGzUq;7c_p$#uH*Ic)(Wp zj6Hl^EJ4xA$=Soy!`9i!{Yv39fHnaP@Tips5w$4(f_Q!C5(9-TU;qMo^{~%r`X*M# zmTz>4GIDO(IsyWWRIQCFqYY;XwlMU^e8f@#oX15>!DJg=r)+{t#D3o$jbBRH-70iU z$(O*?`(ZBdBZo4wFlNgs=y2z(WrJ09L!zc#^IIou>RHORg%s3Bq_)^S zVao3}UiM{n+#6El_1oZyNu4U~N_SLzlC=_4)&0bp)2&4GYter3gO@`$7n0z}GJL<- z+7Ghc7P8$_L-o<_$Nfy4G;pgta#kUfj0gGwevNbzW(2lVP_90kezj;K-X{#DO}YAr zk7bR%I40lmgjOowzF0Kj;WJB(r#kBwDklA0N!wGFlRnp;HXb+Qu|V-*fS^!j;L~2e zcY>k{m49M$i^?al-OR_OLJ*6&Z9* zd!ph+hfRgAyx1WtqEcG%rHwSt`6AW1*{B~YEaKiENAgrEt@!z6>Cuf=5sc%upCUws zgZx;#b)OZfmRd($db)jE1mWlMmhi}nv2w@#ko6{Mzr20c>{CTsT%A0jb`$?`&WjVw za?EhPWO5rZ2i2BWCbM!Y>P+2QU-CcpiWX`tzM)Lb>3D#P=HZYIqn&@d^e4mmidYJl zo%g-u(#RTAKZj?d_}@3xL`d6xJ_S~)kIN>iB&BPHSoce+)Za4iblTS`eZ+Q}@Zsj? z+$zox)H%aB-svyjPc@l1KBAy|pJ9(UrxP*<49xwAnZr~~UvIb@K=|V`hIc17p3hQ~ zC%MAeqTpCNYrjAiP1~)OI9EJ30&O>ZjF^P`FseQz472TG$5cyI2?ViC?wbP*!C(A6 zGF?~-vWDmh@F<+CeAH>C`DwCd)Wb;;gvQlt&9HaOCKpa6HM7FA$tscKPDk`dP!?ut zt(#t#e+s;LuFfnyn=vHZg1K;Xz>_T`9pqCU9pKY(P#txydh#pYe(kDFdgY=V2xTa$>{XbnH`#4t)=DrdZ`gkfM>O@}dT?MYtP>d|vJh+qzs4Lb$C5iGLgdO(gd zT5)UpB@A{pD@;m77Y1Y>G?lI%30 zOi3B;#E0bx-GjkIsXJw6vNus*6*QRy#B3K;3TiNmGgFi8$(5-p%MlyG>AO7%4SU%B zOan_IHkD?*8)hs=vjgw!(^3rcLZ#3L{fWGuB;EPNTHbbd_jk;e*7n{^j{5YEZ}~`Z zuV!q~5qh8Gzz_9OS5@NlKj*mZ7foT5c2hEx0nT|p1&Lx&M0r;FUCV9#MeIAsr<`a$ zNj)D+Ii{wD#9~D7X>F<Hc?N9x0c5h#k5&PQbsq$qfmb;WS!ID6eR_3nB=OIMD!%g zfT7UUYIjv_v_5=`*) zu{F-yo*VberKwwBZ+XeVtZE4)@D7O0Hi+KKmT;}Iy&d_(p~z)MUzT`e42wjpPAmCS zb!*!59T5(z+*lg=-Rjrj?T7q_4#J$`WWL*3 zqSw9Nbdi7e&3A?wW-6sTB9Np?3!P+uno}UQT+RtMOv?)SRZE+Q{R6*yYIqgAhuP`R zM!UZvlyC)V-yKV4WIUoY`a1XZHEM|ne#QQAT%87kwITw>Pmv$*hF0`%e_CF!FZP4k zTJ>cR8D5SN-uqB(W6_C5$1!O5P+ExS0cT}zdRkg0dynMf-A>dJEmiwH{sEYwx^Rr6 zzQY#|{uX{w%&u@d`*q&Wah=>04Nv%=12 zsIo+(Zk`4smv&ZhFpFENxjTl+0=cQ<)@KHHfzK2f!gkha2_#jql->zA}Z ze$+SfhzChKkA`lRK+K^jGtbF4sSc~w!e2;4;^#x}9j5-a7Hh=d5&gZA&(hob!C5?g zJ-YAC1rj}R{qKmp^zQPn@>)-F?9FY&eU%B-7-f4(t#^u3MXcXs8rBCv}ZN|Orwezt=p{)*g>&>t(%*#z;J*#Bi=xEi5msjL(-eFA8>0q4- zPjV;I51>6DGPY8PT@{KpBs+<1VDuyjU>liqFY*p)oEvN%I=T&=_oWq|?-2sw%e0iN zOwv{Q_`Wsi@i<(uT{}GQSdo%#IF639y62+ghq!8)xsP($9Lm1Tt51C9$KTN&;R%o@ zi7ioO(GEA_wY53kc859eiE_)w=cqP<6R|$iW}l59X%+CsLCbQ_bdf`;&h&Oi?ZCuE z^^VJ9GIiy8ql~gmmsINvJu%PtJ>wR!zwSinxsWGbANWG zcDsaVL8kYEe|zmrTTSju>>96Gp=}B1?@HfAnrNB3DjjQ{vfhP>H~RXx5KjO#P1usI zF5}z#T%x2f%nCTSzBqsG5B7KUcy`S*BQo#5EG5Kl7p@<-DMVm#K;thm#friz%PwQb zkxqOLI*|KkklWmlehCyjZGMl-m6z|_M)O`fU$)~5X*z+9TxclU_9E`pl0mQ2d%+2q z0-2Ywek({|%+MD?1AT#l%wxYA7gy)8ztub!xeUDKG4TLzztQ|%8vyV%Wsj%xrLrf1 zTcw2yD}4VXdg`M>RH`zQ105`yT$Iduyt`VdXTZ>*Iv(|za6Bvy?%JXMoIeMO0JE}- zwq%^BFB~}*#beG78^o_dIB>0WcUs65eJB_sY5kOJZu!4xrARf!i5~Yt_kI>(AlHNt z8o~$Nf?}xl%-H0!?gzI>@kX%}5#b*5@*j14bkC$aDD4eg7S}41MVN^ZnVNC-be|g+ zkLw?9;--$6BKzX*Fa#}HgfoOQF4THj1;JX41=G`1>}*qPF%jNa+OD{FprRuf8-QPY z>RIO+ldn3{9D_|yIY+?zUFdy$^L<0)j+W12)s4`A-U?>-gSJ4L@&(gdAcS~-bvOBq zJ)J=12RqO*xVr9m4U#1=!0V0|5Ov3|?j|_c_0F#Wsx^QCm_V9FlhYIzTKzt&KsM=% zDb<%u>$xqTU}_y;ACh^cvNLGW3`N`)?rgB^2$XR?d^4o{R^a`Hna0TQ!Z2-GqwmR) z?asm!?g-h*2@7S=Jo+nCOSQh&P~S=7$YGFS%Y&caUKHr!&g*4ac5VQ^b0ELL$MHQ5P={6*_UM z`|;>!`lm_Q4UdR2vkQLmd3?@yacd^L=T*Q%r^e8bFe$O1dyMdvTJC$nyOwA{6-g_F zFeW*#H3^Bp19rEkW2+C|SI3&3dt>y+7~~+(jdzqJVZ?FnV*)m-RCZ7W1*(_3!J4EU z5CQsEtN}N(e+6c1P+-0o;7!u3JHMNxsgf6Y!c4Z1`W_25sda+F7=xeMknlv$Oe z0Zm$M8CfD@y%DM8XIp)nu6Uv*BJFG6T?L!+nb7eqV9}gCqS*x{O&rqt(5Q!fIq+>G zrQ|8H3Ml*us+(zKC)72<_f$6qvB|=_Cu^pT1_?BElNHm7Il|jFjKdQY9^7y$L(f&r z@0*vU^<~TvNA1_-g+ZO(s9>by%-Zc&U@cJpRNh7R;^9gtijsJ8cSfOsjH;G~-W^eI zmb77Bg*F#?41)39q)OW2AFvn(g4LD`G6N+qawp9a-P96H-cS;jNZ9k#C3wifZ#|n) zMSO+UDd-h6afYt@Q?H-D>V!H}EbzI&(_3W91@zT{Joo&4j70lVIA%9E&z4G2iBjqY z9r17QK@=|z#*Hv|RyIj{p~*;N5w;J@8r2U}Bj%PSkh=q`mezyJ^U zO%N9GE8v5JT_5oMKn4Mf{{;LVP{7BkTV|~kku{@4GJ#7TqQT59#IrH|B@8p|EhTUFj}9*cmaFHcM_SnRYHn>0-VDZ1MdwbYqs;os@_wQgCxyETPBuP! zN1iRN<3!_V2d+I{v~(_rklfMK6Fs4W;B%%oLw;)9=K-Fohj|??;^lIWpF}f2ZP{RI zeo!i9S-NRtZ>Xo>J(TYqD2J@8p}&@IE8xbpG5%s#vF78L^q6IAap*g*)b99@`(oNj z2^8kxos5;P`8ZOKS#jI4o_U7=;hr5|XWB%^+E0PZarEtL-Jywv^*mQzcKWi?$d9N- zr3j>7kzn6-EGqOdFUy;mnGiL~lNvZSyCw-vFD{>Z-eq|RwZQ{(plm`eWBL>0cu(&( z!c;IH_NJu8E(LNc;sIZ%+4j^?;nmqpstseI z2{VfY%Q5w;4TMI^DpjJaZ_{=42#*xK=%$>U;bdR4f$d=j$)ZP14 zg!jh|^Zo#tX&+dO@4YI|A&r7#%q)M^|fAAiv|BzSCuo^geSLrE^i;Laft(4DncUM!B zwo7Gtd5v%5uvWmS_w}7v-49gNo>~nFMIf~u}@lR&b=#0KA7nJit*zKCgnUf^KDuIzhb;NYWV7(F&@&J zf5mukG5syZUwAZljIV(3=wC7ZPrz$py!E9R9}c>q25PuvZL9_X=yFSaZ-pUf3IA`F ztYc@;ZBOlAmD9=HMKPbaM@g^SXFU{yuJ&bN!GF;XJ|T>tq4YC`a0xctpv_@%;kN3n z+#fRIgT#oEp_6A#5#M99G^e)3_=QuT{UA9>|ySdrCJ<@u)u@D8LXDHuE@Wm(hTD_K26MT$k4`RF}+$jwjE74SR>xAhd zOhX=EJ|JYE{eaT($;Fe)@Tva0{f!@9+pk?p`&qq>a&_$Pm8dlh& zoYa)JNy1!@pcE-3WjT&G`A%EWu1$=H7x&C(6R$`3<57y5Mr8|GL%8S3GdpBD!IfIy7BNf7_7 zdFy5cRmBOs!k2;_xJIjAsmrH@eXLY?IBoreWZo|PsCzQ~VouJ$Ymd!YZ!X3+<%hLk z$}yq)?B4mW-U1b}>4?VB)ww(T0J%5*UEDzqcQ_W>vHvyfj+Azomoj$~ux3$_?d`euw z>vAS8>j?s#t;`G73tc&cH_T!P4rdo=KcDpdJWcP&nRCirY9AQ*z6;}QqstUy7le>F zZsQ=-`9|WV>L|nQMajT>b=ih2gTsnE=md5f+tv24tk3k!=;VXE9c*qmB=`d@L*kF?xoM~hgoku7I zADS1QwnVa2#k-42#+A(up{(AIksR$ctov9~o+>IGGy6(PrZb~PCf%_oDfF9|p#^2R zqNAaOVVh4~CyDIi05z;ZLYD9CATG(_gcKQ^IGSeO9lW0WARM@%O*JOaY0Ko%vfmxD z-Z8}YKgugIL*KR!`J{fR;k#?Jjgr=z#)>xRXhpc1=$1h@h7j>ta4p3C&cq#_;efew z${cuWlqn_JM4>W_0-KqX4WsT(6aO*>6j_Vipn(I}@MN~LOzzM%FrXT7!b6n_Skf$gVV$)uRu_pB+`c3m^Ez);sz>leR+ZA$co^6lSK5xgZ zA$@-v=k{B3l|HT~B5 z5+8@&H(vb}9`;`GyZ0*^Z+1h=v6WV%-%uC^jNa;&H>0s0HvQK1&TVq<=UNSUr~&03 z*Z6{4cW-24yD?yw4hH%*JRmoffxB#%0}y%oSH1wV%YUV5FHoAk7~pA|%<*Ga*W?h9 z)MpYk6m&$p;oU}mcwENKCy}*;4@0<}+K}oj>jbCYq0b{yLmxV6aBe@#o>_0Od(NN% z&s6`UdB8#dC0oc5Kj3+XvqVD_9f2KkVaC+A7O3NAab_!)_2}Bry1EV0iQYoTHfhi- z256x-L0K9}=T=#NG)*T7Bi_M7E8$OfuJK#-J7rMq4wg@EwY0%(l2^JIeL!I?!K#8OAx%bi$;Tcj`v>47l8?>!PFJC)s$WDb6x@o|bz48dX$x@8v zNRL%*)w0Dku$LF}dPeLSKto6I!vAWT1MBqXjmVmgwpk$(T_Ou#3 ziThS;x}VqB>kuRhkw=b$4hebz0emaZ4wtfUTlCEd-pne8ATj&LNHt*Ekf%a64 zS$Bpu7ee*T(j{f_BfZY+{Mn?uF0VSP<;kjoOo2iZtD4trjkK~YJRG;;PC96Q`1lu| zbE|c3@l+-3Tc7{RIy{I|sW2e#-uRz)gRB@z)eR5K(10Y&&1G!r?hf2Z{*6RLTwi2^ z0kSUeBn*iKk%YluuS&ufsQ*7EVLx|pzXP@awrley72$jMru!XH?V~Md_>d&T^S5pu8 zs=(`KZ!W3)%s#o!aq^Ak45i8!*`49Sk@%G6>Ql*Sn`lc0m>7l_vMsb4lBE6UncUV% znwZoTi*y6|uqO(k$vh!Atnb!%iEkpj>uSB(H|56fdN(6NmN?Z9H9W~jcTueyM{mXJ z1>?{=%W8RXy{6Ciw6jO!%4;W;=lUYgBcEqwAbwk-z0VI=*~iQ)a>54Hyj7-MYTlE-glnV-pD;xEDTg9z@aGNp7X2ITQ$Y z$alU-RehiXlEa%kkj z^^ zjC?k?yO`C#*lF2ON4_=aNw@yGfka1ykP?rt>%|8?TIQ`mUxr(IV(Sh)8!}u7TTxWs za;a!G;)&P~3%{FAo&~(!LbTW}SpW$LUIMTZE{}lM@hy8unMfO>T5f1$&s zfp6kp%8_cdey)L-goD&VHkZq?C-N7{jV54Oi5 zd;0BW!b;Tq+}P>(=yTZ6oz1n4WRb?$A)=RPBtDgvzYc~AY8a!ne-u-Yc?2k?z(w@8 zVhYG0e-=~q5IGL$Vg8ACO~Yde1bb0Th2IqhH9W9pf3jj2*}%rdHb5hC4Av+{=1Zk; zNF(Zr=sGZ~QG6TQ5H?ONbUX6ASMaVCV$Pezk8A9D=9<}bWOrwf>Wpt|7rerQRj(Qz zGwW6^aIDCB%D>>_Z_6ud=d*)$WP$RHNr@UKKA`MqacCZEQ!QuDF7NYELhIuEm>mL+wtK= zQ@e2H$`EHaf7&_VRDFf6n)fYA((|mQU2n!zU_M!289sMRAyaAo2z#jDTa_F+ABL2D zv09ZQN=yXXvsd^F^s*1}6-em0yuXhxR+>81uyL^aVuzR+7q4X>7xeK7G@l~spc6J! zt*#oh>$+IJRN8aZ5p+h~BGs09$kXdX%;Re}fIII8dwfdKIa!&AE@A<7L*rY2E;Wu& zGHR^gq=9w9{bt7rJjTUf>K0hpcwVkei?atQ4#Z0`CI;9sszWb>`wWHg~f$ z^{`|&^KiPdTi^58#_nSLJ~o&*gM$H<4gq$3{Spp>y%>(k15P7cSnXSZ(M{Gk8fgmn z(b~`CqEPvLpk9mCy1KR}Sto1yRL&lm^*ZU4BXaDW9Pav_yshM;mSHA_Z6-7=1|(> zOG;D0Nyc4VT^VL(OSayCXIc_;axx+IPUR*80qLXnGQxCr6=u0+UJ;gEouc^;H(a0D z;?0v}?Yu;qXn59go4bI*mg)=iTIt&t+b{!0-#m|T(pi~vY|!~0*hVCd4m`fW=4cx3 zYD>|l=@t}veExRuh@r-nB_%fH8P3{Vh3Vbnl{J`_k0R5LU;`BW=+d*2=4pF%1b2~X zahiY7sYglJhX|t9)o*H&iLzprgvU>r`0Z4bDV0-`Ylp&^B;O3Zd6T|-=#L_*jL-|0hYYite4DRj#A~eJvU+oUJlQf&3F0WkCmSG=Zh+f5tdU}rRZoq<4YddDSmy(tTA>{$ z--Zu$i0YTno|+`X>IOdl#aUr*!$YbDWfF3blztz}A)SlhPYD4h9gnLi5P*Mu`LCb- z#zcXTI?#}Zkow=!(;`U97vnb|i zd>Y0pp@xWKMQoi#3l>SP)KBDkNK5b!ve!gAQa!U@Bf7mi=YEXkhzTn^ApGNw?t67= zAB9CGuZa)RT_krp$b~VymOgQ@^&pf7M?%lnh$BJY%lQBkKgBz2e2Spe`Lu|J;@o6&S8qm?=0hTId%#o`QjXZjnk5pO>YTVo~KB|jyX`-D`v~Y zL0sPNp2QPXZ*O7$VV)86lyMvHsgrm$VZ1*hmjG9StpCHlTrJ(bPd=Y&8h+Jf%n^-3 z9UxPY{GX`+;`(U|9y$T$^%dfh`W2QXJ^uDa$SA?a?m1`_g9hmS8(?08_$_XaMrb4s z??;ojCwhsm!#&O1AHcu&l(8}toNuI=>l&1L96V5&gS0NnUvWg7Zu%5A#~`&lzd}i8 zwdU#A%8!yS18n5XEIn=p`5q>e3CS{yG)|i8b5pkE&b~@G-IT8p!v5g-L5j`Im&h*QTwFcINfOTywSi+|D78nWG>xuNM2G)= zzAxNusy^C5OJ9b&x+=s1@2T^j=M7~a-z(DGLj)Rf<+EGWW*}7#g2hHirvgZ25bFHx zRA!z|77oCByQ{hqKosZ&4d8QlaPV$fg~qcbb=ARfZ6*$du>qyt-eFc|1QZ*pMLfLZ zA3vfM@eED^@g4GLP*4tw=;4d#wNRK3yNaqyeChqdi%O)^no0yqy66w3Nfi9B;1x1V zepZahAy_V1K7>+|tb}I4OdcA9dt=Wh!5aqm%UP;Y?TP~ z8~^#)kN`ga^@tT73L1F8dI1W!0q}hF^20@9sNbN4!AgIEUQa2x=4%reXae93IFF%7v5>(WO~7B=|tg<*Rn`Hw{C| z33z*R`3VQ*CG^7Jm}}6lQ8Vxo=kgXHS+sCGIt5;t9I4zkmmp4cP_xU9Lnb^!hIoeFpnki&jy?O-eC{8zOBIT3J0 zbNOZh+#Ve{Ah+=^dju|PE;e$NVsXIyKamp>|8MpPsa)Wm<8qT3+#ctz#J$EIfm@Hu z%Z5BsgD0Ut9w^8I_EjbWoT4v40fPiO)|b1R;A`&w6ZCqU0eaV$;ei(E<<=m05~||; zW6l54CD16nm;lfvq)-UJboq(zj|u+PZv;i%%d!Em|Lingj$0fz|G@s6p#VL{>lS@k z=o=FE{sjKrD*3vz`Cz7M4 { + // src/03_object-types.ts + { + const calculateArea = (rect) => { + console.log("The area of the rectangle is " + rect.width * rect.height); + }; + calculateArea({ width: 5, height: 10 }); + const calculateArea2 = ({ width, height } = { width: 10, height: 10 }) => { + console.log("The area of the rectangle is " + width * height); + }; + calculateArea2({ width: 5, height: 10 }); + const printPersonInfo = (person) => { + console.log("Name: " + person.name); + if (person.age !== void 0) { + console.log("Age: " + person.age.toString()); + } else { + console.log("Age is not provided"); + } + }; + printPersonInfo({ name: "John" }); + printPersonInfo({ name: "Jane", age: 25 }); + } })(); diff --git a/04_typescript/unterricht/tag32/01_ts-types/assets/js/04_union-types.js b/04_typescript/unterricht/tag32/01_ts-types/assets/js/04_union-types.js new file mode 100644 index 0000000..394f6c4 --- /dev/null +++ b/04_typescript/unterricht/tag32/01_ts-types/assets/js/04_union-types.js @@ -0,0 +1,24 @@ +(() => { + // src/04_union-types.ts + { + const printStatus = (status) => { + console.log("Status: ", status); + }; + printStatus(true); + printStatus("loading..."); + const greetPeople = (names) => { + if (Array.isArray(names)) { + console.log("Hello, " + names.join(" and ")); + } else { + console.log("Hello, " + names); + } + }; + greetPeople("John"); + greetPeople(["Ersin", "Kahleel", "Andreas", "Adel"]); + const greetNames = (...names) => { + console.log(`Hello, ${names.join(" and ")}`); + }; + greetNames("John"); + greetNames("Ersin", "Kahleel", "Andreas", "Adel"); + } +})(); diff --git a/04_typescript/unterricht/tag32/01_ts-types/assets/js/05_type-statement.js b/04_typescript/unterricht/tag32/01_ts-types/assets/js/05_type-statement.js new file mode 100644 index 0000000..594d92b --- /dev/null +++ b/04_typescript/unterricht/tag32/01_ts-types/assets/js/05_type-statement.js @@ -0,0 +1,31 @@ +(() => { + // src/05_type-statement.ts + { + const printCarDetails = (car) => { + console.log(`Car Make: ${car.make}`); + console.log(`Car Model: ${car.model}`); + console.log(`Car Year: ${car.year}`); + }; + const myCar = { make: "Toyota", model: "Corolla", year: 2021 }; + printCarDetails(myCar); + const displayStatus = (status) => { + if (status === "success") { + console.log("Operation was successful!"); + } else if (status === "error") { + console.log("There was an error."); + } else { + console.log("Loading..."); + } + }; + displayStatus("success"); + displayStatus("error"); + displayStatus("loading"); + const capitalize = (input) => { + return input.charAt(0).toUpperCase() + input.slice(1); + }; + const applyTransform = (input, transform) => { + return transform(input); + }; + console.log(applyTransform("hello", capitalize)); + } +})(); diff --git a/04_typescript/unterricht/tag32/01_ts-types/assets/js/06_type-as-statement.js b/04_typescript/unterricht/tag32/01_ts-types/assets/js/06_type-as-statement.js new file mode 100644 index 0000000..5874ace --- /dev/null +++ b/04_typescript/unterricht/tag32/01_ts-types/assets/js/06_type-as-statement.js @@ -0,0 +1,12 @@ +(() => { + // src/06_type-as-statement.ts + { + const h1El = document.querySelector("h1"); + const headlineElement = document.querySelector("h1"); + console.log(h1El); + headlineElement.style.color = "tomato"; + const pEl = document.querySelector("p"); + const paragraphEl = document.querySelector("p"); + console.log(pEl?.offsetHeight, paragraphEl.offsetHeight); + } +})(); diff --git a/04_typescript/unterricht/tag32/01_ts-types/index.html b/04_typescript/unterricht/tag32/01_ts-types/index.html index 3fe3001..2e3ef61 100644 --- a/04_typescript/unterricht/tag32/01_ts-types/index.html +++ b/04_typescript/unterricht/tag32/01_ts-types/index.html @@ -6,7 +6,11 @@ TypeScript - Types - + + + + +
diff --git a/04_typescript/unterricht/tag32/01_ts-types/src/03_object-types.ts b/04_typescript/unterricht/tag32/01_ts-types/src/03_object-types.ts index e69de29..f624cad 100644 --- a/04_typescript/unterricht/tag32/01_ts-types/src/03_object-types.ts +++ b/04_typescript/unterricht/tag32/01_ts-types/src/03_object-types.ts @@ -0,0 +1,59 @@ +// Object Types - bei einem Object Type kann man die Eigenschaften entweder mit einem Komma (,) oder einem Semikolon (;) trennen. Beide sind zulässig +{ + // The parameter's type annotation is an object type + // function calculateArea3(rect: { width: number; height: number }) { + // console.log('The area of the rectangle is ' + rect.width * rect.height); + // } + + // calculateArea3({ width: 5, height: 10 }); + + type RectObj = { width: number; height: number }; + + const calculateArea = (rect: RectObj): void => { + console.log('The area of the rectangle is ' + rect.width * rect.height); + }; + + calculateArea({ width: 5, height: 10 }); + + // ---------------------------- + // Destructuring in der Parameterliste + // const calculateArea2 = (DESTRUCTURING: OBJECT_TYPE = DEFAULT_OBJECT) => {} + const calculateArea2 = ({ width, height }: { width: number; height: number } = { width: 10, height: 10 }): void => { + console.log('The area of the rectangle is ' + width * height); + }; + + calculateArea2({ width: 5, height: 10 }); + + // ---------------------- + + // function printPersonInfo(person: { name: string; age?: number }) { + // console.log('Name: ' + person.name); + // if (person.age !== undefined) { + // console.log('Age: ' + person.age); + // } else { + // console.log('Age is not provided'); + // } + // } + + // interface PersonObj2 { + // name: string; + // age?: number; + // } + type PersonObj = { + name: string; + age?: number; + }; + + const printPersonInfo = (person: PersonObj) => { + console.log('Name: ' + person.name); + if (person.age !== undefined) { + console.log('Age: ' + person.age.toString()); + } else { + console.log('Age is not provided'); + } + }; + + // Both are OK + printPersonInfo({ name: 'John' }); + printPersonInfo({ name: 'Jane', age: 25 }); +} diff --git a/04_typescript/unterricht/tag32/01_ts-types/src/04_union-types.ts b/04_typescript/unterricht/tag32/01_ts-types/src/04_union-types.ts new file mode 100644 index 0000000..7074dd5 --- /dev/null +++ b/04_typescript/unterricht/tag32/01_ts-types/src/04_union-types.ts @@ -0,0 +1,56 @@ +// Union Type - Menge von möglichen Datentyp-Werten erlauben +{ + // function printStatus(status: boolean | string) { + // console.log('Status: ' + status); + // } + + type Status = boolean | string; + + const printStatus = (status: Status): void => { + console.log('Status: ', status); + }; + + // OK + printStatus(true); + + // OK + printStatus('loading...'); + + // Error + // printStatus({ status: 'success' }); + // Argument of type '{ status: string; }' is not assignable to parameter of type 'boolean | string'. + + // ---------------- + + // function greetPeople(names: string | string[]) { + // if (Array.isArray(names)) { + // // TypeScript knows 'names' is a 'string[]' here + // console.log('Hello, ' + names.join(' and ')); + // } else { + // // Here, 'names' is a single 'string' + // console.log('Hello, ' + names); + // } + // } + + const greetPeople = (names: string | string[]): void => { + if (Array.isArray(names)) { + // TypeScript knows 'names' is a 'string[]' here + console.log('Hello, ' + names.join(' and ')); + } else { + // Here, 'names' is a single 'string' + console.log('Hello, ' + names); + } + }; + + greetPeople('John'); + greetPeople(['Ersin', 'Kahleel', 'Andreas', 'Adel']); + + const greetNames = (...names: string[]): void => { + console.log(`Hello, ${names.join(' and ')}`); + }; + + greetNames('John'); + greetNames('Ersin', 'Kahleel', 'Andreas', 'Adel'); + + // example CreateBtn() +} diff --git a/04_typescript/unterricht/tag32/01_ts-types/src/05_type-statement.ts b/04_typescript/unterricht/tag32/01_ts-types/src/05_type-statement.ts new file mode 100644 index 0000000..a7df4f5 --- /dev/null +++ b/04_typescript/unterricht/tag32/01_ts-types/src/05_type-statement.ts @@ -0,0 +1,62 @@ +// type statement - eigene Datentyp-Annotationen definieren +{ + // interface für wachsende und komplexe Datenstrukturen. Meistens (global) ausgelagert. + + // interface Car { + // make: string; + // model: string; + // year: number; + // }; + + // type aliases innerhalb von Dokumenten für einfache, feststehende types und unions + + type Car = { + make: string; + model: string; + year: number; + }; + + const printCarDetails = (car: Car): void => { + console.log(`Car Make: ${car.make}`); + console.log(`Car Model: ${car.model}`); + console.log(`Car Year: ${car.year}`); + }; + + const myCar = { make: 'Toyota', model: 'Corolla', year: 2021 }; + printCarDetails(myCar); + + // ---------------- + + type Status = 'success' | 'error' | 'loading'; + + const displayStatus = (status: Status): void => { + if (status === 'success') { + console.log('Operation was successful!'); + } else if (status === 'error') { + console.log('There was an error.'); + } else { + console.log('Loading...'); + } + }; + + displayStatus('success'); // OK + displayStatus('error'); // OK + displayStatus('loading'); // OK + + // displayStatus('Loading'); // Error: Argument of type '"Loading"' is not assignable to parameter of type 'Status'. + // displayStatus('complete'); // Error: Argument of type '"complete"' is not assignable to parameter of type 'Status'. + + // ----------------------- + // type für Funktionsausdruck + type StringTransform = (input: string) => string; + + const capitalize = (input: string): string => { + return input.charAt(0).toUpperCase() + input.slice(1); + }; + + const applyTransform = (input: string, transform: StringTransform): string => { + return transform(input); + }; + + console.log(applyTransform('hello', capitalize)); // => "Hello" +} diff --git a/04_typescript/unterricht/tag32/01_ts-types/src/06_type-as-statement.ts b/04_typescript/unterricht/tag32/01_ts-types/src/06_type-as-statement.ts new file mode 100644 index 0000000..db3cdda --- /dev/null +++ b/04_typescript/unterricht/tag32/01_ts-types/src/06_type-as-statement.ts @@ -0,0 +1,19 @@ +// Type Assertions verwenden - mit "as" statement festen Datentyp zuweisen +{ + const h1El: HTMLHeadingElement | null = document.querySelector('h1'); + + // selber festgelegt + const headlineElement = document.querySelector('h1') as HTMLHeadingElement; + + console.log(h1El); + + // h1El?.style?.color = 'tomato'; + headlineElement.style.color = 'tomato'; + + const pEl: HTMLParagraphElement | null = document.querySelector('p'); + + // selber festgelegt + const paragraphEl = document.querySelector('p'); + + console.log(pEl?.offsetHeight, paragraphEl.offsetHeight); +}