05_typescript/uebungen/u11_literals/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 11: Arbeiten mit Literal Types in TypeScript</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/bundle.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <div class="alert alert-primary">
+          <h2>Übung 11: Arbeiten mit Literal Types in TypeScript</h2>
+          <p>
+            In dieser Übung übst du die Verwendung von Literal Types in TypeScript, um spezifischere und kontrollierte
+            Typen für deine Variablen und Funktionsparameter zu erstellen. Du wirst Funktionen definieren, die bestimmte
+            String-, numerische und boolesche Literal Types akzeptieren und sicherstellen, dass nur die erlaubten Werte
+            an diese Funktionen übergeben werden können.
+          </p>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

05_typescript/uebungen/u11_literals/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "11_literals",
+  "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",
+  "devDependencies": {
+    "esbuild": "^0.28.2"
+  }
+}

05_typescript/uebungen/u11_literals/src/main.ts

@@ -0,0 +1,30 @@
+// [ ] Step 1: Create a function 'setStatus' that accepts a string literal type parameter 'status'.
+// - The 'status' can only be "success", "error", or "loading".
+// - The function should log the status to the console.
+
+// [ ] Step 2: Create a function 'rateExperience' that accepts a numeric literal type parameter 'rating'.
+// - The 'rating' can only be 1, 2, 3, 4, or 5.
+// - The function should return a message indicating the rating.
+
+// [ ] Step 3: Create a function 'togglePower' that accepts a boolean literal type parameter 'state'.
+// - The 'state' can only be true or false.
+// - The function should return a message indicating whether the power is ON or OFF.
+
+// [ ] Step 4: Test the functions with valid and invalid values to ensure the correct behavior and type safety.
+
+// Test cases (students should verify that these work as expected)
+
+// Test 'setStatus' function
+setStatus('success'); // OK
+setStatus('error'); // OK
+setStatus('complete'); // Error: Argument of type '"complete"' is not assignable to parameter of type '"success" | "error" | "loading"'.
+
+// Test 'rateExperience' function
+console.log(rateExperience(5)); // => "You rated the experience as 5"
+console.log(rateExperience(3)); // => "You rated the experience as 3"
+console.log(rateExperience(6)); // Error: Argument of type '6' is not assignable to parameter of type '1 | 2 | 3 | 4 | 5'.
+
+// Test 'togglePower' function
+console.log(togglePower(true)); // => "Power is ON"
+console.log(togglePower(false)); // => "Power is OFF"
+console.log(togglePower('on')); // Error: Argument of type '"on"' is not assignable to parameter of type 'true | false'.