└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 	<h1>Svelte+TypeScript Cheatsheets</h1>
 3 | 	
 4 | </div>
 5 | ### Typing Props
 6 | 
 7 | * required props are just defined like normal with a : to inidicate the type.
 8 | * optional props are the same, however you need to set a default value.
 9 | 
10 | Basically, if need a prop to be optional, you need to assign it a value when defined instead of using `let value?: string` 
11 | 
12 | ```html
13 | <script lang="ts">
14 |     export let someProp: string // Required prop
15 |     export let someOtherProp: string = "hello" // Optional prop
16 | </script>
17 | ```
18 | 
19 | ### Stores
20 | 
21 | ```javascript
22 | 
23 | interface BlogPost {
24 |     status: "ACTIVE" | "HIDDEN"
25 | }
26 | 
27 | 
28 | const post = writable<BlogPost>({
29 | 	status: 'ACTIVE',
30 | })
31 | ```
32 | 
33 | To type an expected store, like passing a store as a prop, you would use the Writable generic type.
34 | 
35 | ```javascript
36 | import type { Writable } from 'svelte/store';
37 | 
38 | export let data: Writable<BlogPost>
39 | 
40 | ```
41 | 
42 | ### Events
43 | 
44 | ```javascript
45 | const dispatch = createEventDispatcher<{ nameOfEvent: { passedProperties: any } }>()
46 | ```
47 | 
48 | here is the same thing with real code.
49 | 
50 | ```javascript
51 | const dispatch = createEventDispatcher<{ toggle: { isToggled: boolean } }>()
52 | 
53 | // Now I'm typed!
54 | dispatch('toggle', {
55 | 	isToggled,
56 | })
57 | 
58 | ```
59 | 
60 | 
61 | ### Types in Svelte Template Code
62 | 
63 | This is not currently supported.
64 | 
65 | ### JSDoc Type Checking
66 | 
67 | For now, see: https://www.swyx.io/jsdoc-swyxkit/
68 | 


--------------------------------------------------------------------------------