diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/img/Understand-Typescript.jpg b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/img/Understand-Typescript.jpg new file mode 100644 index 0000000..c3a5d16 Binary files /dev/null and b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/img/Understand-Typescript.jpg differ diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/01_interface-user.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/01_interface-user.js new file mode 100644 index 0000000..563b18a --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/01_interface-user.js @@ -0,0 +1,24 @@ +(() => { + // src/01_interface-user.ts + { + const userOne = { + id: 1, + name: "John", + lastName: "Wick" + // username: 'JW', // Object literal may only specify known properties, and 'username' does not exist in type 'User'. + }; + userOne.id = 2; + userOne.lastName = "Doe"; + console.log(userOne); + const userTwo = { + name: "Jane", + lastName: "Doe", + id: 3 + }; + Object.freeze(userTwo); + if (Object.hasOwn(userTwo, "name") && Object.hasOwn(userTwo, "id") && Object.hasOwn(userTwo, "lastName") && typeof userTwo.name === "string" && typeof userTwo.id === "number" && typeof userTwo.lastName === "string") { + console.log(userTwo); + console.log("Nerdy, without TS"); + } + } +})(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/02_unions.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/02_unions.js new file mode 100644 index 0000000..05b0269 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/02_unions.js @@ -0,0 +1,19 @@ +(() => { + // src/02_unions.ts + { + let getResult = function() { + return Math.random() > 0.5 ? "Success" : 404; + }, getResult2 = function() { + return Math.random() > 0.5 ? "success" : "error"; + }; + let text = "Ich bin ein Text"; + let value; + let value2; + value = 123; + value = "einszweidrei"; + value2 = 123; + value2 = "einszweidrei"; + console.log(getResult()); + console.log(getResult2()); + } +})(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/03_generics.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/03_generics.js new file mode 100644 index 0000000..b6a4687 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/03_generics.js @@ -0,0 +1,21 @@ +(() => { + // src/03_generics.ts + { + let identity = function(value) { + return value; + }; + const identity2 = (value) => { + return value; + }; + let stringResult = identity("Hello"); + let numberResult = identity2(42); + console.log(stringResult, numberResult); + let names = ["Tick", "Trick", "Track"]; + let names2 = ["Tick", "Trick", "Track"]; + let numbers = [1, 2, 3]; + let numbers2 = [1, 2, 3]; + let namesWithAges = ["John", 48, "Alice", 23]; + let namesWithAges2 = ["John", 48, "Alice", 23]; + console.log(names, names2, numbers, numbers2, namesWithAges, namesWithAges2); + } +})(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/04_static-type-checking.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/04_static-type-checking.js new file mode 100644 index 0000000..2aa6e6a --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/04_static-type-checking.js @@ -0,0 +1,13 @@ +(() => { + // src/04_static-type-checking.ts + { + const data = [1, 2, 3, 4, 5, 6]; + console.log(data.length); + const liEls = document.querySelectorAll("li"); + liEls.forEach((el) => { + el.addEventListener("click", (e) => { + console.log("click"); + }); + }); + } +})(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/05_type-definition-fn.js b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/05_type-definition-fn.js new file mode 100644 index 0000000..f797875 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/assets/js/05_type-definition-fn.js @@ -0,0 +1,8 @@ +(() => { + // src/05_type-definition-fn.ts + { + let calculateTotal = function(cart) { + return cart.getTotal(); + }; + } +})(); diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/index.html b/05_typescript/unterricht/tag28/01_ts-fundamentals/index.html new file mode 100644 index 0000000..1b6c316 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/index.html @@ -0,0 +1,24 @@ + + + + + + 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/tag28/01_ts-fundamentals/package-lock.json b/05_typescript/unterricht/tag28/01_ts-fundamentals/package-lock.json new file mode 100644 index 0000000..0d12be3 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/package-lock.json @@ -0,0 +1,499 @@ +{ + "name": "01_ts-fundamentals", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "01_ts-fundamentals", + "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/tag28/01_ts-fundamentals/package.json b/05_typescript/unterricht/tag28/01_ts-fundamentals/package.json new file mode 100644 index 0000000..18d394b --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/package.json @@ -0,0 +1,14 @@ +{ + "name": "01_ts-fundamentals", + "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/tag28/01_ts-fundamentals/src/01_interface-user.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/01_interface-user.ts new file mode 100644 index 0000000..b6cc1a7 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/01_interface-user.ts @@ -0,0 +1,48 @@ +{ + interface User { + name: string; + lastName: string; + id: number; + } + + const userOne: User = { + id: 1, + name: 'John', + lastName: 'Wick', + // username: 'JW', // Object literal may only specify known properties, and 'username' does not exist in type 'User'. + }; + + userOne.id = 2; + userOne.lastName = 'Doe'; + + // userOne._id = 2; // Property '_id' does not exist on type 'User'. + // userOne.lastname = 'Wick' // Property 'lastname' does not exist on type 'User'. Did you mean 'lastName'? + + console.log(userOne); + + // ==== OHNE TypeScript + + const userTwo = { + name: 'Jane', + lastName: 'Doe', + id: 3, + }; + + Object.freeze(userTwo); + // userTwo.username = 'JD' + // userTwo.lastname = 'JD' // Property 'lastname' does not exist on type '{ name: string; lastName: string; id: number; }'. Did you mean 'lastName'? + + if ( + Object.hasOwn(userTwo, 'name') && + Object.hasOwn(userTwo, 'id') && + Object.hasOwn(userTwo, 'lastName') && + typeof userTwo.name === 'string' && + typeof userTwo.id === 'number' && + typeof userTwo.lastName === 'string' + ) { + console.log(userTwo); + console.log('Nerdy, without TS'); + } + + // userTwo.hasOwnProperty('name'); +} diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/02_unions.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/02_unions.ts new file mode 100644 index 0000000..b03e478 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/02_unions.ts @@ -0,0 +1,26 @@ +// Unions - Ein Union Type ermöglicht es dir, eine Variable zu deklarieren, die mehr als einen Werttyp enthalten kann. +{ + // Type Annotation + let text: string = 'Ich bin ein Text'; + + type StringOrNumber = string | number; // unions + + let value: string | number; // unions + let value2: StringOrNumber; + + value = 123; + value = 'einszweidrei'; + + value2 = 123; + value2 = 'einszweidrei'; + + function getResult(): string | number { + return Math.random() > 0.5 ? 'Success' : 404; + } + function getResult2(): string { + return Math.random() > 0.5 ? 'success' : 'error'; + } + + console.log(getResult()); + console.log(getResult2()); +} diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/03_generics.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/03_generics.ts new file mode 100644 index 0000000..9874b4f --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/03_generics.ts @@ -0,0 +1,33 @@ +// Generics - Mit Hilfe von Generics kannst du wiederverwendbare Komponenten erstellen, die mit verschiedenen Datentypen arbeiten können und dabei die Typsicherheit wahren. + +{ + // Generic + function identity(value: T): T { + return value; + } + + const identity2 = (value: T): T => { + return value; + }; + + let stringResult = identity('Hello'); + let numberResult = identity2(42); + + console.log(stringResult, numberResult); + + // Type Syntax + + type StringArray = Array; // string[]; + type NumberArray = Array; // number[] + + let names: StringArray = ['Tick', 'Trick', 'Track']; + let names2: string[] = ['Tick', 'Trick', 'Track']; + + let numbers: NumberArray = [1, 2, 3]; + let numbers2: number[] = [1, 2, 3]; + + let namesWithAges: Array = ['John', 48, 'Alice', 23]; + let namesWithAges2: (string | number)[] = ['John', 48, 'Alice', 23]; + + console.log(names, names2, numbers, numbers2, namesWithAges, namesWithAges2); +} diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/04_static-type-checking.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/04_static-type-checking.ts new file mode 100644 index 0000000..591aa19 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/04_static-type-checking.ts @@ -0,0 +1,19 @@ +// Static Type Checking - Error linting während der Entwicklung + +{ + const data = [1, 2, 3, 4, 5, 6]; + + console.log(data.length); + + // data(); // This expression is not callable. Type 'number[]' has no call signatures. + // data.toLowerCase(); // Property 'toLowerCase' does not exist on type 'number[]'. + // data.addEventListener('click', () => {}) // Property 'addEventListener' does not exist on type 'number[]'. + + const liEls = document.querySelectorAll('li'); + + liEls.forEach((el) => { + el.addEventListener('click', (e) => { + console.log('click'); + }); + }); +} diff --git a/05_typescript/unterricht/tag28/01_ts-fundamentals/src/05_type-definition-fn.ts b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/05_type-definition-fn.ts new file mode 100644 index 0000000..8f32c14 --- /dev/null +++ b/05_typescript/unterricht/tag28/01_ts-fundamentals/src/05_type-definition-fn.ts @@ -0,0 +1,10 @@ +// Type Definition für Funktionen +{ + interface ShoppingCart { + getTotal: () => number; + } + + function calculateTotal(cart: ShoppingCart): number { + return cart.getTotal(); + } +}