diff --git a/05_typescript/linksammlung.md b/05_typescript/linksammlung.md index 7e1e5da..8e72a5f 100644 --- a/05_typescript/linksammlung.md +++ b/05_typescript/linksammlung.md @@ -68,6 +68,18 @@ - [SVG Flaggen](https://hampusborgos.github.io/country-flags/) - [Flagicons](https://flagicons.lipis.dev/) +## Terminals + +- [iterm - Unix](https://iterm2.com/) - RECOMMENDED +- [Ghostty - Unix](https://ghostty.org/) +- [Warp](https://www.warp.dev/) - ALL +- [Hyper.js](https://hyper.is/) - ALL +- [Ubuntu WSL](https://ubuntu.com/wsl) - WIN | UNIX +- [Windows Terminal](https://apps.microsoft.com/detail/9n0dx20hk701?icid=CNavAppsWindowsApps&hl=de-DE&gl=DE) - RECOMMENDED (WIN) +- [Git Bash](https://git-scm.com/) +- [Cmdr Terminal mit Bash](https://cmder.app/) + + ## Blog/ Techartikelseiten - [Dev.to](https://dev.to/) diff --git a/05_typescript/uebungen/u12_type-guard/assets/js/bundle.js b/05_typescript/uebungen/u12_type-guard/assets/js/bundle.js new file mode 100644 index 0000000..b149e62 --- /dev/null +++ b/05_typescript/uebungen/u12_type-guard/assets/js/bundle.js @@ -0,0 +1,32 @@ +(() => { + var __getOwnPropNames = Object.getOwnPropertyNames; + var __commonJS = (cb, mod) => function __require() { + try { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + } catch (e) { + throw mod = 0, e; + } + }; + + // src/main.ts + var require_main = __commonJS({ + "src/main.ts"() { + var formatInput = (input) => { + if (typeof input === "number") { + return String(input * 100); + } else if (typeof input === "string") { + return input.toLowerCase(); + } else if (typeof input === "boolean") { + return input ? "Yes" : "No"; + } + }; + console.log(formatInput(0.5)); + console.log(formatInput(12)); + console.log(formatInput("Hello")); + console.log(formatInput("WORLD")); + console.log(formatInput(true)); + console.log(formatInput(false)); + } + }); + require_main(); +})(); diff --git a/05_typescript/uebungen/u12_type-guard/src/main.ts b/05_typescript/uebungen/u12_type-guard/src/main.ts index 328b727..d3d6699 100644 --- a/05_typescript/uebungen/u12_type-guard/src/main.ts +++ b/05_typescript/uebungen/u12_type-guard/src/main.ts @@ -1,3 +1,33 @@ +const formatInput = (input: number | string | boolean) => { + if (typeof input === 'number') { + return String(input * 100); + } else if (typeof input === 'string') { + return input.toLowerCase(); + } else if (typeof input === 'boolean') { + return input ? 'Yes' : 'No'; + } +}; + +const formatInput2 = (input: number | string | boolean) => { + let sReturn; + + switch (typeof input) { + case 'number': + sReturn = input * 100; + break; + case 'string': + sReturn = input.toLowerCase(); + break; + case 'boolean': + sReturn = input ? 'Yes' : 'No'; + break; + default: + // nothing + } + + return `formatierter string ${sReturn}`; +}; + console.log(formatInput(0.5)); // => "50" console.log(formatInput(12)); // => "1200" console.log(formatInput('Hello')); // => "hello" diff --git a/05_typescript/uebungen/u13_narrowing/assets/js/bundle.js b/05_typescript/uebungen/u13_narrowing/assets/js/bundle.js new file mode 100644 index 0000000..e40fd2b --- /dev/null +++ b/05_typescript/uebungen/u13_narrowing/assets/js/bundle.js @@ -0,0 +1,29 @@ +(() => { + var __getOwnPropNames = Object.getOwnPropertyNames; + var __commonJS = (cb, mod) => function __require() { + try { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + } catch (e) { + throw mod = 0, e; + } + }; + + // src/main.ts + var require_main = __commonJS({ + "src/main.ts"() { + var displayStatus = (status) => { + if (status) { + return "Status: " + status; + } + return "No status available."; + return status ? `Status: ${status}` : "No status available."; + }; + console.log(displayStatus("Active")); + console.log(displayStatus("Pending")); + console.log(displayStatus(null)); + console.log(displayStatus(void 0)); + console.log(displayStatus("")); + } + }); + require_main(); +})(); diff --git a/05_typescript/uebungen/u13_narrowing/src/main.ts b/05_typescript/uebungen/u13_narrowing/src/main.ts index 4b961fb..c43bcf1 100644 --- a/05_typescript/uebungen/u13_narrowing/src/main.ts +++ b/05_typescript/uebungen/u13_narrowing/src/main.ts @@ -1,17 +1,22 @@ +// Übung 13: Implementierung der Truthiness Narrowing in einer Funktion +// Schreibe eine TypeScript-Funktion namens displayStatus, die einen Parameter status akzeptiert, der ein string, null oder undefined sein kann. Die Funktion sollte: + +// Verwende die Truthiness Narrowing, um zu prüfen, ob der Status truthy oder falsch ist. +const displayStatus = (status: string | null | undefined): string => { + // Wenn status truthy ist, wird die Zeichenfolge "Status: ", verkettet mit Status. + if (status) { + return 'Status: ' + status; + } + + // Wenn status fehlerhaft ist, wird die Zeichenfolge "No status available." zurückgegeben. + return 'No status available.'; + + return status ? `Status: ${status}` : 'No status available.'; +}; + +// Kopiere den Code unten und füge ihn ein, um deine Implementierung zu testen. console.log(displayStatus('Active')); // => "Status: Active" console.log(displayStatus('Pending')); // => "Status: Pending" console.log(displayStatus(null)); // => "No status available." console.log(displayStatus(undefined)); // => "No status available." console.log(displayStatus('')); // => "No status available." - -// Übung 13: Implementierung der Truthiness Narrowing in einer Funktion -// Schreibe eine TypeScript-Funktion namens displayStatus, die einen Parameter status akzeptiert, der ein string, null oder undefined sein kann. Die Funktion sollte: - -// Wenn status truthy ist, wird die Zeichenfolge "Status: ", verkettet mit Status. - -// Wenn status fehlerhaft ist, wird die Zeichenfolge "No status available." zurückgegeben. - -// Verwende die Truthiness Narrowing, um zu prüfen, ob der Status truthy oder falsch ist. - -// Kopiere den Code unten und füge ihn ein, um deine Implementierung zu testen. -// // Kopiere den Code unten und füge ihn ein, um deine Implementierung zu testen. diff --git a/05_typescript/uebungen/u14_narrowing-equality/assets/js/bundle.js b/05_typescript/uebungen/u14_narrowing-equality/assets/js/bundle.js new file mode 100644 index 0000000..2298c5e --- /dev/null +++ b/05_typescript/uebungen/u14_narrowing-equality/assets/js/bundle.js @@ -0,0 +1,50 @@ +(() => { + var __getOwnPropNames = Object.getOwnPropertyNames; + var __commonJS = (cb, mod) => function __require() { + try { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + } catch (e) { + throw mod = 0, e; + } + }; + + // src/main.ts + var require_main = __commonJS({ + "src/main.ts"() { + var analyzeInput = (input) => { + if (input === true) { + return "Input is exactly true"; + } else if (input === false) { + return "Input is exactly false"; + } else if (input === 0) { + return "Input is zero"; + } else if (typeof input === "number") { + if (input > 0) { + return "Input is a positive number"; + } else if (input < 0) { + return "Input is a negative number"; + } else { + return "Unknown input"; + } + } else if (input === "hello") { + return "Input is the string 'hello'"; + } else if (typeof input === "string") { + return "Input is another string"; + } else { + return "Unknown input"; + } + }; + console.log(analyzeInput(true)); + console.log(analyzeInput(false)); + console.log(analyzeInput(0)); + console.log(analyzeInput(42)); + console.log(analyzeInput(-7)); + console.log(analyzeInput("hello")); + console.log(analyzeInput("world")); + console.log(analyzeInput("")); + console.log(analyzeInput(void 0)); + console.log(analyzeInput(null)); + } + }); + require_main(); +})(); diff --git a/05_typescript/uebungen/u14_narrowing-equality/src/main.ts b/05_typescript/uebungen/u14_narrowing-equality/src/main.ts index caeee4d..1a75fec 100644 --- a/05_typescript/uebungen/u14_narrowing-equality/src/main.ts +++ b/05_typescript/uebungen/u14_narrowing-equality/src/main.ts @@ -1,7 +1,55 @@ const analyzeInput = (input: string | number | boolean): string => { - // Your code here + if (input === true) { + return 'Input is exactly true'; + } else if (input === false) { + return 'Input is exactly false'; + } else if (input === 0) { + return 'Input is zero'; + } else if (typeof input === 'number') { + if (input > 0) { + return 'Input is a positive number'; + } else if (input < 0) { + return 'Input is a negative number'; + } else { + return 'Unknown input'; + } + } else if (input === 'hello') { + return "Input is the string 'hello'"; + } else if (typeof input === 'string') { + return 'Input is another string'; + } else { + return 'Unknown input'; + } }; +const analyzeInput2 = (input: string | number | boolean): string => { + // SESE + let sReturn; + + switch (typeof input) { + case 'boolean': + sReturn = `Input is exactly ${input ? 'true' : 'false'}`; + break; + case 'number': + if (input === 0) { + sReturn = 'Input is zero'; + } else { + sReturn = `Input is a ${input > 0 ? 'positive' : 'negative'} number`; + } + break; + case 'string': + if (input === 'hello') { + sReturn = "Input is the string 'hello'"; + } else { + sReturn = 'Input is another string'; + } + break; + default: + sReturn = 'Unknown input'; + } + + return sReturn; +}; console.log(analyzeInput(true)); // => "Input is exactly true" console.log(analyzeInput(false)); // => "Input is exactly false" console.log(analyzeInput(0)); // => "Input is zero" @@ -10,8 +58,8 @@ console.log(analyzeInput(-7)); // => "Input is a negative number" console.log(analyzeInput('hello')); // => "Input is the string 'hello'" console.log(analyzeInput('world')); // => "Input is another string" console.log(analyzeInput('')); // => "Input is another string" -console.log(analyzeInput(undefined)); // => "Unknown input" -console.log(analyzeInput(null)); // => "Unknown input" +// console.log(analyzeInput(undefined)); // => "Unknown input" +// console.log(analyzeInput(null)); // => "Unknown input" // Übung 14: Equality Narrowing in einer Funktion implementieren // Vervollständige die Funktion analyzeInput so, dass sie zurückgegeben wird: diff --git a/05_typescript/uebungen/u15_narrowing-in-operator/src/main.ts b/05_typescript/uebungen/u15_narrowing-in-operator/src/main.ts index 9bdb347..63abde6 100644 --- a/05_typescript/uebungen/u15_narrowing-in-operator/src/main.ts +++ b/05_typescript/uebungen/u15_narrowing-in-operator/src/main.ts @@ -1,13 +1,28 @@ type Guitar = { strum: () => void }; type Piano = { pressKeys: () => void }; -const play = (instrument: Guitar | Piano) => { - // Your code here +const play = (instrument: Guitar | Piano): void => { + // Die Eigenschaft "strum" grenzt den Typ auf Guitar ein. + if ('strum' in instrument) { + instrument.strum(); + } else { + instrument.pressKeys(); + } }; // Create guitar instance +const guitar: Guitar = { + strum: () => { + console.log('Strumming the guitar!'); + }, +}; // Create piano instance +const piano: Piano = { + pressKeys: () => { + console.log('Pressing piano keys!'); + }, +}; // Call functions play(guitar); // => "Strumming the guitar!" diff --git a/05_typescript/uebungen/u16_narrowing-zuweisung/assets/js/bundle.js b/05_typescript/uebungen/u16_narrowing-zuweisung/assets/js/bundle.js new file mode 100644 index 0000000..3e823b9 --- /dev/null +++ b/05_typescript/uebungen/u16_narrowing-zuweisung/assets/js/bundle.js @@ -0,0 +1,60 @@ +(() => { + var __getOwnPropNames = Object.getOwnPropertyNames; + var __commonJS = (cb, mod) => function __require() { + try { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + } catch (e) { + throw mod = 0, e; + } + }; + + // src/main.ts + var require_main = __commonJS({ + "src/main.ts"() { + { + const handleValue2 = (value) => { + if (typeof value === "string") { + console.log(value.toUpperCase()); + } else if (typeof value === "number") { + console.log(value * 2); + } else if (typeof value === "boolean") { + console.log(value ? "It's true!" : "It's false!"); + } + }; + handleValue2("hello"); + handleValue2("TypeScript"); + handleValue2(21); + handleValue2(50); + handleValue2(false); + handleValue2(true); + } + { + let handleValue2 = function(value) { + let mReturn; + switch (typeof value) { + case "string": + mReturn = value.toUpperCase(); + break; + case "number": + mReturn = value * 2; + break; + case "boolean": + mReturn = `It\xB4s ${String(value)}!`; + break; + default: + mReturn = "Something went wrong..."; + } + }; + handleValue = handleValue2; + handleValue2("hello"); + handleValue2("TypeScript"); + handleValue2(21); + handleValue2(50); + handleValue2(false); + handleValue2(true); + } + var handleValue; + } + }); + require_main(); +})(); diff --git a/05_typescript/uebungen/u16_narrowing-zuweisung/src/main.ts b/05_typescript/uebungen/u16_narrowing-zuweisung/src/main.ts index 3c73e04..bc611f7 100644 --- a/05_typescript/uebungen/u16_narrowing-zuweisung/src/main.ts +++ b/05_typescript/uebungen/u16_narrowing-zuweisung/src/main.ts @@ -1,10 +1,51 @@ -// Test handleValue with different inputs -handleValue('hello'); // => "HELLO" -handleValue('TypeScript'); // => "TYPESCRIPT" -handleValue(21); // => 42 -handleValue(50); // => 100 -handleValue(false); // => "It's false!" -handleValue(true); // => "It's true!" +{ + const handleValue = (value: string | number | boolean): void => { + if (typeof value === 'string') { + console.log(value.toUpperCase()); + } else if (typeof value === 'number') { + console.log(value * 2); + } else if (typeof value === 'boolean') { + console.log(value ? "It's true!" : "It's false!"); + } + }; + + handleValue('hello'); // => "HELLO" + handleValue('TypeScript'); // => "TYPESCRIPT" + handleValue(21); // => 42 + handleValue(50); // => 100 + handleValue(false); // => "It's false!" + handleValue(true); // => "It's true!" +} + +{ + function handleValue(value: string | number | boolean) { + let mReturn; + + switch (typeof value) { + case 'string': + mReturn = value.toUpperCase(); + break; + case 'number': + mReturn = value * 2; + break; + case 'boolean': + mReturn = `It's ${String(value)}!`; + break; + default: + // nothing + mReturn = 'Something went wrong...'; + } + console.log(mReturn); + return mReturn; + } + + handleValue('hello'); // => "HELLO" + handleValue('TypeScript'); // => "TYPESCRIPT" + handleValue(21); // => 42 + handleValue(50); // => 100 + handleValue(false); // => "It's false!" + handleValue(true); // => "It's true!" +} // Übung 16: Type Narrowing mit Zuweisungsoperationen @@ -14,9 +55,9 @@ handleValue(true); // => "It's true!" // Anweisungen: -// 1Schreibe eine Funktion handleValue, die einen string | number | boolean Parameter annimmt und je nach Typ des Arguments ein anderes Verhalten protokolliert. +// 1. Schreibe eine Funktion handleValue, die einen string | number | boolean Parameter annimmt und je nach Typ des Arguments ein anderes Verhalten protokolliert. -// Wenn es eine string ist, protokolliere die Version in Großbuchstaben. +//- [ ] Wenn es eine string ist, protokolliere die Version in Großbuchstaben. // Wenn es sich um eine number handelt, logge ihren Wert multipliziert mit 2. diff --git a/05_typescript/uebungen/u17_narrowing-kontrollfluss/assets/js/bundle.js b/05_typescript/uebungen/u17_narrowing-kontrollfluss/assets/js/bundle.js new file mode 100644 index 0000000..efd85bc --- /dev/null +++ b/05_typescript/uebungen/u17_narrowing-kontrollfluss/assets/js/bundle.js @@ -0,0 +1,35 @@ +(() => { + var __getOwnPropNames = Object.getOwnPropertyNames; + var __commonJS = (cb, mod) => function __require() { + try { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + } catch (e) { + throw mod = 0, e; + } + }; + + // src/main.ts + var require_main = __commonJS({ + "src/main.ts"() { + { + const handleInput = (value) => { + if (value === null) { + return "No value provided"; + } + if (typeof value === "boolean") { + return value ? "True" : "False"; + } + if (typeof value === "string") { + return value.toUpperCase(); + } + return value * value; + }; + console.log(handleInput(null)); + console.log(handleInput(true)); + console.log(handleInput("hello")); + console.log(handleInput(5)); + } + } + }); + require_main(); +})(); diff --git a/05_typescript/uebungen/u17_narrowing-kontrollfluss/src/main.ts b/05_typescript/uebungen/u17_narrowing-kontrollfluss/src/main.ts index 9daf82d..057ad96 100644 --- a/05_typescript/uebungen/u17_narrowing-kontrollfluss/src/main.ts +++ b/05_typescript/uebungen/u17_narrowing-kontrollfluss/src/main.ts @@ -1,8 +1,26 @@ -// Test cases -console.log(handleInput(null)); // => "No value provided" -console.log(handleInput(true)); // => "True" -console.log(handleInput('hello')); // => "HELLO" -console.log(handleInput(5)); // => 25 +{ + const handleInput = (value: string | number | boolean | null): string | number => { + if (value === null) { + return 'No value provided'; + } + + if (typeof value === 'boolean') { + return value ? 'True' : 'False'; + } + + if (typeof value === 'string') { + return value.toUpperCase(); + } + + return value * value; // TypeScript knows this is a number + }; + + // Test cases + console.log(handleInput(null)); // => "No value provided" + console.log(handleInput(true)); // => "True" + console.log(handleInput('hello')); // => "HELLO" + console.log(handleInput(5)); // => 25 +} // Übung 17: Kontrollflussanalyse und Type Narrowing diff --git a/05_typescript/uebungen/u18_type-predicates/assets/js/bundle.js b/05_typescript/uebungen/u18_type-predicates/assets/js/bundle.js new file mode 100644 index 0000000..29d72a1 --- /dev/null +++ b/05_typescript/uebungen/u18_type-predicates/assets/js/bundle.js @@ -0,0 +1,58 @@ +(() => { + var __getOwnPropNames = Object.getOwnPropertyNames; + var __commonJS = (cb, mod) => function __require() { + try { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + } catch (e) { + throw mod = 0, e; + } + }; + + // src/main.ts + var require_main = __commonJS({ + "src/main.ts"() { + function isCar(vehicle) { + return typeof vehicle.drive !== "undefined"; + } + function handleVehicle(vehicle) { + if (isCar(vehicle)) { + vehicle.drive(); + } else { + vehicle.loadCargo(); + } + } + var vehicles = [ + { + drive() { + console.log("Car driving"); + } + }, + { + drive() { + console.log("Car driving"); + } + }, + { + loadCargo() { + console.log("Truck loading cargo"); + } + }, + { + loadCargo() { + console.log("Truck loading cargo"); + } + }, + { + drive() { + console.log("Car driving"); + } + } + ]; + var cars = vehicles.filter(isCar); + cars.forEach((car) => car.drive()); + handleVehicle({ drive: () => console.log("Car driving") }); + handleVehicle({ loadCargo: () => console.log("Truck loading cargo") }); + } + }); + require_main(); +})(); diff --git a/05_typescript/uebungen/u18_type-predicates/index.html b/05_typescript/uebungen/u18_type-predicates/index.html index 6da5be5..f3dd39c 100644 --- a/05_typescript/uebungen/u18_type-predicates/index.html +++ b/05_typescript/uebungen/u18_type-predicates/index.html @@ -1,4 +1,4 @@ - +
@@ -29,7 +29,7 @@