add markup type cast example

closes #13

Author: Ivan Hofer

README.md

@@ -352,6 +352,14 @@ This chapter shows how you can define events that a component emits.
       how to wrap contexts with `TypeScript`
       **[(TS-tipp #3)](#3-wrap-functions-that-have-no-strong-typings)**
 
+
+<!------------------------------------------------------------------------------------------------>
+
+#### other
+
+-  **[type cast in markup](https://github.com/ivanhofer/sveltekit-typescript-showcase/tree/main/src/07-other/01-type-cast-in-markup)**:
+   how to cast a type within the markup
+
 <!------------------------------------------------------------------------------------------------>
 <!------------------------------------------------------------------------------------------------>
 

src/07-other/01-type-cast-in-markup/Component.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Product } from '$models/product.model.js'
+
+	export let product: Product | undefined = undefined
+
+	// we make sure to always have a product, but TypeScript doesn't know that
+	$: if (!product) {
+		product = {
+			name: 'Product 1',
+			color: 'red',
+		}
+	}
+
+	const castProduct = (product: Product | undefined) => product as Product
+</script>
+
+<!-- We can't use TypeScript syntax in our markup so we need to call
+ a function that returns the object with the correct type -->
+<span>{castProduct(product).name}</span>