Add some type examples

Notes.md

@@ -221,7 +221,6 @@ Unsortiert:
   * Readonly
   * union
   * intersection
-  * type vs interface
   * typeof
   * keyof
   * `as` ![img.png](img/trustmebro.png)

live/types.ts

@@ -0,0 +1,19 @@
+type BeeRole = 'worker'|'queen'|'guard';
+type Months = number;
+type Bee = {
+    role: BeeRole,
+    name: string,
+    age: Months,
+};
+const bee: Bee = {
+    role: "guard",
+    name: 'Juergen',
+    age: 2,
+}
+
+const userNames = {
+    '652a4707-3043-4ca9-b417-24feac0f5953': 'Bernhard',
+    '017daef7-e1f1-4160-81ff-e5b17e86fc6b': 'Frieda',
+};
+
+type UserNameDictionary = Record<string, string>;

workshop.md

@@ -377,4 +377,277 @@ export function getFileExtension(path: string): string;
 
 ---
 
-## Welche Types gibt es?
+## Wie beschreibe ich nun meine Daten?
+
+```js
+const workerBee = {
+    role: 'worker',
+    name: 'Larry',
+    age: 15,
+};
+```
+
+---
+
+## Objekte
+
+```ts
+const workerBee: Bee = {
+    role: 'worker',
+    name: 'Larry',
+    age: 15,
+};
+```
+
+```ts
+type Bee = {
+    role: string,
+    name: string,
+    age: number,
+};
+```
+
+---
+
+## Semantische Typen
+
+```ts
+const workerBee: Bee = {
+    role: 'worker',
+    name: 'Larry',
+    age: 15,
+};
+```
+
+```ts
+type Bee = {
+    role: BeeRole,
+    name: string,
+    age: Months,
+};
+type BeeRole = 'worker'|'queen'|'guard';
+type Months = number;
+```
+
+---
+
+![bg 60%](img/bee-type.png)
+
+---
+
+## Dictionaries
+
+```js
+const userNames = {
+    '652a4707-3043-4ca9-b417-24feac0f5953': 'Bernhard',
+    '017daef7-e1f1-4160-81ff-e5b17e86fc6b': 'Frieda',
+};
+```
+
+---
+
+## Dictionaries
+
+```ts
+const userNames: UserNameDictionary = {
+    '652a4707-3043-4ca9-b417-24feac0f5953': 'Bernhard',
+    '017daef7-e1f1-4160-81ff-e5b17e86fc6b': 'Frieda',
+};
+type UserId = string;
+type UserNameDictionary = Record<UserId, string>;
+```
+---
+
+## Dictionaries (alternative)
+
+```ts
+const userNames: UserNameDictionary = {
+    '652a4707-3043-4ca9-b417-24feac0f5953': 'Bernhard',
+    '017daef7-e1f1-4160-81ff-e5b17e86fc6b': 'Frieda',
+};
+type UserId = string;
+type UserNameDictionary = {
+    [UserId]: string;
+};
+```
+
+---
+
+## Optionale Properties
+
+```js
+const lkw = {
+    anzahlRaeder: 18,
+    hubraum: 25,
+};
+const bobbycar = {
+    anzahlRaeder: 4,
+};
+```
+
+---
+
+## Optionale Properties
+
+```ts
+const lkw: Car = {
+    anzahlRaeder: 18,
+    hubraum: 25,
+};
+const bobbycar: Car = {
+    anzahlRaeder: 4,
+};
+type Kubikmeter = number;
+type Car = {
+  anzahlRaeder: number,
+  hubraum?: Kubikmeter,
+};
+```
+
+---
+
+## Nur optionale Properties
+
+```ts
+type Vehicle = Partial<{
+  anzahlRaeder: number,
+  hubraum: Kubikmeter,
+  anzahlKufen: number,
+}>;
+```
+![bg right:60% 100%](img/bobbycar.png)
+![bg right:60% 130%](img/hovercraft.png)
+![bg right:60% 170%](img/hubschraubär.png)
+
+---
+
+## Nur optionale Properties
+
+```ts
+type Vehicle = Partial<{
+  anzahlRaeder: number,
+  hubraum: Kubikmeter,
+  anzahlKufen: number,
+}>;
+const helikopter: Vehicle = {
+    anzahlKufen: 2,
+};
+```
+
+---
+
+## Nur optionale Properties
+
+```ts
+type Vehicle = Partial<{
+  anzahlRaeder: number,
+  hubraum: Kubikmeter,
+  anzahlKufen: number,
+}>;
+const helikopter: Vehicle = {
+    anzahlKufen: 2,
+};
+const bobbyCar: Vehicle = {
+    anzahlRaeder: 4,
+};
+```
+
+---
+
+## Nur optionale Properties
+
+```ts
+type Vehicle = Partial<{
+  anzahlRaeder: number,
+  hubraum: Kubikmeter,
+  anzahlKufen: number,
+}>;
+const helikopter: Vehicle = {
+    anzahlKufen: 2,
+};
+const bobbyCar: Vehicle = {
+    anzahlRaeder: 4,
+};
+const luftKissenFahrzeug: Vehicle = {
+    hubraum: 10,
+};
+```
+
+---
+
+## Readonly
+
+```ts
+// @iserv/colors.ts
+export type Color = string;
+export type Colors = Record<'RED'|'GREEN'|'BLUE', Color>
+export const colors: Colors = {
+    RED: '#ff0000',
+    GREEN: '#00ff00',
+    BLUE: '#0000ff',
+};
+```
+
+---
+
+## Readonly
+
+```ts
+// @iserv/colors.ts
+export type Color = string;
+export type Colors = Record<'RED'|'GREEN'|'BLUE', Color>
+export const colors: Colors = {
+    RED: '#ff0000',
+    GREEN: '#00ff00',
+    BLUE: '#0000ff',
+};
+```
+```ts
+// consumer.ts
+import {colors} from '@iserv/colors.ts';
+colors = {}; // verboten wegen const
+```
+
+---
+
+## Readonly
+
+```ts
+// @iserv/colors.ts
+export type Color = string;
+export type Colors = Record<'RED'|'GREEN'|'BLUE', Color>
+export const colors: Colors = {
+    RED: '#ff0000',
+    GREEN: '#00ff00',
+    BLUE: '#0000ff',
+};
+```
+```ts
+// consumer.ts
+import {colors} from '@iserv/colors.ts';
+colors = {}; // verboten wegen const
+colors.BLUE = colors.RED; // erlaubt 😢
+```
+
+---
+
+## Readonly
+
+```ts
+// @iserv/colors.ts
+export type Color = string;
+export type Colors = Record<'RED'|'GREEN'|'BLUE', Color>
+export const colors: Readonly<Colors> = {
+    RED: '#ff0000',  ^^^^^^^^
+    GREEN: '#00ff00',
+    BLUE: '#0000ff',
+};
+```
+```ts
+// consumer.ts
+import {colors} from '@iserv/colors.ts';
+colors = {}; // verboten wegen const
+colors.BLUE = colors.RED; // verbiet 😎
+```
+
+---