A DUCK

live/types.ts

@@ -16,4 +16,40 @@ const userNames = {
     '017daef7-e1f1-4160-81ff-e5b17e86fc6b': 'Frieda',
 };
 
-type UserNameDictionary = Record<string, string>;
+type UserNameDictionary = Record<string, string>;
+
+type Renderable = {
+    render: () => void,
+}
+type Updateable = {
+    update: () => void,
+}
+type GameObject = Renderable & Updateable;
+const gameObject: GameObject = {
+    render: () => {},
+    update: () => {},
+}
+function fetch(): FetchResult {
+    return Math.random() > 0.5
+        ? {msg: 'bla', data: {}}
+        : {msg: 'bla', trace: []};
+}
+
+type NetworkPacket = {
+    data: Record<string, string>,
+    msg: string,
+};
+type Exception = {
+    trace: string[],
+    msg: string,
+}
+type FetchResult = NetworkPacket | Exception;
+const fetchResult: FetchResult = fetch();
+console.log(fetchResult.msg);
+if ('trace' in fetchResult) {
+    console.log(fetchResult.trace);
+}
+if ('data' in fetchResult) {
+    console.log(fetchResult.data);
+}
+

workshop.md

@@ -147,7 +147,7 @@ drawGraph([
  * @property {HTMLCanvasElement} mount
  * @property {number} start
  * @property {number} stepSize
- * 
+ *
  * @param {GraphOptions} options
  */
 export function drawGraph(data, options = {}) {
@@ -155,7 +155,7 @@ export function drawGraph(data, options = {}) {
 }
 // your-module.js
 drawGraph(
-    data, 
+    data,
     {
         mount: document.getElementById('my-canvas'),
         start: 2,
@@ -348,9 +348,9 @@ Found 1 error in path.ts:1
 
 Wie damit umgehen?
 * Typescript auf weniger strikt stellen
-  * => Nutzung von Typescript verliert an Wert
+    * => Nutzung von Typescript verliert an Wert
 * Alle Abhängigkeiten direkt nach Typescript konvertieren
-  * Nicht immer machbar
+    * Nicht immer machbar
 * Schnittstellen mit Typen versehen
 
 ---
@@ -366,10 +366,6 @@ Wie damit umgehen?
 export function getFileExtension(path: string): string;
 ```
 
----
-
-## Schnittstellen typisieren
-
 * Keine Implementierung
 * Kein Type-Checking der Implementierung
 * Schnittstellen werden wenigstens typisiert `¯\_(ツ)_/¯`
@@ -499,8 +495,8 @@ const bobbycar: Car = {
 };
 type Kubikmeter = number;
 type Car = {
-  anzahlRaeder: number,
-  hubraum?: Kubikmeter,
+    anzahlRaeder: number,
+    hubraum?: Kubikmeter,
 };
 ```
 
@@ -510,9 +506,9 @@ type Car = {
 
 ```ts
 type Vehicle = Partial<{
-  anzahlRaeder: number,
-  hubraum: Kubikmeter,
-  anzahlKufen: number,
+    anzahlRaeder: number,
+    hubraum: Kubikmeter,
+    anzahlKufen: number,
 }>;
 ```
 ![bg right:60% 100%](img/bobbycar.png)
@@ -525,9 +521,9 @@ type Vehicle = Partial<{
 
 ```ts
 type Vehicle = Partial<{
-  anzahlRaeder: number,
-  hubraum: Kubikmeter,
-  anzahlKufen: number,
+    anzahlRaeder: number,
+    hubraum: Kubikmeter,
+    anzahlKufen: number,
 }>;
 const helikopter: Vehicle = {
     anzahlKufen: 2,
@@ -540,9 +536,9 @@ const helikopter: Vehicle = {
 
 ```ts
 type Vehicle = Partial<{
-  anzahlRaeder: number,
-  hubraum: Kubikmeter,
-  anzahlKufen: number,
+    anzahlRaeder: number,
+    hubraum: Kubikmeter,
+    anzahlKufen: number,
 }>;
 const helikopter: Vehicle = {
     anzahlKufen: 2,
@@ -558,9 +554,9 @@ const bobbyCar: Vehicle = {
 
 ```ts
 type Vehicle = Partial<{
-  anzahlRaeder: number,
-  hubraum: Kubikmeter,
-  anzahlKufen: number,
+    anzahlRaeder: number,
+    hubraum: Kubikmeter,
+    anzahlKufen: number,
 }>;
 const helikopter: Vehicle = {
     anzahlKufen: 2,
@@ -650,4 +646,140 @@ colors = {}; // verboten wegen const
 colors.BLUE = colors.RED; // verbiet 😎
 ```
 
----
+---
+
+## Typen kombinieren
+
+```ts
+type Renderable = {
+    render: () => void,
+}
+type Updateable = {
+    update: () => void,
+}
+
+const gameObject = {
+    render: () => {},
+    update: () => {},
+};
+```
+
+---
+
+## Typen kombinieren - Union
+
+```ts
+type Renderable = {
+    render: () => void,
+}
+type Updateable = {
+    update: () => void,
+}
+type GameObject = Renderable & Updateable;
+const gameObject: GameObject = {
+    render: () => {},
+    update: () => {},
+};
+```
+
+---
+
+## Typen kombinieren
+
+```ts
+type NetworkPacket = {
+    data: Record<string, string>,
+    msg: string,
+};
+type Exception = {
+    trace: string[],
+    msg: string,
+}
+```
+
+
+---
+
+## Typen kombinieren - Intersection
+
+```ts
+type NetworkPacket = {
+    data: Record<string, string>,
+    msg: string,
+};
+type Exception = {
+    trace: string[],
+    msg: string,
+}
+type FetchResult = NetworkPacket | Exception;
+let fetch: () => FetchResult;
+const fetchResult: FetchResult = fetch();
+```
+
+---
+
+## Typen kombinieren - Intersection
+
+```ts
+type NetworkPacket = {
+    data: Record<string, string>,
+    msg: string,
+};
+type Exception = {
+    trace: string[],
+    msg: string,
+}
+type FetchResult = NetworkPacket | Exception;
+let fetch: () => FetchResult;
+const fetchResult: FetchResult = fetch();
+console.log(fetchResult.msg);
+```
+
+---
+
+## Typen kombinieren - Intersection
+
+```ts
+type NetworkPacket = {
+    data: Record<string, string>,
+    msg: string,
+};
+type Exception = {
+    trace: string[],
+    msg: string,
+}
+type FetchResult = NetworkPacket | Exception;
+let fetch: () => FetchResult;
+const fetchResult: FetchResult = fetch();
+if ('trace' in fetchResult) {
+    // fetchResult is Exception
+    console.log(fetchResult.trace);
+}
+```
+---
+
+## Typen kombinieren - Intersection
+
+```ts
+type NetworkPacket = {
+    data: Record<string, string>,
+    msg: string,
+};
+type Exception = {
+    trace: string[],
+    msg: string,
+}
+type FetchResult = NetworkPacket | Exception;
+let fetch: () => FetchResult;
+const fetchResult: FetchResult = fetch();
+if ('data' in fetchResult) {
+    // fetchResult is NetworkPacket
+    console.log(fetchResult.data);
+}
+```
+
+---
+
+## Duck Typing
+
+![img.png](img.png)