diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/09_type-inference.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/09_type-inference.ts new file mode 100644 index 0000000..37c3cd1 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/09_type-inference.ts @@ -0,0 +1,44 @@ +// Type inference - automatisches erkennen des Datentyps bei Zuweisung +{ + let greeting = 'Hello, world!'; + + // Type 'number' is not assignable to type 'string'. + // greeting = 123; + + greeting = 'Hello TS!'; + + let count = 10; // inferred as number + let isCompleted = true; // inferred as boolean + let names = ['Alice', 'Bob', 'Charlie']; // inferred as string[] + + const isSmoking = true; // inferred as literal true + const isSmoking2: true = true; + const houseNumber = 33; // inferred as literal 33 + const houseNumber2: 33 = 33; + + console.log({ greeting, count, isCompleted, names }); + + let randomValue; // inferred as `any` + let randomVal: any; // explicit type annotation + + randomValue = 'hello'; + randomVal = 'hello'; + randomValue = 42; + randomVal = 42; + randomValue = true; + + let isGreetingText: string | string[] = 'Hello'; //explicit type annotation + isGreetingText = ['Hello', 'Ho']; + + let namesInUpperCase = names.map((name) /* inferred as string */ => { + return name.toUpperCase(); + }); // inferred as string[] + + let blub = String() || Boolean(); // inferred as string | boolean + let blub2: string | boolean = String() || Boolean(); // explicit + + blub = false; + blub = 'blub'; + + console.log(namesInUpperCase.join(', ')); +} diff --git a/05_typescript/unterricht/tag29/01_ts-types/assets/img/Understand-Typescript.jpg b/05_typescript/unterricht/tag29/01_ts-types/assets/img/Understand-Typescript.jpg new file mode 100644 index 0000000..c3a5d16 Binary files /dev/null and b/05_typescript/unterricht/tag29/01_ts-types/assets/img/Understand-Typescript.jpg differ diff --git a/05_typescript/unterricht/tag29/01_ts-types/assets/js/01_primitive-types.js b/05_typescript/unterricht/tag29/01_ts-types/assets/js/01_primitive-types.js new file mode 100644 index 0000000..3928b8b --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/assets/js/01_primitive-types.js @@ -0,0 +1,48 @@ +(() => { + // src/01_primitive-types.ts + { + let greeting = "Welcome to TypeScript"; + const greeting2 = "Welcome to TypeScript"; + let wholeNumber = 100; + let decimalNumber = 19.99; + let negativeNumber = -19.99; + let isLearning = true; + let age = 42; + let age2 = 30; + let scores = [10, 20, 30, 40]; + let moreScores = [50, 60, 70]; + let listItems = Array.from(document.querySelectorAll("li")); + let listItems2 = document.querySelectorAll("li"); + console.log({ listItems, listItems2, scores, moreScores }); + console.log({ greeting, greeting2, wholeNumber, decimalNumber, negativeNumber, isLearning, age, age2 }); + let randomValue = 42; + randomValue = "Now I'm a string!"; + randomValue = { name: "TypeScript" }; + const $on = (elOrAr, type, fn) => { + if (Array.isArray(elOrAr)) { + elOrAr.forEach((ae) => $on(ae, type, fn)); + } else { + elOrAr.addEventListener(type, fn); + } + return elOrAr; + }; + const $ = (qs) => document.querySelector(qs); + const $$ = (qs) => Array.from(document.querySelectorAll(qs)); + $on($("h1"), "click", (e) => { + console.log("click"); + }); + $on($$("ul li"), "click", (e) => { + console.log("click"); + }); + const multiply = (a, b) => { + return a * b; + }; + let bigNumber = 9007199254740992n; + console.log(Number.MAX_SAFE_INTEGER); + console.log(bigNumber); + const id = /* @__PURE__ */ Symbol(123); + const id2 = /* @__PURE__ */ Symbol(123); + console.log(id === id2); + console.log(multiply(2, 4)); + } +})(); diff --git a/05_typescript/unterricht/tag29/01_ts-types/assets/js/02_fetch-example.js b/05_typescript/unterricht/tag29/01_ts-types/assets/js/02_fetch-example.js new file mode 100644 index 0000000..be7c964 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/assets/js/02_fetch-example.js @@ -0,0 +1,36 @@ +(() => { + // src/02_fetch-example.ts + { + const fetchData = async () => { + return "Data fetched successfully!"; + }; + const getPerson = () => { + return new Promise((resolve, reject) => { + fetch("https://dummyjson.com/users/1?select=firstName,lastName,age").then((res) => { + if (!res.ok) throw Error("Http-Request went wrong"); + return res.json(); + }).then((data) => { + resolve(data); + }).catch((err) => { + console.log(err); + reject(err); + }); + }); + }; + const getPersonAsync = async () => { + try { + const res = await fetch("https://dummyjson.com/users/1?select=firstName,lastName,age"); + if (!res.ok) throw Error("Http-Request went wrong"); + const data = await res.json(); + return data; + } catch (error) { + if (error instanceof Error) { + console.log(error.message); + } + throw new Error("An unknown eorr occured"); + } + }; + getPerson().then((data) => console.log(data)); + getPersonAsync().then((data) => console.log(data)); + } +})(); diff --git a/05_typescript/unterricht/tag29/01_ts-types/assets/js/03_object-types.js b/05_typescript/unterricht/tag29/01_ts-types/assets/js/03_object-types.js new file mode 100644 index 0000000..72cef8d --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/assets/js/03_object-types.js @@ -0,0 +1,42 @@ +(() => { + // src/03_object-types.ts + { + let calculateArea = function(rect) { + console.log("The area of the rectangle is " + rect.width * rect.height); + }, printPersonInfo = function(person) { + console.log("Name: " + person.name); + console.log("Age: " + person.age?.toString() || "Age is not provided"); + if (person.age !== void 0) { + console.log("Age: " + person.age); + } else { + console.log("Age is not provided"); + } + }; + calculateArea({ width: 5, height: 10 }); + const calcArea = (rect) => { + console.log("The area of the rectangle is " + rect.width * rect.height); + }; + calcArea({ width: 5, height: 10 }); + printPersonInfo({ name: "John" }); + printPersonInfo({ name: "Jane", age: 25 }); + const logPersonInfo = (person) => { + console.log("Name: " + person.name); + if (person.age !== void 0) { + console.log("Age: " + person.age); + } else { + console.log("Age is not provided"); + } + }; + logPersonInfo({ name: "John" }); + logPersonInfo({ name: "Jane", age: 25 }); + const calculateArea2 = ({ width, height } = { width: 10, height: 10 }) => { + console.log("The area of the rectangle is " + width * height); + }; + const calculateArea3 = (rect = { width: 10, height: 10 }) => { + const { width, height } = rect; + console.log("The area of the rectangle is " + width * height); + }; + calculateArea2({ width: 5, height: 10 }); + calculateArea2(); + } +})(); diff --git a/05_typescript/unterricht/tag29/01_ts-types/assets/js/04_union-types.js b/05_typescript/unterricht/tag29/01_ts-types/assets/js/04_union-types.js new file mode 100644 index 0000000..7a8310b --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/assets/js/04_union-types.js @@ -0,0 +1,40 @@ +(() => { + // src/04_union-types.ts + { + let greetPeople = function(names) { + if (Array.isArray(names)) { + console.log(`Hello, ${names.join(" and ")}`); + } else { + console.log(`Hello, ${names}`); + } + }, getLength = function(value) { + return value.length; + }; + const printStatus = (status) => { + console.log("Status: ", status); + }; + printStatus(true); + printStatus("loading..."); + const logStatus = (status) => { + if (typeof status === "string") { + console.log(status.toLowerCase()); + } else { + console.log(status); + } + }; + logStatus(true); + logStatus("SUCCESS"); + greetPeople("Christian"); + greetPeople(["Christian", "Stefan", "Florian", "Benjamin", "Philippe"]); + const greetNames = (...names) => { + console.log(`Hello, ${names.join(" and ")}`); + }; + greetNames("Christian"); + greetNames("Christian", "Stefan", "Florian", "Benjamin", "Philippe"); + [1, 2, 3].push(4, 5); + console.log("Max", "Mustermann"); + console.log(getLength("Max")); + console.log(getLength([1, 2, 3])); + console.log(getLength(Object.keys(["Christian", "Stefan", "Florian", "Benjamin", "Philippe"]).map(Number))); + } +})(); 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 new file mode 100644 index 0000000..8afef30 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/assets/js/05_type-statement.js @@ -0,0 +1,2 @@ +(() => { +})(); diff --git a/05_typescript/unterricht/tag29/01_ts-types/index.html b/05_typescript/unterricht/tag29/01_ts-types/index.html new file mode 100644 index 0000000..77854f0 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/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/tag29/01_ts-types/package-lock.json b/05_typescript/unterricht/tag29/01_ts-types/package-lock.json new file mode 100644 index 0000000..93e05a3 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/package-lock.json @@ -0,0 +1,499 @@ +{ + "name": "01_ts-types", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "01_ts-types", + "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/tag29/01_ts-types/package.json b/05_typescript/unterricht/tag29/01_ts-types/package.json new file mode 100644 index 0000000..0d8bea6 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/package.json @@ -0,0 +1,14 @@ +{ + "name": "01_ts-types", + "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/tag29/01_ts-types/src/01_primitive-types.ts b/05_typescript/unterricht/tag29/01_ts-types/src/01_primitive-types.ts new file mode 100644 index 0000000..c23e358 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/src/01_primitive-types.ts @@ -0,0 +1,73 @@ +// Primitive Types - string, number, boolean, null, undefined, bigint, symbol +{ + let greeting: string = 'Welcome to TypeScript'; + + // prefer-const + const greeting2: string = 'Welcome to TypeScript'; + + let wholeNumber: number = 100; + let decimalNumber: number = 19.99; + let negativeNumber: number = -19.99; + + let isLearning: boolean = true; + + let age: number = 42; // RECOMMENDED - explicit type annoation + let age2 = 30; // type inference - 'age2' is inferred to be a number + + // Array + let scores: number[] = [10, 20, 30, 40]; + let moreScores: Array = [50, 60, 70]; + + // nicht Grundtypen + let listItems: Node[] = Array.from(document.querySelectorAll('li')); + let listItems2: NodeListOf = document.querySelectorAll('li'); + + console.log({ listItems, listItems2, scores, moreScores }); + console.log({ greeting, greeting2, wholeNumber, decimalNumber, negativeNumber, isLearning, age, age2 }); + + // any - Es kann jeden Datentyp enthalten + // RECOMMENDED - versuchen "any" zu vermeiden + let randomValue: any = 42; + randomValue = "Now I'm a string!"; + randomValue = { name: 'TypeScript' }; + // randomValue.doSomething(); // No error, even though `doSomething` doesn't exist. + + const $on = (elOrAr: Node | Node[], type: string, fn: EventListener) => { + if (Array.isArray(elOrAr)) { + elOrAr.forEach((ae) => $on(ae, type, fn)); + } else { + elOrAr.addEventListener(type, fn); + } + return elOrAr; + }; + + const $ = (qs: string) => document.querySelector(qs) as Node; + const $$ = (qs: string): Node[] => Array.from(document.querySelectorAll(qs)); + + $on($('h1'), 'click', (e: Event) => { + console.log('click'); + }); + + $on($$('ul li'), 'click', (e: Event) => { + console.log('click'); + }); + + // Funktionen + const multiply = (a: number, b: number): number => { + return a * b; + }; + + // Bigint + let bigNumber: bigint = 9007199254740992n; + + console.log(Number.MAX_SAFE_INTEGER); // => 9007199254740991 + console.log(bigNumber); + + // Symbol + const id: symbol = Symbol(123); + const id2: symbol = Symbol(123); + + console.log(id === id2); // => false + + console.log(multiply(2, 4)); // => 8 +} diff --git a/05_typescript/unterricht/tag29/01_ts-types/src/02_fetch-example.ts b/05_typescript/unterricht/tag29/01_ts-types/src/02_fetch-example.ts new file mode 100644 index 0000000..629c3ae --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/src/02_fetch-example.ts @@ -0,0 +1,51 @@ +// Promise +{ + // async function fetchData(): Promise { + // return 'Data fetched successfully!'; + // } + + const fetchData = async (): Promise => { + return 'Data fetched successfully!'; + }; + + interface UserData { + id?: number; + firstName: string; + lastName: string; + age: number; + } + + const getPerson = (): Promise => { + return new Promise((resolve, reject) => { + fetch('https://dummyjson.com/users/1?select=firstName,lastName,age') + .then((res: Response) => { + if (!res.ok) throw Error('Http-Request went wrong'); + return res.json(); // <- Promise HTTP-Response Body - JS Object geparsed + }) + .then((data: UserData) => { + resolve(data); + }) + .catch((err) => { + console.log(err); + reject(err); + }); + }); + }; + + const getPersonAsync = async (): Promise => { + try { + const res: Response = await fetch('https://dummyjson.com/users/1?select=firstName,lastName,age'); + if (!res.ok) throw Error('Http-Request went wrong'); + const data: UserData = await res.json(); + return data; + } catch (error: unknown) { + if (error instanceof Error) { + console.log(error.message); + } + throw new Error('An unknown eorr occured'); + } + }; + + getPerson().then((data) => console.log(data)); + getPersonAsync().then((data) => console.log(data)); +} diff --git a/05_typescript/unterricht/tag29/01_ts-types/src/03_object-types.ts b/05_typescript/unterricht/tag29/01_ts-types/src/03_object-types.ts new file mode 100644 index 0000000..03b5426 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/src/03_object-types.ts @@ -0,0 +1,66 @@ +// Object Types - bei einem Object Type kann man die Eigenschaften entweder mit einem Komma (,) oder einem Semikolon (;) trennen. Beide sind zulässig +{ + // The parameter's type annotation is an object type + function calculateArea(rect: { width: number; height: number }) { + console.log('The area of the rectangle is ' + rect.width * rect.height); + } + + // Type 'string' is not assignable to type 'number'. + //calculateArea({ width: 5, height: '10' }); + calculateArea({ width: 5, height: 10 }); + + type RectObj = { width: number; height: number }; + + const calcArea = (rect: RectObj): void => { + console.log('The area of the rectangle is ' + rect.width * rect.height); + }; + + calcArea({ width: 5, height: 10 }); + + // ==== + + function printPersonInfo(person: { name: string; age?: number }) { + console.log('Name: ' + person.name); + console.log('Age: ' + person.age?.toString() || 'Age is not provided'); + if (person.age !== undefined) { + console.log('Age: ' + person.age); + } else { + console.log('Age is not provided'); + } + } + + // Both are OK + printPersonInfo({ name: 'John' }); + printPersonInfo({ name: 'Jane', age: 25 }); + + type Person = { + name: string; + age?: number; + }; + + const logPersonInfo = (person: Person): void => { + console.log('Name: ' + person.name); + if (person.age !== undefined) { + console.log('Age: ' + person.age); + } else { + console.log('Age is not provided'); + } + }; + + // Both are OK + logPersonInfo({ name: 'John' }); + logPersonInfo({ name: 'Jane', age: 25 }); + + // ======================== + const calculateArea2 = ({ width, height }: { width: number; height: number } = { width: 10, height: 10 }): void => { + console.log('The area of the rectangle is ' + width * height); + }; + + const calculateArea3 = (rect: RectObj = { width: 10, height: 10 }): void => { + const { width, height } = rect; + console.log('The area of the rectangle is ' + width * height); + }; + + calculateArea2({ width: 5, height: 10 }); + calculateArea2(); +} diff --git a/05_typescript/unterricht/tag29/01_ts-types/src/04_union-types.ts b/05_typescript/unterricht/tag29/01_ts-types/src/04_union-types.ts new file mode 100644 index 0000000..ababbc7 --- /dev/null +++ b/05_typescript/unterricht/tag29/01_ts-types/src/04_union-types.ts @@ -0,0 +1,73 @@ +// Union Type - Menge von möglichen Datentyp-Werten erlauben +{ + // function printStatus(status: boolean | string) { + // console.log('Status: ' + status); + // } + + type Status = boolean | string; + + const printStatus = (status: Status): void => { + console.log('Status: ', status); + }; + + // OK + printStatus(true); + + // OK + printStatus('loading...'); + + // Error + // printStatus({ status: 'success' }); + // Argument of type '{ status: string; }' is not assignable to parameter of type 'boolean | string'. + + const logStatus = (status: boolean | string): void => { + // Error: Property 'toLowerCase' does not exist on type 'boolean | string'. + //console.log(status.toLowerCase()); + + if (typeof status === 'string') { + console.log(status.toLowerCase()); + } else { + console.log(status); + } + }; + + logStatus(true); + logStatus('SUCCESS'); + + // ===== + function greetPeople(names: string | string[]) { + if (Array.isArray(names)) { + // TypeScript knows 'names' is a 'string[]' here + console.log(`Hello, ${names.join(' and ')}`); + } else { + // Here, 'names' is a single 'string' + console.log(`Hello, ${names}`); + } + } + + greetPeople('Christian'); + greetPeople(['Christian', 'Stefan', 'Florian', 'Benjamin', 'Philippe']); + + // ===== + const greetNames = (...names: string[]) => { + console.log(`Hello, ${names.join(' and ')}`); + }; + + greetNames('Christian'); + greetNames('Christian', 'Stefan', 'Florian', 'Benjamin', 'Philippe'); + + [1, 2, 3].push(4, 5); + console.log('Max', 'Mustermann'); + + // ==== + + // Return type is inferred as 'number' + function getLength(value: string | number[]) { + return value.length; + } + + console.log(getLength('Max')); //=> 3 + console.log(getLength([1, 2, 3])); //=> 3 + + console.log(getLength(Object.keys(['Christian', 'Stefan', 'Florian', 'Benjamin', 'Philippe']).map(Number))); //=> 5 +} 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 new file mode 100644 index 0000000..e69de29