diff --git a/img.png b/img.png new file mode 100644 index 0000000..0e8a528 Binary files /dev/null and b/img.png differ diff --git a/live/types.ts b/live/types.ts index 173fa35..8239e73 100644 --- a/live/types.ts +++ b/live/types.ts @@ -16,4 +16,40 @@ const userNames = { '017daef7-e1f1-4160-81ff-e5b17e86fc6b': 'Frieda', }; -type UserNameDictionary = Record; \ No newline at end of file +type UserNameDictionary = Record; + +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, + 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); +} + diff --git a/workshop.md b/workshop.md index 4a03877..da6da95 100644 --- a/workshop.md +++ b/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 😎 ``` ---- \ No newline at end of file +--- + +## 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, + msg: string, +}; +type Exception = { + trace: string[], + msg: string, +} +``` + + +--- + +## Typen kombinieren - Intersection + +```ts +type NetworkPacket = { + data: Record, + 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, + 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, + 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, + 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) \ No newline at end of file