feat(slides): first ts throw

src/components/slides/typescript-beginner/basics.astro

@@ -0,0 +1,24 @@
+<section>
+	<section>
+		<h2>Erste Schritte mit TypeScript</h2>
+	</section>
+
+	<section>
+		<p>Versehen wir nun mal einfache Variablen mit einer Typisierung</p>
+		<pre class="ts"><code data-trim data-line-numbers>
+			const x: number = 5;
+			const y: string = "Hallo Welt!";
+			const isFalse: boolean = false;
+		</code></pre>
+	</section>
+
+	<section>
+		<p>In TypeScript erhalten Variablen einen Typ, indem nach dem Namen ein Doppelpunkt mit der Typ-Deklaration folgt.</p>
+		<p>Standard-Typen umfassen in der Regel <code>string, number, boolean, undefined, null</code>.</p>
+	</section>
+
+	<section>
+		<p>Bei der Interaktion mit den Variablen sollten nun Informationen zu den Variablen besser angezeigt werden.</p>
+		<p>Sehen wir uns nun das Beispiel mit einer String-Variable an.</p>
+	</section>
+</section>

src/components/slides/typescript-beginner/generics.astro

@@ -0,0 +1,46 @@
+<section>
+  <section>
+    <h2>Generics</h2>
+  </section>
+
+  <section>
+    <p>Generics in TypeScript sind ein wichtiges Feature um Typen dynamisch festzulegen</p>
+    <p>Im Grunde geben wir mit einem Generic an, das der <code>type</code> von außen festgelegt oder durch Code-Analyse automatisch bestimmbar ist.</p>
+  </section>
+
+  <section>
+    <p>Fangen wir einfach an: Wir wollen den <code>type</code> einer Eigenschaft eines Objekts frei einstellen:</p>
+    <pre class="ts"><code data-trim data-line-numbers is:raw>
+      type MyObject&lt;T&gt; = {
+        value: T,
+      };
+
+      const x: MyObject&lt;number&gt; = {
+        value: 5,
+      };
+      const y: MyObject&lt;string&gt; = {
+        value: 'Hallo!',
+      };
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Fangen wir einfach an</p>
+    <pre class="ts"><code data-trim data-line-numbers is:raw>
+      const convertToString = (thing): string =&gt; {
+        return thing.toString();
+      }
+    </code></pre>
+    <p>Nicht alles kann mit <code>toString</code> in etwas nützliches konvertiert werden (z.B. Objekte). Deshalb wollen wir nun nur "Sinnvolle" Typen zulassen</p>
+  </section>
+
+  <section>
+    <pre class="ts"><code data-trim data-line-numbers is:raw>
+      const convertToString = &lt;T extends
+        string | number | boolean | null | undefined
+      &gt;(thing: T): string =&gt; {
+        return thing.toString();
+      }
+    </code></pre>
+  </section>
+</section>

src/components/slides/typescript-beginner/index.astro

@@ -0,0 +1,17 @@
+---
+import Title from "./title.astro";
+import Introduction from "./introduction.astro";
+import Installation from "./installation.astro";
+import Basics from "./basics.astro";
+import Objects from "./objects.astro";
+import Generics from "./generics.astro";
+---
+
+<div class="slides">
+  <Title />
+  <Introduction />
+  <Installation />
+  <Basics />
+  <Objects />
+  <Generics />
+</div>

src/components/slides/typescript-beginner/installation.astro

@@ -0,0 +1,30 @@
+<section>
+	<section>
+		<h2>Projekt-Setup mit TS</h2>
+	</section>
+
+	<section>
+		<h3>Schnelles Setup mit Vite</h3>
+	</section>
+
+	<section>
+		<p>Wenn wir ein Projekt mit Vite aufsetzen, können wir aus den vielen Templates von Vite wählen. Viele "Vanilla"-Templates haben auch eine TS-Variante mit der unnötiges Setup vermieden werden kann.</p>
+	</section>
+
+	<section>
+		<pre class="sh"><code data-trim data-line-numbers>
+			npm create vite@latest my-first-ts-app\
+				-- --template vanilla-ts
+		</code></pre>
+	</section>
+
+	<section>
+		<p>In dem nun generierten Projekt sehen wir nun die ersten Unterschiede: Javascript-Dateien gibt es hier nicht mehr und sind mit <code>.ts</code> abgekürzt. Das sind entsprechende TypeScript-Dateien.</p>
+		<p>TypeScript wird diese Dateien analysieren, und während der Build-Phase diese in JavaScript umwandeln, sodass dieser dann in nachgelagerten Schritten weiter prozessiert werden kann.</p>
+	</section>
+
+	<section>
+		<p>Euch wird wahrscheinlich eine tsconfig.json im Projekt aufgefallen sein.</p>
+		<p>Dies ist die Konfigurations-Datei für TypeScript. Hier sind alle Einstellungen für den TypeScript-Compiler und können den eigenen Anforderungen entsprechend angepasst werden.</p>
+	</section>
+</section>

src/components/slides/typescript-beginner/introduction.astro

@@ -0,0 +1,32 @@
+<section>
+  <section>
+    <h2>Was ist TypeScript?</h2>
+  </section>
+
+  <section>
+    <p>TypeScript stellt im weitesten Sinne eine Erweiterung zu klassischem JavaScript dar. Hierbei wird JavaScript um ein Type-System erweitert.</p>
+		<p>Die Types hierbei umfassen die normalen Datentypen wie <em>number</em>, <em>boolean</em>, oder <em>string</em>. Weitergehend können Objekte und Arrays mit Typen ausgestattet werden.</p>
+  </section>
+
+	<section>
+		<p>Ziel des ganzen ist es hierbei, JavaScript's fehleranfälliges Verhalten aufgrund der schlechten Typ-Information sicherer zu gestalten. TypeScript bietet bei der Entwicklung viele Vorteile wie z.B. Type-Hints, Error-Meldungen bei unbekannten Typen und mehr.</p>
+	</section>
+
+	<section>
+		<p>Da TypeScript nur eine Erweiterung darstellt, sind auch moderne Browser und JS-Parsende Systeme nicht in der Lage TypeScript zu verstehen. Für uns Entwickler heißt das konkret, dass wir unseren TypeScript (TS) Code vorher in JavaScript umwandeln müssen.</p>
+		<p>Eine Ausnahme die sich zu dieser Aussage "anbahnt" ist NodeJS: Seit Version 23.8.0 ist NodeJS in der Lage, die Typ-Informationen aus der TS-Datei zu "strippen" und den Code der dahinter liegt auszuführen.</p>
+	</section>
+
+	<section>
+		<p>Für Browser ist aber fürs erste weiterhin eine Konvertierung von TS -&gt; JS durchzuführen. Wann gängige Browser-Engines nachziehen ist noch nicht abzusehen.</p>
+	</section>
+
+	<section>
+		<p>Hierfür gibt es einen entsprechendes package auf npm: <code>typescript</code>.</p>
+		<p>TypeScript wurde durch Microsoft eingeführt und wird auch durch Microsoft ständig weiter entwickelt.</p>
+	</section>
+
+	<section>
+		<p>Das <code>typescript</code> package ist ein Compiler der TypeScript Code analysiert, Fehlermeldungen auf Typen generiert und den Code letzten Endes zu JavaScript konvertiert.</p>
+	</section>
+</section>

src/components/slides/typescript-beginner/objects.astro

@@ -0,0 +1,78 @@
+<section>
+	<section>
+		<h2>Objekte</h2>
+	</section>
+
+	<section>
+		<p>In TS gibt es 2 Varianten Objekte zu Typisieren. Dabei definieren wir die Form bzw die Eigenschaften (Properties) innerhalb des Objektes.</p>
+	</section>
+
+	<section>
+		<h3>Interfaces</h3>
+	</section>
+
+	<section>
+		<p>Mit Interfaces definieren wir Objekte. Dabei können wir uns das <code>interface</code> noch am ehesten wie eine normale JavaScript-Klasse vorstellen, die später durch weitere Interfaces erweitert werden kann.</p>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			interface Point2D {
+				x: number,
+				y: number,
+			};
+
+			const location: Point2D = {
+				x: 5,
+				y: 10,
+			};
+		</code></pre>
+	</section>
+
+
+	<section>
+		<p>Ein Interface kann nun mit einem bestehenden Interface "erweitert" (extended) werden.</p>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			interface Point3D extends Point2D {
+				z: number,
+			};
+
+			const location: Point3D = {
+				x: 5,
+				y: 10,
+				z: 20,
+			};
+		</code></pre>
+	</section>
+
+	<section>
+		<h3>type</h3>
+	</section>
+
+	<section>
+		<p>Ein <code>type</code> dient ähnlich zum interface dazu, ein Objekt zu definieren, beschränkt sich aber nicht darauf.</p>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			type Point2D = {
+				x: number;
+				y: number;
+			};
+
+			// Mit dem "&" können wir mehrere types zusammenführen
+			type Point3D = {
+				z: number;
+			} & Point2D;
+		</code></pre>
+	</section>
+
+	<section>
+		<p>Wie gesagt beschränkt sich eine <code>type</code>-Definition nicht nur auf Objekte, wir können zum Beispiel einen String auf bestimmte Werte "restriktieren".</p>
+	</section>
+
+	<section>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			type Animal = "cat" | "dog" | "hamster";
+
+			const pet: Animal = "cat";
+
+			// Mischformen sind auch möglich
+			type Falsy = null | undefined | "" | 0 | false;
+		</code></pre>
+	</section>
+</section>

src/components/slides/typescript-beginner/title.astro

@@ -0,0 +1,3 @@
+<section>
+  <h1>Einführung in TypeScript</h1>
+</section>

src/pages/slides/flexi-pool/01-typescript.astro

@@ -0,0 +1,8 @@
+---
+import Reveal from "../../../layouts/Reveal.astro";
+import Slides from "../../../components/slides/typescript-beginner/index.astro";
+---
+
+<Reveal title="TypeScript">
+  <Slides />
+</Reveal>