From e797e9e8dd91725ffd79a7c2713b2d350bda17a9 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Thu, 15 Oct 2026 14:37:59 +0200 Subject: [PATCH] --- .../uebungen/u04_without-any/index.html | 23 +++++ .../uebungen/u04_without-any/package.json | 16 +++ .../uebungen/u04_without-any/src/main.ts | 6 ++ .../uebungen/u05_type-annotations/index.html | 47 +++++++++ .../u05_type-annotations/package.json | 16 +++ .../uebungen/u05_type-annotations/src/main.ts | 7 ++ .../u06_optional-properties/index.html | 58 +++++++++++ .../u06_optional-properties/package.json | 13 +++ .../u06_optional-properties/src/main.ts | 7 ++ .../uebungen/u07_union-types/index.html | 24 +++++ .../uebungen/u07_union-types/package.json | 13 +++ .../uebungen/u07_union-types/src/main.ts | 17 ++++ .../uebungen/u08_type-aliase/index.html | 24 +++++ .../uebungen/u08_type-aliase/package.json | 13 +++ .../uebungen/u08_type-aliase/src/main.ts | 26 +++++ .../uebungen/u09_interfaces/index.html | 25 +++++ .../uebungen/u09_interfaces/package.json | 13 +++ .../uebungen/u09_interfaces/src/main.ts | 27 ++++++ .../uebungen/u10_assertions/index.html | 48 +++++++++ .../uebungen/u10_assertions/package.json | 13 +++ .../uebungen/u10_assertions/src/main.ts | 34 +++++++ 05_typescript/uebungen/uebungen-04-10-ts.zip | Bin 0 -> 17409 bytes .../assets/js/05_type-statement.js | 32 ++++++ .../assets/js/06_interface-extends.js | 39 ++++++++ .../assets/js/07_type-as-statement.js | 12 +++ .../unterricht/tag29/01_ts-types/index.html | 9 +- .../01_ts-types/src/05_type-statement.ts | 69 +++++++++++++ .../01_ts-types/src/06_interface-extends.ts | 91 ++++++++++++++++++ .../01_ts-types/src/07_type-as-statement.ts | 18 ++++ 29 files changed, 737 insertions(+), 3 deletions(-) create mode 100644 05_typescript/uebungen/u04_without-any/index.html create mode 100644 05_typescript/uebungen/u04_without-any/package.json create mode 100644 05_typescript/uebungen/u04_without-any/src/main.ts create mode 100644 05_typescript/uebungen/u05_type-annotations/index.html create mode 100644 05_typescript/uebungen/u05_type-annotations/package.json create mode 100644 05_typescript/uebungen/u05_type-annotations/src/main.ts create mode 100644 05_typescript/uebungen/u06_optional-properties/index.html create mode 100644 05_typescript/uebungen/u06_optional-properties/package.json create mode 100644 05_typescript/uebungen/u06_optional-properties/src/main.ts create mode 100644 05_typescript/uebungen/u07_union-types/index.html create mode 100644 05_typescript/uebungen/u07_union-types/package.json create mode 100644 05_typescript/uebungen/u07_union-types/src/main.ts create mode 100644 05_typescript/uebungen/u08_type-aliase/index.html create mode 100644 05_typescript/uebungen/u08_type-aliase/package.json create mode 100644 05_typescript/uebungen/u08_type-aliase/src/main.ts create mode 100644 05_typescript/uebungen/u09_interfaces/index.html create mode 100644 05_typescript/uebungen/u09_interfaces/package.json create mode 100644 05_typescript/uebungen/u09_interfaces/src/main.ts create mode 100644 05_typescript/uebungen/u10_assertions/index.html create mode 100644 05_typescript/uebungen/u10_assertions/package.json create mode 100644 05_typescript/uebungen/u10_assertions/src/main.ts create mode 100644 05_typescript/uebungen/uebungen-04-10-ts.zip create mode 100644 05_typescript/unterricht/tag29/01_ts-types/assets/js/06_interface-extends.js create mode 100644 05_typescript/unterricht/tag29/01_ts-types/assets/js/07_type-as-statement.js create mode 100644 05_typescript/unterricht/tag29/01_ts-types/src/06_interface-extends.ts create mode 100644 05_typescript/unterricht/tag29/01_ts-types/src/07_type-as-statement.ts diff --git a/05_typescript/uebungen/u04_without-any/index.html b/05_typescript/uebungen/u04_without-any/index.html new file mode 100644 index 0000000..4472844 --- /dev/null +++ b/05_typescript/uebungen/u04_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/05_typescript/uebungen/u04_without-any/package.json b/05_typescript/uebungen/u04_without-any/package.json new file mode 100644 index 0000000..d7f0555 --- /dev/null +++ b/05_typescript/uebungen/u04_without-any/package.json @@ -0,0 +1,16 @@ +{ + "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", + "devDependencies": { + "esbuild": "^0.28.2" + } +} diff --git a/05_typescript/uebungen/u04_without-any/src/main.ts b/05_typescript/uebungen/u04_without-any/src/main.ts new file mode 100644 index 0000000..4b8567e --- /dev/null +++ b/05_typescript/uebungen/u04_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/05_typescript/uebungen/u05_type-annotations/index.html b/05_typescript/uebungen/u05_type-annotations/index.html new file mode 100644 index 0000000..b8a134c --- /dev/null +++ b/05_typescript/uebungen/u05_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/05_typescript/uebungen/u05_type-annotations/package.json b/05_typescript/uebungen/u05_type-annotations/package.json new file mode 100644 index 0000000..a49183a --- /dev/null +++ b/05_typescript/uebungen/u05_type-annotations/package.json @@ -0,0 +1,16 @@ +{ + "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", + "devDependencies": { + "esbuild": "^0.28.2" + } +} diff --git a/05_typescript/uebungen/u05_type-annotations/src/main.ts b/05_typescript/uebungen/u05_type-annotations/src/main.ts new file mode 100644 index 0000000..b72b5ed --- /dev/null +++ b/05_typescript/uebungen/u05_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/05_typescript/uebungen/u06_optional-properties/index.html b/05_typescript/uebungen/u06_optional-properties/index.html new file mode 100644 index 0000000..1a4f8bd --- /dev/null +++ b/05_typescript/uebungen/u06_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/05_typescript/uebungen/u06_optional-properties/package.json b/05_typescript/uebungen/u06_optional-properties/package.json new file mode 100644 index 0000000..bf98b04 --- /dev/null +++ b/05_typescript/uebungen/u06_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/05_typescript/uebungen/u06_optional-properties/src/main.ts b/05_typescript/uebungen/u06_optional-properties/src/main.ts new file mode 100644 index 0000000..9a8d28a --- /dev/null +++ b/05_typescript/uebungen/u06_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/05_typescript/uebungen/u07_union-types/index.html b/05_typescript/uebungen/u07_union-types/index.html new file mode 100644 index 0000000..6da4066 --- /dev/null +++ b/05_typescript/uebungen/u07_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/05_typescript/uebungen/u07_union-types/package.json b/05_typescript/uebungen/u07_union-types/package.json new file mode 100644 index 0000000..c19d3e0 --- /dev/null +++ b/05_typescript/uebungen/u07_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/05_typescript/uebungen/u07_union-types/src/main.ts b/05_typescript/uebungen/u07_union-types/src/main.ts new file mode 100644 index 0000000..84c25ef --- /dev/null +++ b/05_typescript/uebungen/u07_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/05_typescript/uebungen/u08_type-aliase/index.html b/05_typescript/uebungen/u08_type-aliase/index.html new file mode 100644 index 0000000..d6ffb95 --- /dev/null +++ b/05_typescript/uebungen/u08_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/05_typescript/uebungen/u08_type-aliase/package.json b/05_typescript/uebungen/u08_type-aliase/package.json new file mode 100644 index 0000000..dc6ed54 --- /dev/null +++ b/05_typescript/uebungen/u08_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/05_typescript/uebungen/u08_type-aliase/src/main.ts b/05_typescript/uebungen/u08_type-aliase/src/main.ts new file mode 100644 index 0000000..fd40786 --- /dev/null +++ b/05_typescript/uebungen/u08_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/05_typescript/uebungen/u09_interfaces/index.html b/05_typescript/uebungen/u09_interfaces/index.html new file mode 100644 index 0000000..4b8003b --- /dev/null +++ b/05_typescript/uebungen/u09_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/05_typescript/uebungen/u09_interfaces/package.json b/05_typescript/uebungen/u09_interfaces/package.json new file mode 100644 index 0000000..edefa08 --- /dev/null +++ b/05_typescript/uebungen/u09_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/05_typescript/uebungen/u09_interfaces/src/main.ts b/05_typescript/uebungen/u09_interfaces/src/main.ts new file mode 100644 index 0000000..9bb1fbf --- /dev/null +++ b/05_typescript/uebungen/u09_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/05_typescript/uebungen/u10_assertions/index.html b/05_typescript/uebungen/u10_assertions/index.html new file mode 100644 index 0000000..435e437 --- /dev/null +++ b/05_typescript/uebungen/u10_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/05_typescript/uebungen/u10_assertions/package.json b/05_typescript/uebungen/u10_assertions/package.json new file mode 100644 index 0000000..d294086 --- /dev/null +++ b/05_typescript/uebungen/u10_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/05_typescript/uebungen/u10_assertions/src/main.ts b/05_typescript/uebungen/u10_assertions/src/main.ts new file mode 100644 index 0000000..3a52c34 --- /dev/null +++ b/05_typescript/uebungen/u10_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/05_typescript/uebungen/uebungen-04-10-ts.zip b/05_typescript/uebungen/uebungen-04-10-ts.zip new file mode 100644 index 0000000000000000000000000000000000000000..a4a7de56f25c9061cef9c54e6b9ae835434edb13 GIT binary patch literal 17409 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 literal 0 HcmV?d00001 diff --git a/05_typescript/unterricht/tag29/01_ts-types/assets/js/05_type-statement.js b/05_typescript/unterricht/tag29/01_ts-types/assets/js/05_type-statement.js index 8afef30..4150a6a 100644 --- a/05_typescript/unterricht/tag29/01_ts-types/assets/js/05_type-statement.js +++ b/05_typescript/unterricht/tag29/01_ts-types/assets/js/05_type-statement.js @@ -1,2 +1,34 @@ (() => { + // src/05_type-statement.ts + { + let capitalize = function(input) { + return input.charAt(0).toUpperCase() + input.slice(1); + }, applyTransform = function(input, transform) { + return transform(input); + }; + 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"); + console.log(applyTransform("hello", capitalize)); + const greetName = (name) => { + return `Hello, ${name}`; + }; + console.log(greetName("Philippe")); + } })(); diff --git a/05_typescript/unterricht/tag29/01_ts-types/assets/js/06_interface-extends.js b/05_typescript/unterricht/tag29/01_ts-types/assets/js/06_interface-extends.js new file mode 100644 index 0000000..a65126f --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/assets/js/06_interface-extends.js @@ -0,0 +1,39 @@ +(() => { + // src/06_interface-extends.ts + { + const printVehicleInfo = (vehicle) => { + console.log(`Make: ${vehicle.make}`); + console.log(`Model: ${vehicle.model}`); + console.log(`Year: ${vehicle.year}`); + }; + printVehicleInfo({ make: "Honda", model: "Civic", year: 2020 }); + const employee = { + name: "John Doe", + age: 30, + employeeId: 123 + }; + console.log(employee.name); + console.log(employee.age); + console.log(employee.employeeId); + } + { + const employee = { + name: "John Doe", + age: 30, + employeeId: 12345 + }; + console.log(employee.name); + console.log(employee.age); + console.log(employee.employeeId); + } + { + const monitor = { + resolution: "1080p", + size: 24 + }; + console.log(monitor.resolution); + console.log(monitor.size); + } + { + } +})(); diff --git a/05_typescript/unterricht/tag29/01_ts-types/assets/js/07_type-as-statement.js b/05_typescript/unterricht/tag29/01_ts-types/assets/js/07_type-as-statement.js new file mode 100644 index 0000000..8a3557e --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/assets/js/07_type-as-statement.js @@ -0,0 +1,12 @@ +(() => { + // src/07_type-as-statement.ts + { + const h1El = document.querySelector("h1"); + const headlineEl = document.querySelector("h1"); + headlineEl.style.color = "tomato"; + const pEl = document.querySelector("p"); + const paragraphEl = document.querySelector("p"); + console.log({ width: pEl?.offsetWidth, height: pEl?.offsetHeight }); + console.log({ width: paragraphEl.offsetWidth, height: paragraphEl.offsetHeight }); + } +})(); diff --git a/05_typescript/unterricht/tag29/01_ts-types/index.html b/05_typescript/unterricht/tag29/01_ts-types/index.html index 77854f0..bccbe85 100644 --- a/05_typescript/unterricht/tag29/01_ts-types/index.html +++ b/05_typescript/unterricht/tag29/01_ts-types/index.html @@ -7,9 +7,12 @@ - - - + + + + + +
diff --git a/05_typescript/unterricht/tag29/01_ts-types/src/05_type-statement.ts b/05_typescript/unterricht/tag29/01_ts-types/src/05_type-statement.ts index e69de29..e5cf00a 100644 --- a/05_typescript/unterricht/tag29/01_ts-types/src/05_type-statement.ts +++ b/05_typescript/unterricht/tag29/01_ts-types/src/05_type-statement.ts @@ -0,0 +1,69 @@ +// 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, festehende type und unios + + type Car = { + make: string; + model: string; + year: number; + }; + + const printCarDetails = (car: 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); + + // ======= + + type Status = 'success' | 'error' | 'loading'; + + const displayStatus = (status: 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'); // 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 Funktion als parameter oder Funktionsausdrücke + + type StringFn = (param: string) => string; + + function capitalize(input: string): string { + return input.charAt(0).toUpperCase() + input.slice(1); + } + + function applyTransform(input: string, transform: StringFn): string { + return transform(input); + } + + console.log(applyTransform('hello', capitalize)); // => "Hello" + + const greetName: StringFn = (name) => { + return `Hello, ${name}`; + }; + + console.log(greetName('Philippe')); +} diff --git a/05_typescript/unterricht/tag29/01_ts-types/src/06_interface-extends.ts b/05_typescript/unterricht/tag29/01_ts-types/src/06_interface-extends.ts new file mode 100644 index 0000000..b58ccbf --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/src/06_interface-extends.ts @@ -0,0 +1,91 @@ +// Interfaces - eine leistungsstarke Funktion zur Definition der Form eines Objekts. Ein Interface ermöglicht es dir, die Eigenschaften, die ein Objekt haben soll, zusammen mit ihren Typen festzulegen, was deinen Code lesbarer und einfacher zu pflegen macht. +{ + interface Vehicle { + make: string; + model: string; + year: number; + } + + const printVehicleInfo = (vehicle: Vehicle) => { + console.log(`Make: ${vehicle.make}`); + console.log(`Model: ${vehicle.model}`); + console.log(`Year: ${vehicle.year}`); + }; + + printVehicleInfo({ make: 'Honda', model: 'Civic', year: 2020 }); + // Object literal may only specify known properties, and 'releaseYear' does not exist in type 'Vehicle'. + // printVehicleInfo({ make: 'Nissan', model: 'Pao', releaseYear: 1984 }); + + // ----- + + interface Person { + name: string; + age: number; + } + + interface Employee extends Person { + employeeId: number; + } + + const employee: Employee = { + name: 'John Doe', + age: 30, + employeeId: 123, + }; + + console.log(employee.name); // from Person + console.log(employee.age); // from Person + console.log(employee.employeeId); // from Employee +} +// ------ +{ + type Person = { + name: string; + age: number; + }; + + // NOT RECOMMENDED - use interfaces instead + // Erweiterung bei type Objekt mit "&" ampersand + type Employee = Person & { + employeeId: number; + }; + + const employee: Employee = { + name: 'John Doe', + age: 30, + employeeId: 12345, + }; + + console.log(employee.name); + console.log(employee.age); + console.log(employee.employeeId); +} +//---- +{ + interface Display { + resolution: string; + } + + interface Display { + size: number; + } + + const monitor: Display = { + resolution: '1080p', + size: 24, + }; + + console.log(monitor.resolution); // => 1080p + console.log(monitor.size); // => 24 +} +//------ +{ + type Display = { + resolution: string; + }; + + // type Display = { + // size: number; + // }; + // Error: Duplicate identifier 'Display'. +} diff --git a/05_typescript/unterricht/tag29/01_ts-types/src/07_type-as-statement.ts b/05_typescript/unterricht/tag29/01_ts-types/src/07_type-as-statement.ts new file mode 100644 index 0000000..fab9ad7 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/src/07_type-as-statement.ts @@ -0,0 +1,18 @@ +// Type Assertions verwenden - mit "as" statement festen Datentyp zuweisen +{ + const h1El: HTMLHeadingElement | null = document.querySelector('h1'); + + // selber festgelegt + const headlineEl = document.querySelector('h1') as HTMLHeadingElement; + + // h1El?.style?.color = 'tomato'; + headlineEl.style.color = 'tomato'; + + const pEl: HTMLParagraphElement | null = document.querySelector('p'); + + // selber festgelegt + const paragraphEl = document.querySelector('p'); + + console.log({ width: pEl?.offsetWidth, height: pEl?.offsetHeight }); + console.log({ width: paragraphEl.offsetWidth, height: paragraphEl.offsetHeight }); +}