diff --git a/05_typescript/uebungen/u20_fn-call-signatures/src/main.ts b/05_typescript/uebungen/u20_fn-call-signatures/src/main.ts index 3d05428..c9a4c17 100644 --- a/05_typescript/uebungen/u20_fn-call-signatures/src/main.ts +++ b/05_typescript/uebungen/u20_fn-call-signatures/src/main.ts @@ -18,7 +18,7 @@ type NumberFn = (value: number) => number; // halve: Teilt die eingegebene Zahl durch 2. // Der Parametertyp wird jeweils aus NumberOperation abgeleitet. -const double: NumberOperation = (value) => value * 2; +const double: NumberOperation = value => value * 2; // prettier-ignore const halve: NumberOperation = (value) => value / 2; const double2: NumberFn = (value) => value * 2; diff --git a/05_typescript/uebungen/u22_fn-optional-props/index.html b/05_typescript/uebungen/u22_fn-optional-props/index.html new file mode 100644 index 0000000..603c443 --- /dev/null +++ b/05_typescript/uebungen/u22_fn-optional-props/index.html @@ -0,0 +1,49 @@ + + + + + + Übung 22: Optionale Parameter implementieren + + + + +
+
+
+

Übung 22: Optionale Parameter implementieren

+

+ Erstelle die Funktion createUserProfile, die drei + Parameter benötigt: einen obligatorischen username und zwei + optionale Parameter, age und email. Die + Funktion sollte einen String mit einer Profilzusammenfassung + zurückgeben. Wenn keine optionalen Parameter angegeben werden, + sollten die Standardwerte verwendet werden, um das Profil zu + vervollständigen. +

+ +

Anweisungen:

+
    +
  • + Definiere eine Funktion createUserProfile, die + akzeptiert: +
      +
    • username (erforderlich, String)
      • +
    • age (optional, Zahl, Standardwert ist 18)
      • +
    • + email (optional, String, Standardwert: "N/A") +
      • +
    +
    • +
  • + Die Funktion sollte einen String zurückgeben, der das Profil des + Nutzers zusammenfasst. +
    • +
+
+
+
+ + diff --git a/05_typescript/uebungen/u22_fn-optional-props/package.json b/05_typescript/uebungen/u22_fn-optional-props/package.json new file mode 100644 index 0000000..88e6a06 --- /dev/null +++ b/05_typescript/uebungen/u22_fn-optional-props/package.json @@ -0,0 +1,13 @@ +{ + "name": "22_fn-optional-props", + "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/u22_fn-optional-props/src/main.ts b/05_typescript/uebungen/u22_fn-optional-props/src/main.ts new file mode 100644 index 0000000..0a91631 --- /dev/null +++ b/05_typescript/uebungen/u22_fn-optional-props/src/main.ts @@ -0,0 +1,19 @@ +createUserProfile('JohnDoe', 25, 'john@example.com'); +// => "User JohnDoe is 25 years old and can be contacted at john@example.com." + +createUserProfile('JaneDoe'); +// => "User JaneDoe is 18 years old and can be contacted at N/A." + +// Übung 22: Optionale Parameter implementieren + +// Erstelle die Funktion createUserProfile, die drei Parameter benötigt: einen obligatorischen username und zwei optionale Parameter, age und email. Die Funktion sollte einen String mit einer Profilzusammenfassung zurückgeben. Wenn keine optionalen Parameter angegeben werden, sollten die Standardwerte verwendet werden, um das Profil zu vervollständigen. + +// Anweisungen: + +// Definiere eine Funktion createUserProfile, die akzeptiert: + +// username (erforderlich, String) +// age (optional, Zahl, Standardwert ist 18) +// email (optional, String, Standardwert: "N/A") + +// Die Funktion sollte einen String zurückgeben, der das Profil des Nutzers zusammenfasst. diff --git a/05_typescript/uebungen/u23_fn-rest-params-args/index.html b/05_typescript/uebungen/u23_fn-rest-params-args/index.html new file mode 100644 index 0000000..f5de609 --- /dev/null +++ b/05_typescript/uebungen/u23_fn-rest-params-args/index.html @@ -0,0 +1,58 @@ + + + + + + Übung 23: Restparameter und Restargumente + + + + +
+
+
+

Übung 23: Restparameter und Restargumente

+

+ Schreibe zwei Funktionen: eine, die Restparameter verwendet, um eine + unterschiedliche Anzahl von Zahlen zu akzeptieren und ihre Summe zu + berechnen, und eine andere, die die Spread-Syntax verwendet, um ein + Array von Zahlen in einzelne Argumente für eine mathematische + Funktion zu verteilen. +

+ +

Anweisungen:

+
    +
  1. + Definiere eine Funktion sumAll, die einen + Restparameter, bestehend aus einer variablen Anzahl von + numerischen Argumenten, annimmt und die Summe aller übergebenen + Zahlen zurückgibt. Verwende die Methode reduce, um die Summe des + Arrays zu berechnen. +
    2. +
  2. + Als Nächstes definierst du eine Funktion namens + calculateHypotenuse, die zwei Zahlen als Argumente + akzeptiert und die Hypotenuse mithilfe der Formel + √(a² + b²) + berechnet. Du solltest diese Funktion aufrufen, indem du ein Array + mit zwei Zahlen mit Hilfe der Spread-Syntax ausbreitest. (Tipp: + Verwende Math.sqrt()) +
    3. +
  3. + Teste schließlich die Funktion sumAll, indem du sie + mit mehreren Zahlen aufrufst und das Ergebnis protokollierst. + Teste die Funktion calculateHypotenuse, indem du ein + Array mit zwei Zahlen erstellst, dieses Array in die Funktion + überträgst und das Ergebnis protokollierst. Versuche außerdem, + calculateHypotenuse mit einem Array aufzurufen, das + nicht genau zwei Zahlen enthält, um das Type-Checking von + TypeScript zu beobachten. +
    4. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u23_fn-rest-params-args/package.json b/05_typescript/uebungen/u23_fn-rest-params-args/package.json new file mode 100644 index 0000000..ad2213f --- /dev/null +++ b/05_typescript/uebungen/u23_fn-rest-params-args/package.json @@ -0,0 +1,13 @@ +{ + "name": "23_fn-rest-params-args", + "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/u23_fn-rest-params-args/src/main.ts b/05_typescript/uebungen/u23_fn-rest-params-args/src/main.ts new file mode 100644 index 0000000..86f7f17 --- /dev/null +++ b/05_typescript/uebungen/u23_fn-rest-params-args/src/main.ts @@ -0,0 +1,23 @@ +// Example usage of sumAll +// Define total +console.log(total); // => 15 + +// Example usage of calculateHypotenuse with spread syntax +// Define hypotenuse +console.log(hypotenuse); // => 5 + +// Attempting to call calculateHypotenuse with incorrect number of arguments +const invalidSides = [3, 4, 5]; +// Define invalidHypotenuse to call calculateHypotenuse with invalidSides => TypeScript Error: Expected 2 arguments, but got 3. + +// Übung 23: Restparameter und Restargumente + +// Schreibe zwei Funktionen: eine, die Restparameter verwendet, um eine unterschiedliche Anzahl von Zahlen zu akzeptieren und ihre Summe zu berechnen, und eine andere, die die Spread-Syntax verwendet, um ein Array von Zahlen in einzelne Argumente für eine mathematische Funktion zu verteilen. + +// Anweisungen: + +// 1 Definiere eine Funktion sumAll, die einen Restparameter, bestehend aus einer variablen Anzahl von numerischen Argumenten, annimmt und die Summe aller übergebenen Zahlen zurückgibt. Verwende die Methode reduce, um die Summe des Arrays zu berechnen. + +// 2 Als Nächstes definierst du eine Funktion namens calculateHypotenuse, die zwei Zahlen als Argumente akzeptiert und die Hypotenuse mithilfe der Formel √(a² + b²) berechnet. Du solltest diese Funktion aufrufen, indem du ein Array mit zwei Zahlen mit Hilfe der Spread-Syntax ausbreitest. (Tipp: Verwende Math.sqrt()) + +// 3 Teste schließlich die Funktion sumAll, indem du sie mit mehreren Zahlen aufrufst und das Ergebnis protokollierst. Teste die Funktion calculateHypotenuse, indem du ein Array mit zwei Zahlen erstellst, dieses Array in die Funktion überträgst und das Ergebnis protokollierst. Versuche außerdem, calculateHypotenuse mit einem Array aufzurufen, das nicht genau zwei Zahlen enthält, um das Type-Checking von TypeScript zu beobachten. diff --git a/05_typescript/uebungen/u24_fn-destructuring/index.html b/05_typescript/uebungen/u24_fn-destructuring/index.html new file mode 100644 index 0000000..84a0500 --- /dev/null +++ b/05_typescript/uebungen/u24_fn-destructuring/index.html @@ -0,0 +1,48 @@ + + + + + + Übung 24: Parameter Destrukturierung + + + + +
+
+
+

Übung 24: Parameter Destrukturierung

+

+ In dieser Übung übst du die Anwendung der Parameterdestrukturierung + in TypeScript, indem du zwei einfache Funktionen erstellst. Die + erste Funktion destrukturiert einen Objektparameter und verwendet + einen Standardwert für eine seiner Eigenschaften. Die zweite + Funktion destrukturiert einen Array-Parameter. Beide Funktionen + enthalten Type Annotations, um sicherzustellen, dass sie die + richtige Struktur erhalten. +

+ +

Anweisungen:

+
    +
  1. + Erstelle eine Funktion displayUserInfo, die die + Eigenschaften name und age aus einem + Objektparameter destrukturiert und einen Standardwert für + age liefert. +
    2. +
  2. + Erstelle eine Funktion getFirstTwoElements, die die + ersten beiden Elemente aus einem Array-Parameter zerstört. +
    3. +
  3. + Teste deine Funktionen, indem du sie mit den richtigen Argumenten + aufrufst. +
    4. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u24_fn-destructuring/package.json b/05_typescript/uebungen/u24_fn-destructuring/package.json new file mode 100644 index 0000000..ee867af --- /dev/null +++ b/05_typescript/uebungen/u24_fn-destructuring/package.json @@ -0,0 +1,13 @@ +{ + "name": "24_fn-destructuring", + "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/u24_fn-destructuring/src/main.ts b/05_typescript/uebungen/u24_fn-destructuring/src/main.ts new file mode 100644 index 0000000..82a2399 --- /dev/null +++ b/05_typescript/uebungen/u24_fn-destructuring/src/main.ts @@ -0,0 +1,19 @@ +// Example usage of displayUserInfo +displayUserInfo({ name: 'John' }); // => Hello, John! You are 25 years old. +displayUserInfo({ name: 'Alice', age: 30 }); // => Hello, Alice! You are 30 years old. + +// Example usage of getFirstTwoElements +getFirstTwoElements([5, 10]); // => First: 5, Second: 10 +getFirstTwoElements([8]); // => First: 8, Second: undefined + +// Übung 24: Parameter Destrukturierung + +// In dieser Übung übst du die Anwendung der Parameterdestrukturierung in TypeScript, indem du zwei einfache Funktionen erstellst. Die erste Funktion destrukturiert einen Objektparameter und verwendet einen Standardwert für eine seiner Eigenschaften. Die zweite Funktion destrukturiert einen Array-Parameter. Beide Funktionen enthalten Type Annotations, um sicherzustellen, dass sie die richtige Struktur erhalten. + +// Anweisungen: + +// 1 Erstelle eine Funktion displayUserInfo, die die Eigenschaften name und age aus einem Objektparameter destrukturiert und einen Standardwert für age liefert. + +// 2 Erstelle eine Funktion getFirstTwoElements, die die ersten beiden Elemente aus einem Array-Parameter zerstört. + +// 3 Teste deine Funktionen, indem du sie mit den richtigen Argumenten aufrufst. diff --git a/05_typescript/uebungen/u25_obj-read-only/index.html b/05_typescript/uebungen/u25_obj-read-only/index.html new file mode 100644 index 0000000..8b33cab --- /dev/null +++ b/05_typescript/uebungen/u25_obj-read-only/index.html @@ -0,0 +1,68 @@ + + + + + + Übung 25: Optionale und readonly Eigenschaften + + + + +
+
+
+

Übung 25: Optionale und readonly Eigenschaften

+

+ In dieser Übung erstellst du eine interface für ein + »Product«, die erforderliche, optionale und readonly Eigenschaften + enthält. Anschließend schreibst du eine Funktion, die Informationen + über das Produkt protokolliert und dabei optionale Eigenschaften + korrekt behandelt. +

+ +

Anweisungen:

+
    +
  1. + Definiere ein Product Interface, die Folgendes + beinhaltet: +
      +
    • + Erforderliche Eigenschaften id (Number) und + name (String). +
      • +
    • + Optionale Eigenschaften price (Number) und + description (String). +
      • +
    • + Eine readonly category (String) + Eigenschaft. +
      • +
    +
    2. +
  2. + Schreibe eine Funktion printProductDetails, die ein + Product Objekt annimmt und: +
      +
    • + Druckt die name, category und + id. +
      • +
    • + Wenn price undefined ist, drucke + "Price: Not available". +
      • +
    • + Wenn description undefined ist, + drucke "No description availabler". +
      • +
    +
    3. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u25_obj-read-only/package.json b/05_typescript/uebungen/u25_obj-read-only/package.json new file mode 100644 index 0000000..a5ad3f3 --- /dev/null +++ b/05_typescript/uebungen/u25_obj-read-only/package.json @@ -0,0 +1,13 @@ +{ + "name": "25_obj-read-only", + "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/u25_obj-read-only/src/main.ts b/05_typescript/uebungen/u25_obj-read-only/src/main.ts new file mode 100644 index 0000000..2b0f1e6 --- /dev/null +++ b/05_typescript/uebungen/u25_obj-read-only/src/main.ts @@ -0,0 +1,17 @@ +// Übung 25: Optionale und readonly Eigenschaften + +// In dieser Übung erstellst du eine interface für eine Product, die erforderliche, optionale und readonly Eigenschaften enthält. Anschließend schreibst du eine Funktion, die Informationen über das Produkt protokolliert und dabei optionale Eigenschaften korrekt behandelt. + +// Anweisungen: + +// 1 Definiere ein Product Interface, die Folgendes beinhaltet: + +// Erforderliche Eigenschaften id (Number) und name (String). +// Optionale Eigenschaften price (Number) und description (String). +// Eine readonly category (String) Eigenschaft. + +// 2 Schreibe eine Funktion printProductDetails, die ein Product Objekt annimmt und: + +// Druckt die name, category und id. +// Wenn price undefined ist, drucke "Price: Not available". +// Wenn description undefined ist, drucke "No description availabler". diff --git a/05_typescript/uebungen/u26_obj-update/index.html b/05_typescript/uebungen/u26_obj-update/index.html new file mode 100644 index 0000000..b27bf67 --- /dev/null +++ b/05_typescript/uebungen/u26_obj-update/index.html @@ -0,0 +1,63 @@ + + + + + + Übung 26: Eine verschachtelte Objekteigenschaft aktualisieren + + + + +
+
+
+

Übung 26: Eine verschachtelte Objekteigenschaft aktualisieren

+

+ In dieser Übung definierst du ein Interface mit readonly und + veränderbaren Eigenschaften und aktualisierst ein verschachteltes + Objekt innerhalb des Interfaces. Du übst den Umgang mit + verschachtelten Objekten und readonly Eigenschaften. +

+ +

Anweisungen:

+
    +
  1. + Erstelle ein Employee Interface, die Folgendes + enthält: +
      +
    • + Eine readonly employeeId (Number) + Eigenschaft. +
      • +
    • + Eine veränderbare Detail-Eigenschaft, die ein Objekt ist, das + Folgendes enthält: position (String) und + salary (Number) +
      • +
    +
    2. +
  2. + Schreibe eine Funktion updateEmployeePosition die: +
      +
    • + Akzeptiert ein Employee Objekt und einen neuen + position String. +
      • +
    • + Aktualisiert die position des Mitarbeiters, + verhindert aber jede Änderung der employeeId. +
      • +
    +
    3. +
  3. + Teste die Funktion, indem du ein Employee-Objekt erstellst und die + Position aktualisierst. +
    4. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u26_obj-update/package.json b/05_typescript/uebungen/u26_obj-update/package.json new file mode 100644 index 0000000..9ee6218 --- /dev/null +++ b/05_typescript/uebungen/u26_obj-update/package.json @@ -0,0 +1,13 @@ +{ + "name": "26_obj-update", + "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/u26_obj-update/src/main.ts b/05_typescript/uebungen/u26_obj-update/src/main.ts new file mode 100644 index 0000000..2ca73d2 --- /dev/null +++ b/05_typescript/uebungen/u26_obj-update/src/main.ts @@ -0,0 +1,19 @@ +// Übung 26: Eine verschachtelte Objekteigenschaft aktualisieren + +// In dieser Übung definierst du ein Interface mit readonly und veränderbaren Eigenschaften und aktualisierst ein verschachteltes Objekt innerhalb des Interfaces. Du übst den Umgang mit verschachtelten Objekten und readonly Eigenschaften. + +// Anweisungen: + +// Erstelle ein Employee Interface, die Folgendes enthält: + +// Eine readonly employeeId (Number) Eigenschaft. + +// Eine veränderbare Detail-Eigenschaft, die ein Objekt ist, das Folgendes enthält: position (String), salary (Number) + +// Schreibe eine Funktion updateEmployeePosition die: + +// Akzeptiert ein Employee Objekt und einen neuen position String. + +// Aktualisiert die position des Mitarbeiters, verhindert aber jede Änderung der employeeId. + +// Teste die Funktion, indem du ein Employee-Objekt erstellst und die Position aktualisierst. diff --git a/05_typescript/uebungen/u27_obj-interface-props/index.html b/05_typescript/uebungen/u27_obj-interface-props/index.html new file mode 100644 index 0000000..9da2cc2 --- /dev/null +++ b/05_typescript/uebungen/u27_obj-interface-props/index.html @@ -0,0 +1,84 @@ + + + + + + + Übung 27: Kombiniere Optional, Readonly und Required Properties in einem + Interface + + + + + +
+
+
+

+ Übung 27: Kombiniere Optional, Readonly und Required Properties in + einem Interface +

+

+ In dieser Übung erstellst du ein Car Interface mit + required, optional und readonly Eigenschaften. Anschließend + schreibst du eine Funktion, um ein neues Car Objekt zu + erstellen und Änderungen an veränderbaren Eigenschaften zu + verarbeiten. +

+ +

Anweisungen:

+
    +
  1. + Definiere ein Car Interface, die Folgendes + beinhaltet: +
      +
    • + Erforderliche Eigenschaften make (string) und + model (string). +
      • +
    • + Optionale Eigenschaften year (Number) und + color (String). +
      • +
    • + Eine readonly vin (string) Eigenschaft + (Fahrzeugidentifikationsnummer). +
      • +
    +
    2. +
  2. + Schreibe eine Funktion createCar die: +
      +
    • + Nimmt make, model und + vin auf und gibt ein Car Objekt + zurück. +
      • +
    • + Optional können year und color + akzeptiert werden. +
      • +
    +
    3. +
  3. + Schreibe eine weitere Funktion paintCar die: +
      +
    • + Akzeptiert ein Car Objekt und einen neuen + color String. +
      • +
    • + Aktualisiert die color des Fahrzeugs (falls + vorhanden), verhindert aber jede Änderung an der + vin. +
      • +
    +
    4. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u27_obj-interface-props/package.json b/05_typescript/uebungen/u27_obj-interface-props/package.json new file mode 100644 index 0000000..b9453a4 --- /dev/null +++ b/05_typescript/uebungen/u27_obj-interface-props/package.json @@ -0,0 +1,13 @@ +{ + "name": "27_obj-interface-props", + "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/u27_obj-interface-props/src/main.ts b/05_typescript/uebungen/u27_obj-interface-props/src/main.ts new file mode 100644 index 0000000..8f3f362 --- /dev/null +++ b/05_typescript/uebungen/u27_obj-interface-props/src/main.ts @@ -0,0 +1,25 @@ +// Übung 27: Kombiniere Optional, Readonly und Required Properties in einem Interface + +// In dieser Übung erstellst du ein Car Interface mit required, optional und readonly Eigenschaften. Anschließend schreibst du eine Funktion, um ein neues Car Objekt zu erstellen und Änderungen an veränderbaren Eigenschaften zu verarbeiten. + +// Anweisungen: + +// 1 Definiere ein Car Interface, die Folgendes beinhaltet: + +// Erforderliche Eigenschaften make (string) und model (string). + +// Optionale Eigenschaften year (Number) und color (String). + +// Eine readonly vin (string) Eigenschaft (Fahrzeugidentifikationsnummer). + +// 2 Schreibe eine Funktion createCar die: + +// Nimmt make, model und vin auf und gibt ein Car Objekt zurück. + +// Optional können year und color akzeptiert werden. + +// 3 Schreibe eine weitere Funktion paintCar die: + +// Akzeptiert ein Car Objekt und einen neuen color String. + +// Aktualisiert die color des Fahrzeugs (falls vorhanden), verhindert aber jede Änderung an der vin. diff --git a/05_typescript/uebungen/u28_obj-excess-prop-check/index.html b/05_typescript/uebungen/u28_obj-excess-prop-check/index.html new file mode 100644 index 0000000..41e47fa --- /dev/null +++ b/05_typescript/uebungen/u28_obj-excess-prop-check/index.html @@ -0,0 +1,53 @@ + + + + + + Übung 28: Excess Property Checks mit Object Literals + + + + +
+
+
+

Übung 28: Excess Property Checks mit Object Literals

+

+ In dieser Übung definierst du ein Interface Car und + schreibst eine Funktion, die ein Objekt vom Typ + Car annimmt. Du wirst untersuchen, wie TypeScript + Excess Property Checks erzwingt, indem es versucht, ein Objekt mit + zusätzlichen Eigenschaften an die Funktion zu übergeben. +

+ +

Anweisungen:

+
    +
  1. + Definiere ein Car Interface mit den folgenden + Eigenschaften: +
      +
    • make: String
      • +
    • model: String
      • +
    • year: Number
      • +
    +
    2. +
  2. + Schreibe eine Funktion printCarDetails, die ein + Objekt vom Typ Car annimmt und die Details des Autos + ausgibt (make, model und + year). +
    3. +
  3. + Versuche, der Funktion ein Objekt zu übergeben, das eine + zusätzliche Eigenschaft hat, z. B. color. Beobachte, + wie TypeScript mit der überzähligen Eigenschaft umgeht und + erkläre, warum der Fehler auftritt. +
    4. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u28_obj-excess-prop-check/package.json b/05_typescript/uebungen/u28_obj-excess-prop-check/package.json new file mode 100644 index 0000000..0e52588 --- /dev/null +++ b/05_typescript/uebungen/u28_obj-excess-prop-check/package.json @@ -0,0 +1,13 @@ +{ + "name": "28_obj-excess-prop-check", + "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/u28_obj-excess-prop-check/src/main.ts b/05_typescript/uebungen/u28_obj-excess-prop-check/src/main.ts new file mode 100644 index 0000000..b9539bd --- /dev/null +++ b/05_typescript/uebungen/u28_obj-excess-prop-check/src/main.ts @@ -0,0 +1,15 @@ +// Übung 28: Excess Property Checks mit Object Literals + +// In dieser Übung definierst du ein Interface Car und schreibst eine Funktion, die ein Objekt vom Typ Car annimmt. Du wirst untersuchen, wie TypeScript Excess Property Checks erzwingt, indem es versucht, ein Objekt mit zusätzlichen Eigenschaften an die Funktion zu übergeben. + +// Anweisungen: + +// 1 Definiere ein Car Interface mit den folgenden Eigenschaften: + +// - make: String +// - model: String +// - year: Number + +// 2 Schreibe eine Funktion printCarDetails, die ein Objekt vom Typ Car annimmt und die Details des Autos ausgibt (make, model und year). + +// 3 Versuche, der Funktion ein Objekt zu übergeben, das eine zusätzliche Eigenschaft hat, z. B. color. Beobachte, wie TypeScript mit der überzähligen Eigenschaft umgeht und erkläre, warum der Fehler auftritt. diff --git a/05_typescript/uebungen/u29_obj-extending-interface/index.html b/05_typescript/uebungen/u29_obj-extending-interface/index.html new file mode 100644 index 0000000..23c0bbd --- /dev/null +++ b/05_typescript/uebungen/u29_obj-extending-interface/index.html @@ -0,0 +1,43 @@ + + + + + + Übung 29: Extending einer einzelnen Interface + + + + +
+
+
+

Übung 29: Extending einer einzelnen Interface

+

+ In dieser Übung wirst du eine bestehende + Product Interface erweitern, um einen spezifischeren + Typ Electronics zu erstellen. Du wirst zusätzliche + Eigenschaften für Elektronikprodukte definieren und ein Objekt des + Typs Electronics + erstellen. +

+ +

Anweisungen:

+
    +
  1. + Definiere ein Product Interface mit den Eigenschaften + id, name und price. +
    2. +
  2. + Erweitere die Product Interface um eine + Electronics Interface und füge die Eigenschaften + brand und warranty hinzu. +
    3. +
  3. Erstelle ein Objekt vom Typ Electronics.
    4. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u29_obj-extending-interface/package.json b/05_typescript/uebungen/u29_obj-extending-interface/package.json new file mode 100644 index 0000000..f8c17c8 --- /dev/null +++ b/05_typescript/uebungen/u29_obj-extending-interface/package.json @@ -0,0 +1,13 @@ +{ + "name": "29_obj-extending-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/u29_obj-extending-interface/src/main.ts b/05_typescript/uebungen/u29_obj-extending-interface/src/main.ts new file mode 100644 index 0000000..6e135fa --- /dev/null +++ b/05_typescript/uebungen/u29_obj-extending-interface/src/main.ts @@ -0,0 +1,11 @@ +// Übung 29: Extending einer einzelnen Interface + +// In dieser Übung wirst du eine bestehende Product Interface erweitern, um einen spezifischeren Typ Electronics zu erstellen. Du wirst zusätzliche Eigenschaften für Elektronikprodukte definieren und ein Objekt des Typs Electronics erstellen. + +// Anweisungen: + +// 1 Definiere ein Product Interface mit den Eigenschaften id, name und price. + +// 2 Erweitere die Product Interface um eine Electronics Interface und füge die Eigenschaften brand und warranty hinzu. + +// 3 Erstelle ein Objekt vom Typ Electronics. diff --git a/05_typescript/uebungen/u30_obj-subtyp/index.html b/05_typescript/uebungen/u30_obj-subtyp/index.html new file mode 100644 index 0000000..837219e --- /dev/null +++ b/05_typescript/uebungen/u30_obj-subtyp/index.html @@ -0,0 +1,47 @@ + + + + + + + Übung 30: Einzigartige Eigenschaften zu einem Subtyp hinzufügen + + + + + +
+
+
+

+ Übung 30: Einzigartige Eigenschaften zu einem Subtyp hinzufügen +

+

+ In dieser Übung wirst du die Product Interface + erweitern, um einen Typ Furniture zu erstellen, der + spezielle Eigenschaften für Möbel hinzufügt, wie + material und dimensions. +

+ +

Anweisungen:

+
    +
  1. + Erweitere die Product Interface, um eine + Furniture Interface zu erstellen. +
    2. +
  2. + Füge die Eigenschaften material und + dimensions zu den Möbeln hinzu. +
    3. +
  3. + Erstelle ein Objekt vom Typ Furniture, das ein Möbelstück + darstellt. +
    4. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u30_obj-subtyp/package.json b/05_typescript/uebungen/u30_obj-subtyp/package.json new file mode 100644 index 0000000..9a80620 --- /dev/null +++ b/05_typescript/uebungen/u30_obj-subtyp/package.json @@ -0,0 +1,13 @@ +{ + "name": "30_obj-subtyp", + "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/u30_obj-subtyp/src/main.ts b/05_typescript/uebungen/u30_obj-subtyp/src/main.ts new file mode 100644 index 0000000..b64073b --- /dev/null +++ b/05_typescript/uebungen/u30_obj-subtyp/src/main.ts @@ -0,0 +1,11 @@ +// Übung 30: Einzigartige Eigenschaften zu einem Subtyp hinzufügen + +// In dieser Übung wirst du die Product Interface erweitern, um einen Typ Furniture zu erstellen, der spezielle Eigenschaften für Möbel hinzufügt, wie material und dimensions. + +// Anweisungen: + +// 1 Erweitere die Product Interface, um eine Furniture Interface zu erstellen. + +// 2 Füge die Eigenschaften material und dimensions zu den Möbeln hinzu. + +// 3 Erstelle ein Objekt vom Typ Furniture, das ein Möbelstück darstellt. diff --git a/05_typescript/uebungen/u31_obj-generics-fns/index.html b/05_typescript/uebungen/u31_obj-generics-fns/index.html new file mode 100644 index 0000000..c4ba6f9 --- /dev/null +++ b/05_typescript/uebungen/u31_obj-generics-fns/index.html @@ -0,0 +1,42 @@ + + + + + + Übung 31: Generic Functions für Arrays + + + + +
+
+
+

Übung 31: Generic Functions für Arrays

+

+ In dieser Übung erstellst du eine generische Funktion, die mit + Arrays beliebigen Typs funktioniert. Du definierst eine Funktion, + die das erste Element des Arrays zurückgibt und es TypeScript + ermöglicht, den Elementtyp aus dem übergebenen Array abzuleiten. +

+ +

Anweisungen:

+
    +
  1. + Definiere eine generische Funktion + getFirstElement, die ein Array beliebigen Typs + annimmt und das erste Element oder undefined zurückgibt, wenn das + Array leer ist. +
    2. +
  2. + Rufe die Funktion mit Arrays verschiedener Typen auf + (number[], string[], etc.) und + protokolliere das Ergebnis. +
    3. +
+
+
+
+ + diff --git a/05_typescript/uebungen/u31_obj-generics-fns/package.json b/05_typescript/uebungen/u31_obj-generics-fns/package.json new file mode 100644 index 0000000..9af4f66 --- /dev/null +++ b/05_typescript/uebungen/u31_obj-generics-fns/package.json @@ -0,0 +1,13 @@ +{ + "name": "31_obj-generics-fns", + "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/u31_obj-generics-fns/src/main.ts b/05_typescript/uebungen/u31_obj-generics-fns/src/main.ts new file mode 100644 index 0000000..dd947ed --- /dev/null +++ b/05_typescript/uebungen/u31_obj-generics-fns/src/main.ts @@ -0,0 +1,9 @@ +// Übung 31: Generic Functions für Arrays + +// In dieser Übung erstellst du eine generische Funktion, die mit Arrays beliebigen Typs funktioniert. Du definierst eine Funktion, die das erste Element des Arrays zurückgibt und es TypeScript ermöglicht, den Elementtyp aus dem übergebenen Array abzuleiten. + +// Anweisungen: + +// 1 Definiere eine generische Funktion getFirstElement, die ein Array beliebigen Typs annimmt und das erste Element oder undefined zurückgibt, wenn das Array leer ist. + +// 2 Rufe die Funktion mit Arrays verschiedener Typen auf (number[], string[], etc.) und protokolliere das Ergebnis. diff --git a/05_typescript/uebungen/uebungen-22-31-ts.zip b/05_typescript/uebungen/uebungen-22-31-ts.zip new file mode 100644 index 0000000..feef167 Binary files /dev/null and b/05_typescript/uebungen/uebungen-22-31-ts.zip differ diff --git a/05_typescript/unterricht/tag32/01_ts-functions/package.json b/05_typescript/unterricht/tag32/01_ts-functions/package.json index 86b8c23..7232652 100644 --- a/05_typescript/unterricht/tag32/01_ts-functions/package.json +++ b/05_typescript/unterricht/tag32/01_ts-functions/package.json @@ -1,5 +1,5 @@ { - "name": "02_ts-functions", + "name": "ts-functions", "version": "1.0.0", "description": "", "main": "index.js", diff --git a/05_typescript/unterricht/tag32/01_ts-functions/src/04_never-void-unknown.ts b/05_typescript/unterricht/tag32/01_ts-functions/src/04_never-void-unknown.ts index 5cda185..e921eeb 100644 --- a/05_typescript/unterricht/tag32/01_ts-functions/src/04_never-void-unknown.ts +++ b/05_typescript/unterricht/tag32/01_ts-functions/src/04_never-void-unknown.ts @@ -92,7 +92,7 @@ In TypeScript gibt es drei spezielle Typen: never, unknown und void. Diese Typen } // ---- - + // never const throwError = (message: string): never => { throw new Error(message); }; diff --git a/05_typescript/unterricht/tag32/02_ts-objects/assets/img/what-is-ts.webp b/05_typescript/unterricht/tag32/02_ts-objects/assets/img/what-is-ts.webp new file mode 100644 index 0000000..d329dbb Binary files /dev/null and b/05_typescript/unterricht/tag32/02_ts-objects/assets/img/what-is-ts.webp differ diff --git a/05_typescript/unterricht/tag32/02_ts-objects/assets/js/01_obj-props-readonly.js b/05_typescript/unterricht/tag32/02_ts-objects/assets/js/01_obj-props-readonly.js new file mode 100644 index 0000000..042733c --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/assets/js/01_obj-props-readonly.js @@ -0,0 +1,47 @@ +(() => { + // src/01_obj-props-readonly.ts + { + let person = { + name: "Alice", + age: 30 + }; + let person2 = { + name: "Alice", + age: 30 + }; + console.table(person); + console.table(person2); + const book1 = { title: "The Great Gatsby" }; + const book2 = { title: "1984", author: "George Orwell" }; + const book3 = { + title: "Moby Dick", + author: "Herman Melville", + pages: 635 + }; + console.log(book1); + console.log(book2); + console.log(book3); + const printBookInfo = (book) => { + const author = book.author ?? "Unknown"; + const author2 = book.author ? book.author : "Unknown"; + const pages = book.pages ?? "Page count not available"; + console.log(`Title: ${book.title}, Author: ${author}, Pages: ${pages}`); + }; + const printBookInfoWithDefaults = ({ title, author = "Unknown", pages = 1 }) => { + console.log(`Title: ${title}, Author: ${author}, Pages: ${pages}`); + }; + printBookInfoWithDefaults({ title: "To Kill a Mockingbird" }); + printBookInfo(book3); + printBookInfo(book2); + } + { + const person = { firstName: "John", lastName: "Doe", age: 30 }; + person.age = 31; + const employee = { + id: 101, + details: { position: "Developer", salary: 5e4 } + }; + employee.details.salary = 55e3; + const config = { apiKey: "abc123", timeout: 5e3 }; + } +})(); diff --git a/05_typescript/unterricht/tag32/02_ts-objects/assets/js/02_excess-property-check.js b/05_typescript/unterricht/tag32/02_ts-objects/assets/js/02_excess-property-check.js new file mode 100644 index 0000000..19da73c --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/assets/js/02_excess-property-check.js @@ -0,0 +1,12 @@ +(() => { + // src/02_excess-property-check.ts + { + const myCar = { make: "Toyota", model: "Camry", year: 2020 }; + console.log(myCar); + const printCarDetails = (car) => { + const { make, model, year } = car; + console.log(`Car Make: ${car.make}, Model: ${car.model}, Year: ${car.year}`); + }; + printCarDetails({ make: "Tesla", model: "Model 3", year: 2021 }); + } +})(); diff --git a/05_typescript/unterricht/tag32/02_ts-objects/assets/js/03_obj-extends.js b/05_typescript/unterricht/tag32/02_ts-objects/assets/js/03_obj-extends.js new file mode 100644 index 0000000..8d991a6 --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/assets/js/03_obj-extends.js @@ -0,0 +1,29 @@ +(() => { + // src/03_obj-extends.ts + { + const laptop = { + id: 1, + name: "Gaming Laptop", + price: 1500, + brand: "TechBrand", + warranty: 24 + }; + const chair = { + id: 2, + name: "Office Chair", + price: 200, + material: "Leather", + dimensions: { length: 60, width: 50, height: 110 } + }; + const tshirt = { + id: 2, + name: "T-Shirt", + price: 20, + size: "M", + color: "Red" + }; + console.log(laptop); + console.log(chair); + console.log(tshirt); + } +})(); diff --git a/05_typescript/unterricht/tag32/02_ts-objects/assets/js/04_more-types.js b/05_typescript/unterricht/tag32/02_ts-objects/assets/js/04_more-types.js new file mode 100644 index 0000000..3a44ff9 --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/assets/js/04_more-types.js @@ -0,0 +1,79 @@ +(() => { + // src/04_more-types.ts + { + const numbers = [10, 20, 30, 40]; + const numbers2 = [10, 20, 30, 40]; + const namesAndAges = ['John', 123, 'Trick', 32]; + const namesAndAges2 = ['John', 123, 'Trick', 32]; + const strings = ['eins', 'zwei', 'drei']; + const strings2 = ['eins', 'zwei', 'drei']; + console.log(numbers, numbers2, namesAndAges, namesAndAges2, strings, strings2); + } + { + const getFirstElement = (arr) => { + return arr.length > 0 ? arr[0] : void 0; + }; + const firstNumber = getFirstElement([1, 2, 3]); + const firstString = getFirstElement(['apple', 'banana', 'cherry']); + console.log(firstNumber); + console.log(firstString); + console.log(getFirstElement([])); + } + { + let pair = ['hello', 42]; + console.log(pair[0]); + console.log(pair[1]); + } + { + let Direction; + ((Direction2) => { + Direction2['Up'] = 'up'; + Direction2['Down'] = 'down'; + Direction2['Left'] = 'left'; + Direction2['Right'] = 'right'; + })(Direction || (Direction = {})); + let currentDirection = 'up'; /* Up */ + console.log(currentDirection); + currentDirection = 'down' /* Down */; + console.log(currentDirection); + let Status; + + ((Status2) => { + Status2['PENDING'] = 'pending'; + Status2['SUCCESS'] = 'success'; + Status2['ERROR'] = 'error'; + })(Status || (Status = {})); + + const status = 'success'; /* SUCCESS */ + console.log(status); + } + { + let Richtung; + ((Richtung2) => { + Richtung2[(Richtung2['Norden'] = 2)] = 'Norden'; + Richtung2[(Richtung2['Osten'] = 3)] = 'Osten'; + Richtung2[(Richtung2['Sueden'] = 4)] = 'Sueden'; + Richtung2[(Richtung2['Westen'] = 5)] = 'Westen'; + })(Richtung || (Richtung = {})); + + console.log(2 /* Norden */); + console.log(3 /* Osten */); + } + { + const numbers = { + true: 1, + two: 2, + three: 3, + }; + console.log(numbers); + } + { + const symbol1 = /* @__PURE__ */ Symbol('key'); + const symbol2 = /* @__PURE__ */ Symbol('key'); + const obj = { + [symbol1]: 'value1', + [symbol2]: 'value2', + }; + console.log(obj); + } +})(); diff --git a/05_typescript/unterricht/tag32/02_ts-objects/index.html b/05_typescript/unterricht/tag32/02_ts-objects/index.html new file mode 100644 index 0000000..6391b5f --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/index.html @@ -0,0 +1,27 @@ + + + + + + TypeScript - Grundlagen + + + + + + + + +
+
+

TypeScript - Grundlagen

+

+ TypeScript ist eine von Microsoft entwickelte Skriptsprache, die auf den Vorschlägen zum ECMAScript-6-Standard + basiert und statische Typisierung zu JavaScript hinzufügt. Sprachkonstrukte von TypeScript, wie Klassen, + Vererbung, Module und anonyme Funktionen, wurden auch in ECMAScript 6 übernommen. +

+ TypeScript Kreisdiagramm +
+
+ + diff --git a/05_typescript/unterricht/tag32/02_ts-objects/package-lock.json b/05_typescript/unterricht/tag32/02_ts-objects/package-lock.json new file mode 100644 index 0000000..93f16d2 --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/package-lock.json @@ -0,0 +1,499 @@ +{ + "name": "02_ts-functions", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "02_ts-functions", + "version": "1.0.0", + "devDependencies": { + "esbuild": "^0.28.2" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz", + "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz", + "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz", + "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz", + "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz", + "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz", + "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz", + "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz", + "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz", + "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz", + "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz", + "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz", + "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz", + "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz", + "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz", + "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz", + "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz", + "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-arm64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz", + "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz", + "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz", + "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz", + "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openharmony-arm64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz", + "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz", + "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz", + "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz", + "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz", + "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz", + "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.28.2", + "@esbuild/android-arm": "0.28.2", + "@esbuild/android-arm64": "0.28.2", + "@esbuild/android-x64": "0.28.2", + "@esbuild/darwin-arm64": "0.28.2", + "@esbuild/darwin-x64": "0.28.2", + "@esbuild/freebsd-arm64": "0.28.2", + "@esbuild/freebsd-x64": "0.28.2", + "@esbuild/linux-arm": "0.28.2", + "@esbuild/linux-arm64": "0.28.2", + "@esbuild/linux-ia32": "0.28.2", + "@esbuild/linux-loong64": "0.28.2", + "@esbuild/linux-mips64el": "0.28.2", + "@esbuild/linux-ppc64": "0.28.2", + "@esbuild/linux-riscv64": "0.28.2", + "@esbuild/linux-s390x": "0.28.2", + "@esbuild/linux-x64": "0.28.2", + "@esbuild/netbsd-arm64": "0.28.2", + "@esbuild/netbsd-x64": "0.28.2", + "@esbuild/openbsd-arm64": "0.28.2", + "@esbuild/openbsd-x64": "0.28.2", + "@esbuild/openharmony-arm64": "0.28.2", + "@esbuild/sunos-x64": "0.28.2", + "@esbuild/win32-arm64": "0.28.2", + "@esbuild/win32-ia32": "0.28.2", + "@esbuild/win32-x64": "0.28.2" + } + } + } +} diff --git a/05_typescript/unterricht/tag32/02_ts-objects/package.json b/05_typescript/unterricht/tag32/02_ts-objects/package.json new file mode 100644 index 0000000..3564f4e --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/package.json @@ -0,0 +1,14 @@ +{ + "name": "ts-objects", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "ts": "npx esbuild \"src/*.ts\" --watch --bundle --outdir=\"assets/js\" --loader:.ts=ts" + }, + "keywords": [], + "type": "module", + "devDependencies": { + "esbuild": "^0.28.2" + } +} diff --git a/05_typescript/unterricht/tag32/02_ts-objects/src/01_obj-props-readonly.ts b/05_typescript/unterricht/tag32/02_ts-objects/src/01_obj-props-readonly.ts new file mode 100644 index 0000000..8266eaa --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/src/01_obj-props-readonly.ts @@ -0,0 +1,116 @@ +// Property Modifiers +/* +In TypeScript kannst du die Modifizierer für Eigenschaften in Objekten verwenden, um die Zugriffsrechte und Verhaltensweisen zu steuern. +*/ + +{ + let person: { name: string; age: number } = { + name: 'Alice', + age: 30, + }; + + // RECOMMENDATION - use type or interface for object annotations + type Person = { + name: string; + age: number; + }; + + let person2: Person = { + name: 'Alice', + age: 30, + }; + + // person.lastName // Property 'lastName' does not exist on type '{ name: string; age: number; }'. + console.table(person); + console.table(person2); + + // ------------------------------------------------------------ + + // type Book = { + interface Book { + title: string; + author?: string; // optional operator (?) + pages?: number; + } + + const book1: Book = { title: 'The Great Gatsby' }; // Valid: no author or pages + const book2: Book = { title: '1984', author: 'George Orwell' }; // Valid: no pages + const book3: Book = { + title: 'Moby Dick', + author: 'Herman Melville', + pages: 635, + }; // Valid + + console.log(book1); + console.log(book2); + console.log(book3); + + // ------------------------------ + // ?? operator => nullish coalescing (2021) + const printBookInfo = (book: Book) => { + const author = book.author ?? 'Unknown'; // Use "Unknown" if author is undefined + const author2 = book.author ? book.author : 'Unknown'; // Use "Unknown" if author is undefined + const pages = book.pages ?? 'Page count not available'; + console.log(`Title: ${book.title}, Author: ${author}, Pages: ${pages}`); + }; + + // destructuring with defaults + const printBookInfoWithDefaults = ({ title, author = 'Unknown', pages = 1 }: Book) => { + console.log(`Title: ${title}, Author: ${author}, Pages: ${pages}`); + }; + + printBookInfoWithDefaults({ title: 'To Kill a Mockingbird' }); + // => Title: To Kill a Mockingbird, Author: Unknown, Pages: 1 + + printBookInfo(book3); + // => Title: Moby Dick, Author: Herman Melville, Pages: 635 + printBookInfo(book2); + // => Title: 1984, Author: George Orwell, Pages: Page count not available +} +// ---------------------- +// Readonly Properties +{ + interface Person { + readonly firstName: string; + readonly lastName: string; + age: number; + } + const person: Person = { firstName: 'John', lastName: 'Doe', age: 30 }; + + person.age = 31; // This works: age can be updated + + // The following lines will cause TypeScript errors + // person.firstName = "Jane"; // Error: Cannot assign to 'firstName' because it is a read-only property + // person.lastName = "Smith"; // Error: Cannot assign to 'lastName' because it is a read-only property + + interface Employee { + readonly id: number; + details: { + position: string; + salary: number; + }; + } + + const employee: Employee = { + id: 101, + details: { position: 'Developer', salary: 50000 }, + }; + + employee.details.salary = 55000; // This works: you can modify the 'details' object + + // The following will cause an error + // employee.id = 102; // Error: Cannot assign to 'id' because it is a read-only property + + interface Config { + readonly apiKey?: string; + readonly timeout?: number; + } + + const config: Config = { apiKey: 'abc123', timeout: 5000 }; + + // export default config; // außerhalb von codeblöcken + + // The following will cause errors because both properties are readonly + // config.apiKey = "newKey"; // Error: Cannot assign to 'apiKey' because it is a read-only property + // config.timeout = 3000; // Error: Cannot assign to 'timeout' because it is a read-only property +} diff --git a/05_typescript/unterricht/tag32/02_ts-objects/src/02_excess-property-check.ts b/05_typescript/unterricht/tag32/02_ts-objects/src/02_excess-property-check.ts new file mode 100644 index 0000000..eb8785d --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/src/02_excess-property-check.ts @@ -0,0 +1,29 @@ +// Excess Property Checks +/* +Wenn du ein Objekt in TypeScript definierst, musst du sicherstellen, dass das Objekt genau der erwarteten Struktur entspricht. TypeScript prüft nicht nur, ob alle erforderlichen Eigenschaften vorhanden sind, sondern auch, dass keine zusätzlichen, unbeabsichtigten Eigenschaften enthalten sind. Diese Funktion wird als "Excess Property Checks" bezeichnet. +*/ + +{ + // type Car = { + interface Car { + make: string; + model: string; + year: number; + } + + const myCar: Car = { make: 'Toyota', model: 'Camry', year: 2020 }; + // const myCar2: Car = { make: "Honda", model: "Accord", year: 2022, color: "blue" }; + // => TypeScript error: Object literal may only specify known properties, and 'color' does not exist in type 'Car'. + + console.log(myCar); + + const printCarDetails = (car: Car) => { + const { make, model, year } = car; + + console.log(`Car Make: ${car.make}, Model: ${car.model}, Year: ${car.year}`); + }; + + printCarDetails({ make: 'Tesla', model: 'Model 3', year: 2021 }); + // printCarDetails({ make: "Tesla", model: "Model 3", year: 2021, color: "black" }); + // => TypeScript error: Object literal may only specify known properties, and 'color' does not exist in type 'Car'. +} diff --git a/05_typescript/unterricht/tag32/02_ts-objects/src/03_obj-extends.ts b/05_typescript/unterricht/tag32/02_ts-objects/src/03_obj-extends.ts new file mode 100644 index 0000000..d636143 --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/src/03_obj-extends.ts @@ -0,0 +1,57 @@ +// Extending Types +/* +In TypeScript kannst du bestehende Typen erweitern, um speziellere Versionen von ihnen zu erstellen. Mit diesem Ansatz kannst du bestehende Typstrukturen wiederverwenden und erweitern, ohne Code zu duplizieren. +*/ + +{ + interface Product { + readonly id: number; + name: string; + price: number; + } + + interface Electronics extends Product { + brand: string; + warranty: number; // warranty in months + } + + interface Furniture extends Product { + material: string; + dimensions: { length: number; width: number; height: number }; + } + + interface Clothing extends Product { + size: string; + color: string; + } + + const laptop: Electronics = { + id: 1, + name: 'Gaming Laptop', + price: 1500, + brand: 'TechBrand', + warranty: 24, + }; + + const chair: Furniture = { + id: 2, + name: 'Office Chair', + price: 200, + material: 'Leather', + dimensions: { length: 60, width: 50, height: 110 }, + }; + + // chair.id = 3; // readonly Cannot assign to 'id' because it is a read-only property. + + const tshirt: Clothing = { + id: 2, + name: 'T-Shirt', + price: 20, + size: 'M', + color: 'Red', + }; + + console.log(laptop); // => { id: 1, name: 'Gaming Laptop', price: 1500, brand: 'TechBrand', warranty: 24 } + console.log(chair); // => { id: 2, name: 'Office Chair', price: 200, material: 'Leather', dimensions: { length: 60, width: 50, height: 110 } } + console.log(tshirt); // => { id: 2, name: 'T-Shirt', price: 20, size: 'M', color: 'Red' } +} diff --git a/05_typescript/unterricht/tag32/02_ts-objects/src/04_more-types.ts b/05_typescript/unterricht/tag32/02_ts-objects/src/04_more-types.ts new file mode 100644 index 0000000..4176942 --- /dev/null +++ b/05_typescript/unterricht/tag32/02_ts-objects/src/04_more-types.ts @@ -0,0 +1,107 @@ +// Object (special) Types + +// Der Array-Typ +{ + const numbers: Array = [10, 20, 30, 40]; + const numbers2: number[] = [10, 20, 30, 40]; + + const namesAndAges: Array = ['John', 123, 'Trick', 32]; + const namesAndAges2: (number | string)[] = ['John', 123, 'Trick', 32]; + + const strings: Array = ['eins', 'zwei', 'drei']; + const strings2: string[] = ['eins', 'zwei', 'drei']; + + console.log(numbers, numbers2, namesAndAges, namesAndAges2, strings, strings2); +} + +// generische Funktionen +{ + const getFirstElement = (arr: Array): T | undefined => { + return arr.length > 0 ? arr[0] : undefined; + }; + + const firstNumber = getFirstElement([1, 2, 3]); // TypeScript infers T as number + const firstString = getFirstElement(['apple', 'banana', 'cherry']); // TypeScript infers T as string + + console.log(firstNumber); // => 1 + console.log(firstString); // => "apple" + console.log(getFirstElement([])); // => undefined +} + +// tuple Type +{ + type StringNumberPair = [string, number]; + + let pair: StringNumberPair = ['hello', 42]; + + console.log(pair[0]); // => "hello" + console.log(pair[1]); // => 42 +} + +// enum Type +{ + enum Direction { + Up = 'up', + Down = 'down', + Left = 'left', + Right = 'right', + } + + let currentDirection = Direction.Up; + + console.log(currentDirection); // => 'up' + + currentDirection = Direction.Down; + console.log(currentDirection); // => 'down' + + enum Status { + PENDING = 'pending', + SUCCESS = 'success', + ERROR = 'error', + } + + const status = Status.SUCCESS; + + console.log(status); // => 'success' +} + +{ + enum Richtung { + Norden = 2, + Osten, + Sueden, + Westen, + } + + console.log(Richtung.Norden); //=> 2 + console.log(Richtung.Osten); //=> 3 +} + +// Record Type +{ + type StringNumberMap = Record; + + const numbers: StringNumberMap = { + true: 1, + two: 2, + three: 3, + }; + + console.log(numbers); // => { one: 1, two: 2, three: 3 } +} + +// Symbol Type + +{ + const symbol1: symbol = Symbol('key'); + const symbol2: symbol = Symbol('key'); + + // console.log(symbol1 === symbol2); // => false => because they are different symbols + + const obj = { + [symbol1]: 'value1', + [symbol2]: 'value2', + }; + + console.log(obj); // => { [Symbol(key)]: 'value1', [Symbol(key)]: 'value2' } +}