chore: add example for type safety

README.md

@@ -5,19 +5,26 @@ Utilities for serializing data from server for use in the client.
 1. `Resumable` Astro component takes `id` and `data`
 1. `resume(id: string): Object` function for use int he client takes an `id` string and returns the `data` as Object
 
-## Intallation
+## Installation & Usage
+
+### Install via npm
+
+On your [Astro](https://astro.build) project:
 
 ```
 npm i @ayco/astro-resume
 ```
 
-## Usage
+### Usage
+
+Serializing and deserializing basic primitive data
 
 ```astro
 ---
 import Resumable from "@ayco/astro-resume";
+
 const data = {
-	hello: 'world'
+	hello: 'world',
 }
 ---
 
@@ -25,14 +32,46 @@ const data = {
 
 <script>
 	import {resume} from '@ayco/astro-resume';
-	console.log(
-		resume('astro-obj')
-	)
+	const data = resume('astro-obj');
+	console.log(data) // {hello: 'world'}
 </script>
 
 ```
 
-## Found issues?
+### Type Safety
 
-Send a plain text email to [~ayoayco/astro-resume@todo.sr.ht](mailto:~ayoayco/astro-resume@todo.sr.ht) or report via [SourceHut](https://todo.sr.ht/~ayoayco/astro-resume)
+You can define a type for the data and use it in the client script.
+
+```astro
+---
+import Resumable from "@ayco/astro-resume";
+
+const data = {
+	hello: 'world',
+	isOkay: true
+}
+// define the type of data to be serialized
+export type Data = typeof data;
+---
+
+<Resumable id="astro-obj" data={data} />
+
+<script>
+	import {resume} from '@ayco/astro-resume';
+
+	/**
+     * reuse the type in the client
+	 * assuming this component's name is `Component.astro`
+	 */
+	import type {Data} from './Component.astro';
+
+	const data = resume<Data>('astro-obj');
+
+	console.log(data) // {hello: 'world'}
+</script>
+```
+
+## Reporting Issues
+
+To report issues or request features, send a plain text email to [~ayoayco/astro-resume@todo.sr.ht](mailto:~ayoayco/astro-resume@todo.sr.ht) or file a ticket via [SourceHut](https://todo.sr.ht/~ayoayco/astro-resume)
 

src/pages/index.astro

@@ -2,7 +2,8 @@
 import Resumable from '../Resumable.astro';
 const data = {
     hello: 'world'
-}
+};
+export type Data = typeof data;
 ---
 
 <Resumable id="astro-obj" data={data} />
@@ -11,9 +12,10 @@ const data = {
 
 <script>
     import {resume} from '../resume';
-    const data = resume<{hello:string}>('astro-obj');
+    import {Data} from './index.astro';
+    const data = resume<Data>('astro-obj');
 
-    data.hello;
+    console.log(data);
     const renderDiv = document.querySelector('#render-here');
     if (renderDiv) {
         renderDiv.innerHTML =  JSON.stringify(data)