https://github.com/stolinski/svelte-typescript-cheetsheet

https://github.com/stolinski/svelte-typescript-cheetsheet

Last synced: 12 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/stolinski/svelte-typescript-cheetsheet
• Owner: stolinski
• Created: 2022-02-03T22:22:49.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-07-29T21:10:36.000Z (over 2 years ago)
• Last Synced: 2024-04-13T14:36:30.866Z (7 months ago)
• Size: 6.84 KB
• Stars: 23
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


	
Svelte+TypeScript Cheatsheets

	



### Typing Props


* required props are just defined like normal with a : to inidicate the type.

* optional props are the same, however you need to set a default value.

Basically, if need a prop to be optional, you need to assign it a value when defined instead of using `let value?: string` 

```html

    export let someProp: string // Required prop

    export let someOtherProp: string = "hello" // Optional prop

```

### Stores

```javascript

interface BlogPost {

    status: "ACTIVE" | "HIDDEN"

}

const post = writable({

	status: 'ACTIVE',

})

```

To type an expected store, like passing a store as a prop, you would use the Writable generic type.

```javascript

import type { Writable } from 'svelte/store';

export let data: Writable

```

### Events

```javascript

const dispatch = createEventDispatcher<{ nameOfEvent: { passedProperties: any } }>()

```

here is the same thing with real code.

```javascript

const dispatch = createEventDispatcher<{ toggle: { isToggled: boolean } }>()

// Now I'm typed!

dispatch('toggle', {

	isToggled,

})

```

### Types in Svelte Template Code

This is not currently supported.

### JSDoc Type Checking

For now, see: https://www.swyx.io/jsdoc-swyxkit/