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