diff --git a/Notes.md b/Notes.md index ebecc70..83419bb 100644 --- a/Notes.md +++ b/Notes.md @@ -221,7 +221,6 @@ Unsortiert: * Readonly * union * intersection - * type vs interface * typeof * keyof * `as` ![img.png](img/trustmebro.png) diff --git a/img/bee-type.png b/img/bee-type.png new file mode 100644 index 0000000..7b0ba67 Binary files /dev/null and b/img/bee-type.png differ diff --git a/img/bobbycar.png b/img/bobbycar.png new file mode 100644 index 0000000..517ed35 Binary files /dev/null and b/img/bobbycar.png differ diff --git a/img/hovercraft.png b/img/hovercraft.png new file mode 100644 index 0000000..17aedda Binary files /dev/null and b/img/hovercraft.png differ diff --git a/img/hubschraubär.png b/img/hubschraubär.png new file mode 100644 index 0000000..1d58eb8 Binary files /dev/null and b/img/hubschraubär.png differ diff --git a/live/types.ts b/live/types.ts new file mode 100644 index 0000000..173fa35 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/workshop.md b/workshop.md index a5dcbde..4a03877 100644 --- a/workshop.md +++ b/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; +``` +--- + +## 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 = { + RED: '#ff0000', ^^^^^^^^ + GREEN: '#00ff00', + BLUE: '#0000ff', +}; +``` +```ts +// consumer.ts +import {colors} from '@iserv/colors.ts'; +colors = {}; // verboten wegen const +colors.BLUE = colors.RED; // verbiet 😎 +``` + +--- \ No newline at end of file