This commit is contained in:
Philippe Torrel
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
@@ -0,0 +1,53 @@
|
||||
(() => {
|
||||
// src/01_fn-optional-parameter.ts
|
||||
{
|
||||
const greet = (name) => {
|
||||
if (name) {
|
||||
return `Hello, ${name}!`;
|
||||
} else {
|
||||
return "Hello!";
|
||||
}
|
||||
};
|
||||
console.log(greet());
|
||||
console.log(greet("Alice"));
|
||||
}
|
||||
{
|
||||
const greet = (name = "Guest") => {
|
||||
return `Hello, ${name}!`;
|
||||
};
|
||||
console.log(greet());
|
||||
console.log(greet("Alice"));
|
||||
}
|
||||
{
|
||||
const sendMessage = (message, recipient) => {
|
||||
if (recipient) {
|
||||
return `Message: "${message}" sent to ${recipient}`;
|
||||
} else {
|
||||
return `Message: "${message}" sent to default recipient`;
|
||||
}
|
||||
};
|
||||
console.log(sendMessage("Welcome", "John"));
|
||||
console.log(sendMessage("Welcome"));
|
||||
}
|
||||
{
|
||||
const formatNumber = (num, decimals) => {
|
||||
if (decimals !== void 0) {
|
||||
return num.toFixed(decimals);
|
||||
} else {
|
||||
return num.toString();
|
||||
}
|
||||
};
|
||||
console.log(formatNumber(3.14159, 2));
|
||||
console.log(formatNumber(3.14159));
|
||||
}
|
||||
{
|
||||
const processItems = (items, callback) => {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
callback(items[i], i);
|
||||
}
|
||||
};
|
||||
processItems(["apple", "banana", "cherry"], (item) => {
|
||||
console.log(item);
|
||||
});
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,27 @@
|
||||
(() => {
|
||||
// src/02_fn-rest-parameter.ts
|
||||
{
|
||||
const multiply = (n, ...m) => {
|
||||
return m.map((x) => n * x);
|
||||
};
|
||||
const a = multiply(10, 1, 2, 3, 4);
|
||||
console.log(a);
|
||||
console.log(multiply(10));
|
||||
console.log(multiply(2, 2, 3));
|
||||
const greetNames = (greeting, ...names) => {
|
||||
return names.map((name) => {
|
||||
return `${greeting} ${name}`;
|
||||
});
|
||||
};
|
||||
console.log(greetNames("Hello", "John").join("\n"));
|
||||
console.log(greetNames("Hi", "John", "Tick", "Trick", "Track").join("\n"));
|
||||
const concatenate = (...strings) => {
|
||||
return strings.join(" ");
|
||||
};
|
||||
const concatenate2 = (...strings) => {
|
||||
return strings.join(" ");
|
||||
};
|
||||
concatenate("Ich", "bin", "ein", "Text");
|
||||
concatenate2("Ich", "bin", "ein", "Text");
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,43 @@
|
||||
(() => {
|
||||
// src/03_fn-destructuring.ts
|
||||
{
|
||||
let printCoordinates = function([x, y]) {
|
||||
console.log(`X: ${x}, Y: ${y}`);
|
||||
};
|
||||
const greetUser = (user) => {
|
||||
console.log(`Hello, ${user.name}! You are ${user.age} years old.`);
|
||||
};
|
||||
const greetUser2 = ({ name, age }) => {
|
||||
console.log(`Hello, ${name}! You are ${age} years old.`);
|
||||
};
|
||||
const greetUser3 = ({
|
||||
name,
|
||||
age
|
||||
} = { name: "John", age: 18 }) => {
|
||||
console.log(`Hello, ${name}! You are ${age} years old.`);
|
||||
};
|
||||
greetUser({ name: "Alice", age: 25 });
|
||||
greetUser2({ name: "Alice", age: 25 });
|
||||
greetUser3({ name: "Alice", age: 25 });
|
||||
const greetUser4 = (user) => {
|
||||
const { name, age } = user;
|
||||
console.log(`Hello, ${name}! You are ${age} years old.`);
|
||||
};
|
||||
greetUser4({ name: "Alice", age: 25 });
|
||||
const greetUser5 = (user) => {
|
||||
const { name, age } = user;
|
||||
console.log(`Hello, ${name}! You are ${age} years old.`);
|
||||
};
|
||||
greetUser5({ name: "Alice", age: 25 });
|
||||
const sum = ({ a, b, c }) => {
|
||||
console.log(a + b + c);
|
||||
};
|
||||
const sum2 = (sumObj) => {
|
||||
const { a, b, c } = sumObj;
|
||||
console.log(a + b + c);
|
||||
};
|
||||
sum({ a: 10, b: 5, c: 15 });
|
||||
sum2({ a: 10, b: 5, c: 15 });
|
||||
printCoordinates([10, 20]);
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,2 @@
|
||||
(() => {
|
||||
})();
|
||||
@@ -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>TypeScript - Grundlagen</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
|
||||
<!-- <script src="assets/js/01_fn-type-expression.js" defer></script> -->
|
||||
<script src="assets/js/02_fn-call-signature.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>TypeScript - Grundlagen</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<img src="assets/img/what-is-ts.webp" alt="TypeScript Kreisdiagramm" class="img-thumbnail" />
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "02_ts-functions",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
// Optionale Parameter
|
||||
/*
|
||||
In TypeScript sind Funktionen unglaublich flexibel und du kannst sowohl erforderliche als auch optionale Parameter definieren.
|
||||
*/
|
||||
|
||||
{
|
||||
const greet = (name?: string): string => {
|
||||
if (name) {
|
||||
return `Hello, ${name}!`;
|
||||
} else {
|
||||
return 'Hello!';
|
||||
}
|
||||
};
|
||||
|
||||
console.log(greet()); // => "Hello, Guest!"
|
||||
console.log(greet('Alice')); // => "Hello, Alice!"
|
||||
}
|
||||
|
||||
{
|
||||
// Default Parameter
|
||||
const greet = (name: string = 'Guest'): string => {
|
||||
return `Hello, ${name}!`;
|
||||
};
|
||||
|
||||
console.log(greet()); // => "Hello, Guest!"
|
||||
console.log(greet('Alice')); // => "Hello, Alice!"
|
||||
}
|
||||
|
||||
{
|
||||
const sendMessage = (message: string, recipient?: string): string => {
|
||||
if (recipient) {
|
||||
return `Message: "${message}" sent to ${recipient}`;
|
||||
} else {
|
||||
return `Message: "${message}" sent to default recipient`;
|
||||
}
|
||||
};
|
||||
|
||||
console.log(sendMessage('Welcome', 'John')); // => 'Message: "Welcome" sent to John'
|
||||
console.log(sendMessage('Welcome')); // => 'Message: "Welcome" sent to default recipient'
|
||||
}
|
||||
{
|
||||
const formatNumber = (num: number, decimals?: number): string => {
|
||||
if (decimals !== undefined) {
|
||||
return num.toFixed(decimals);
|
||||
} else {
|
||||
return num.toString();
|
||||
}
|
||||
};
|
||||
|
||||
console.log(formatNumber(3.14159, 2)); // => '3.14'
|
||||
console.log(formatNumber(3.14159)); // => '3.14159'
|
||||
}
|
||||
// Optionale Parameter in Callbacks
|
||||
{
|
||||
const processItems = (items: string[], callback: (item: string, index?: number) => void) => {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
callback(items[i], i);
|
||||
}
|
||||
};
|
||||
|
||||
processItems(['apple', 'banana', 'cherry'], (item) => {
|
||||
console.log(item);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// Rest Parameter und Argumente
|
||||
/*
|
||||
In TypeScript kannst du mit Restparametern Funktionen erstellen, die eine beliebige Anzahl von Argumenten annehmen können.
|
||||
*/
|
||||
|
||||
{
|
||||
// const multiply = (n: number, ...m: Array<number>): number[] => {
|
||||
const multiply = (n: number, ...m: number[]): number[] => {
|
||||
return m.map((x) => n * x);
|
||||
};
|
||||
|
||||
// 'a' gets the value [10, 20, 30, 40]
|
||||
const a = multiply(10, 1, 2, 3, 4);
|
||||
|
||||
console.log(a); // => [10, 20, 30, 40]
|
||||
console.log(multiply(10)); // => []
|
||||
console.log(multiply(2, 2, 3)); // => [4,6]
|
||||
|
||||
// ------
|
||||
|
||||
const greetNames = (greeting: string, ...names: string[]): string[] => {
|
||||
return names.map((name) => {
|
||||
return `${greeting} ${name}`;
|
||||
});
|
||||
};
|
||||
|
||||
console.log(greetNames('Hello', 'John').join('\n'));
|
||||
console.log(greetNames('Hi', 'John', 'Tick', 'Trick', 'Track').join('\n'));
|
||||
|
||||
// -------
|
||||
const concatenate = (...strings: string[]): string => {
|
||||
return strings.join(' ');
|
||||
};
|
||||
const concatenate2 = (...strings: Array<string>): string => {
|
||||
return strings.join(' ');
|
||||
};
|
||||
|
||||
concatenate('Ich', 'bin', 'ein', 'Text');
|
||||
concatenate2('Ich', 'bin', 'ein', 'Text');
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
// Parameter-Destrukturierung
|
||||
/*
|
||||
Destrukturierung vereinfacht deinen Code, indem du Werte direkt aus Objekten oder Arrays auspacken und sie Variablen innerhalb der Funktionsparameter zuweisen kannst.
|
||||
*/
|
||||
{
|
||||
const greetUser = (user: { name: string; age: number }) => {
|
||||
console.log(`Hello, ${user.name}! You are ${user.age} years old.`);
|
||||
};
|
||||
|
||||
// Destructuring in der Parameterliste und explizite Objekt Type Annotation
|
||||
const greetUser2 = ({ name, age }: { name: string; age: number }) => {
|
||||
console.log(`Hello, ${name}! You are ${age} years old.`);
|
||||
};
|
||||
|
||||
// NEGATIV BEISPIEL - NOT RECOMMENDED
|
||||
|
||||
// const greetUser3: FN_CALL_SIGNATURE = (DESTRUCTURING : OBJEKT_ANNOTATION = DEFAULT_OBJEKT) : RUECKGABE_TYPE => {...}
|
||||
const greetUser3: (o: { name: string; age: number }) => void = (
|
||||
{
|
||||
name,
|
||||
age,
|
||||
}: {
|
||||
name: string;
|
||||
age: number;
|
||||
} = { name: 'John', age: 18 },
|
||||
): void => {
|
||||
console.log(`Hello, ${name}! You are ${age} years old.`);
|
||||
};
|
||||
|
||||
greetUser({ name: 'Alice', age: 25 });
|
||||
greetUser2({ name: 'Alice', age: 25 });
|
||||
greetUser3({ name: 'Alice', age: 25 });
|
||||
// ------
|
||||
|
||||
// RECOMMENDED
|
||||
type GreetUserFn = (user: { name: string; age: number }) => void;
|
||||
type GreetUserFn2 = {
|
||||
(user: { name: string; age: number }): void;
|
||||
};
|
||||
|
||||
const greetUser4: GreetUserFn = (user) => {
|
||||
const { name, age } = user;
|
||||
|
||||
console.log(`Hello, ${name}! You are ${age} years old.`);
|
||||
};
|
||||
|
||||
greetUser4({ name: 'Alice', age: 25 });
|
||||
|
||||
// RECOMMENDED ALTERNATIVE
|
||||
type User = { name: string; age: number };
|
||||
|
||||
const greetUser5 = (user: User) => {
|
||||
const { name, age } = user;
|
||||
|
||||
console.log(`Hello, ${name}! You are ${age} years old.`);
|
||||
};
|
||||
|
||||
greetUser5({ name: 'Alice', age: 25 });
|
||||
|
||||
// -----
|
||||
const sum = ({ a, b, c }: { a: number; b: number; c: number }): void => {
|
||||
console.log(a + b + c);
|
||||
};
|
||||
|
||||
// RECOMMENDED
|
||||
type SumObject = { a: number; b: number; c: number };
|
||||
|
||||
const sum2 = (sumObj: SumObject): void => {
|
||||
const { a, b, c } = sumObj;
|
||||
|
||||
console.log(a + b + c);
|
||||
};
|
||||
|
||||
sum({ a: 10, b: 5, c: 15 }); // => 30
|
||||
sum2({ a: 10, b: 5, c: 15 }); // => 30
|
||||
|
||||
// -------
|
||||
function printCoordinates([x, y]: [number, number]) {
|
||||
console.log(`X: ${x}, Y: ${y}`);
|
||||
}
|
||||
|
||||
printCoordinates([10, 20]); // => X: 10, Y: 20
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
// Types: never, unknown, void
|
||||
/*
|
||||
In TypeScript gibt es drei spezielle Typen: never, unknown und void. Diese Typen werden in bestimmten Situationen verwendet, um bestimmte Verhaltensweisen zu modellieren.
|
||||
*/
|
||||
|
||||
// - void wird für Funktionen verwendet, die keinen Wert zurückgeben, was bedeutet, dass die Funktion eine Aktion ausführt, ohne ein Ergebnis zu liefern. Es wird kein Ergebnis erwartet, dennoch können Ergebnisse zurückgegeben werden ohne Fehlermeldung, wenn void in einer "call Signature" (Funktionstyp-Deklaration verwendet wird)
|
||||
|
||||
// - unknown ist eine sicherere Alternative zu any und erfordert Type-Checking, bevor Operationen mit Werten unbekannten Typs durchgeführt werden, wodurch Laufzeitfehler vermieden werden.
|
||||
|
||||
// - never repräsentiert Funktionen, die niemals zurückkehren, entweder durch das Werfen von Fehlern oder durch unendliches Ausführen, und ist nützlich für die Durchsetzung von exhaustive Type-Checking.
|
||||
|
||||
{
|
||||
//
|
||||
type LogFn = (a: string) => void;
|
||||
|
||||
const logMessage = (message: string): void => {
|
||||
console.log(message);
|
||||
};
|
||||
|
||||
const logMessage2: LogFn = (message) => {
|
||||
console.log(message);
|
||||
};
|
||||
|
||||
logMessage('Hello, TypeScript!');
|
||||
console.log(logMessage2('Hello, TypeScript!'));
|
||||
|
||||
const clearScreen = (): void => {
|
||||
// document.body.innerHTML = '';
|
||||
};
|
||||
|
||||
clearScreen();
|
||||
|
||||
// -------
|
||||
const processInput = (input: unknown): void => {
|
||||
if (typeof input === 'string') {
|
||||
console.log(`The input is a string: ${input.toUpperCase()}`);
|
||||
} else if (typeof input === 'number') {
|
||||
console.log(`The input is a number: ${input + 10}`);
|
||||
} else {
|
||||
console.log('Unknown type of input');
|
||||
}
|
||||
};
|
||||
|
||||
processInput('Hello');
|
||||
processInput(42);
|
||||
processInput(true);
|
||||
|
||||
// ------
|
||||
|
||||
interface Userdata {
|
||||
id?: number;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
age: number;
|
||||
}
|
||||
|
||||
// unkown Example
|
||||
const getPersonAsync = async (): Promise<Userdata> => {
|
||||
try {
|
||||
const res: Response = await fetch('https://dummyjson.com/users/1?select=firstName,lastName,age');
|
||||
if (!res.ok) {
|
||||
throw Error(`HTTP-Request went wrong: ${res.status}`);
|
||||
}
|
||||
const data: Userdata = await res.json();
|
||||
return data;
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
console.log(err.message);
|
||||
|
||||
console.error(err);
|
||||
throw err; // paranoid
|
||||
}
|
||||
throw new Error('An unknown error occurred.');
|
||||
}
|
||||
};
|
||||
|
||||
getPersonAsync().then((data) => console.log(data));
|
||||
|
||||
// ----
|
||||
// unknown als Rückgabewert erfordert type checking vor Verwendung
|
||||
const safeParse = (s: string): unknown => {
|
||||
return JSON.parse(s);
|
||||
};
|
||||
|
||||
const result = safeParse('{"name": "Alice"}');
|
||||
|
||||
// console.log(result.name); // 'result' is of type 'unknown'.
|
||||
|
||||
// TypeScript requires you to check the type before using `result`
|
||||
if (typeof result === 'object' && result !== null && 'name' in result) {
|
||||
console.log(result.name); // Safe access after type check
|
||||
}
|
||||
|
||||
// ----
|
||||
|
||||
const throwError = (message: string): never => {
|
||||
throw new Error(message);
|
||||
};
|
||||
|
||||
throwError('Something went wrong!');
|
||||
|
||||
function infiniteLoop(): never {
|
||||
while (true) {
|
||||
console.log('This loop will never end');
|
||||
}
|
||||
}
|
||||
|
||||
//------
|
||||
type Shape = 'circle' | 'square';
|
||||
|
||||
const handleShape = (shape: Shape): string => {
|
||||
switch (shape) {
|
||||
case 'circle':
|
||||
return 'Handling a circle';
|
||||
case 'square':
|
||||
return 'Handling a square';
|
||||
|
||||
default:
|
||||
// throw new Error("shape doesn't exist");
|
||||
const _exhaustiveCheck: never = shape; // TypeScript error if a new shape is added
|
||||
return _exhaustiveCheck;
|
||||
}
|
||||
};
|
||||
|
||||
console.log(handleShape('circle'));
|
||||
console.log(handleShape('square'));
|
||||
// console.log(handleShape('triangle'));
|
||||
}
|
||||
Reference in New Issue
Block a user