fix(slides): update and add missing information for ts

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

@@ -21,4 +21,25 @@
 		<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>
+		<p>Neben diesen normalen Datentypen, kennt TypeScript noch zwei weitere wichtige: <code>any</code> und <code>unknown</code>.</p>
+	</section>
+
+	<section>
+		<p>Sobald man <code>any</code> verwendet, gibt man dem TypeScript Type-Checker die Information, dass diese Variable nicht weiter beachtet werden soll. Für diese Variable wird also jegliches Type-Checking deaktiviert und wir erhalten keine Warnungen und Informationen mehr.</p>
+		<p>Als <i>sichere</i> alternative gibt es hierfür <code>unknown</code>. Hiermit teilen wir TypeScript mit, dass wir zum aktuellen Zeitpunkt nicht wissen, was das für ein Datentyp ist.</p>
+	</section>
+
+	<section>
+		<p>Wenn wir den Datentyp einer unknown Variable später eindeutig kennen, können wir diesen mit folgendem Code-Schnipsel konvertieren:</p>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			function x(y: unknown): number | undefined {
+				if (typeof y === 'number') {
+					return y as number;
+				}
+				return undefined;
+			}
+		</code></pre>
+	</section>
 </section>

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

@@ -0,0 +1,29 @@
+<section>
+  <section>
+    <h2>Funktionen</h2>
+  </section>
+
+  <section>
+    <p>Funktionen in TypeScript lassen sich einfach definieren. Wir verwenden dazu das Type-Keyword und geben eine Funktion ähnlich zu einer Standard-Arrow-Function an:</p>
+    <pre class="ts"><code data-trim data-line-numbers is:raw>
+      type MyFunction = () =&gt; void;
+    </code></pre>
+  </section>
+
+  <section>
+    <p>In den runden Klammern können wir die notwendigen Parameter für die Funktion definieren:</p>
+  </section>
+
+  <section>
+    <pre class="ts"><code data-trim data-line-numbers is:raw>
+      type MyFunction = (paramA: string, paramB: string) =&gt; void;
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Der Rückgabe-Type wird nach dem "Fat-Arrow" definiert. <code>void</code> signalisiert, dass die Funktion keinen Wert zurückggibt.</p>
+    <pre class="ts"><code data-trim data-line-numbers is:raw>
+      type MyFunction = () =&gt; string;
+    </code></pre>
+  </section>
+</section>

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

@@ -5,6 +5,7 @@ import Installation from "./installation.astro";
 import Basics from "./basics.astro";
 import Objects from "./objects.astro";
 import Generics from "./generics.astro";
+import Functions from './functions.astro';
 ---
 
 <div class="slides">
@@ -14,4 +15,5 @@ import Generics from "./generics.astro";
   <Basics />
   <Objects />
   <Generics />
+  <Functions />
 </div>

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

@@ -13,7 +13,7 @@
 
 	<section>
 		<pre class="sh"><code data-trim data-line-numbers>
-			npm create vite@latest my-first-ts-app\
+			npm create vite@latest my-first-ts-app
 				-- --template vanilla-ts
 		</code></pre>
 	</section>

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

@@ -75,4 +75,90 @@
 			type Falsy = null | undefined | "" | 0 | false;
 		</code></pre>
 	</section>
+
+	<section>
+		<h3>Optionale Properties</h3>
+	</section>
+
+	<section>
+		<p>Manchmal benötigen wir einzelne Properties in einem Objekt nicht immer, also können wir diese auch weg lassen.</p>
+		<p>In TypeScript werden optionale Properties in einem Objekt mit einem Fragezeichen markiert:</p>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			type MyObject = {
+				required: boolean;
+				optional?: boolean;
+			};
+		</code></pre>
+	</section>
+
+	<section>
+		<h3>Record</h3>
+	</section>
+
+	<section>
+		<p>Der spezielle Type <code>Record</code>, ist ein generischer Type von TypeScript, der ein Objekt beschreiben kann.</p>
+		<p>Er nimmt 2 Parameter an: Einen <code>Keys</code>-Type und einen <code>Value</code>-Type.</p>
+	</section>
+
+	<section>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			type Keys = "cat" | "dog" | "hamster";
+			type Value = {
+				name: string;
+				age: number;
+			}
+
+			type Pets = Record&lt;Keys, Value&gt;;
+		</code></pre>
+	</section>
+
+	<section>
+		<p>Dies erzeugt folgenden Typ:</p>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			type Pets = {
+				cat: Value,
+				dog: Value,
+				hamster: Value
+			}
+		</code></pre>
+		<p>Jeder Key wird als Property mit dem angegebenen Value definiert!</p>
+	</section>
+
+	<section>
+		<h3>typeof</h3>
+	</section>
+
+	<section>
+		<p>Manchmal macht es Sinn, einen Datentypen (Interface oder Type) anhand eines bereits existierenden JavaScript-Objektes zu generieren.</p>
+		<p>Hierfür haben wir das keyword <code>typeof</code>. TypeScript wandelt bei der Verwendung eines JS-Ojbektes mit diesem keyword, in einen Datentypen um:</p>
+	</section>
+	
+	<section>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			const myObject = {
+				key1: 'Hello',
+				key2: 'World', 
+			};
+			
+			const MyObject = typeof myObject;
+			/**
+			*	{
+			*		key1: string;
+			*		key2: string;
+			*	}
+			*/
+		</code></pre>
+	</section>
+
+	<section>
+		<h3>keyof</h3>
+	</section>
+
+	<section>
+		<p>Das keyword <code>keyof</code> ist ein weiterer nützliches Tool. Damit können wir die property-keys aus einem Type extrahieren:</p>
+		<pre class="ts"><code data-trim data-line-numbers is:raw>
+			type Keys = keyof MyObject;
+			// Keys => 'key1' | 'key2';
+		</code></pre>
+	</section>
 </section>