Svelte Defaults
Core SvelteKit patterns and conventions
Details
Language / Topic
TypeScriptCategory
framework
Compatible Frameworks
svelte
Rules
balanced
- Use `<script lang="ts">` in all `.svelte` files and `lang="ts"` in `<script module>` blocks for TypeScript support.
- Type component props with `let { name, count = 0 }: { name: string; count?: number } = $props()` using Svelte 5 runes.
- Use `$state<T>()` with explicit generic types for reactive state declarations.
- Type store values with generics: `writable<User | null>(null)`, and use `Snippet<[item: T]>` for typed snippet props in Svelte 5.
- Type event handlers with Svelte's event types: `on:click={(e: MouseEvent) => ...}` and custom events with `createEventDispatcher<{ submit: FormData }>()`.
- Define shared types in `.ts` files and import them in `.svelte` components — co-locate component-specific types in the same directory.
- Use `$derived` with typed expressions and `$effect` with typed cleanup functions for reactive computations.
- Export typed component APIs using `export function` in `<script module>` blocks for cross-component communication.
- Type store values explicitly: `writable<User | null>(null)` and `derived<string>(store, ($s) => $s.name)`.