This commit is contained in:
Philippe Torrel
@@ -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(', '));
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
@@ -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));
|
||||
}
|
||||
})();
|
||||
@@ -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));
|
||||
}
|
||||
})();
|
||||
@@ -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();
|
||||
}
|
||||
})();
|
||||
@@ -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)));
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,2 @@
|
||||
(() => {
|
||||
})();
|
||||
@@ -0,0 +1,27 @@
|
||||
<!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_primitive-types.js" defer></script> -->
|
||||
<script src="assets/js/02_fetch-example.js" defer></script>
|
||||
<script src="assets/js/03_object-types.js" defer></script>
|
||||
<script src="assets/js/04_union-types.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/Understand-Typescript.jpg" alt="TypeScript Kreisdiagramm" class="img-thumbnail" />
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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<number> = [50, 60, 70];
|
||||
|
||||
// nicht Grundtypen
|
||||
let listItems: Node[] = Array.from(document.querySelectorAll('li'));
|
||||
let listItems2: NodeListOf<HTMLLIElement> = 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
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// Promise
|
||||
{
|
||||
// async function fetchData(): Promise<string> {
|
||||
// return 'Data fetched successfully!';
|
||||
// }
|
||||
|
||||
const fetchData = async (): Promise<string> => {
|
||||
return 'Data fetched successfully!';
|
||||
};
|
||||
|
||||
interface UserData {
|
||||
id?: number;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
age: number;
|
||||
}
|
||||
|
||||
const getPerson = (): Promise<UserData> => {
|
||||
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<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');
|
||||
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));
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
Reference in New Issue
Block a user