Svelte TypeScript Explained — Type-Safe Svelte Components

In this tutorial, you will learn about Svelte TypeScript Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte with TypeScript provides type safety for component props, stores, events, and server load functions, catching type errors at compile time.

What You'll Learn

• TypeScript setup in Svelte
• Typing component props with interface
• Typing stores and derived stores
• Typing events and dispatchers
• Typing load functions in SvelteKit

Why It Matters

TypeScript catches bugs before runtime, provides autocompletion, and documents component APIs. Svelte 5 provides excellent TypeScript support with $props() type inference.

<script lang="ts">
  interface User {
    id: number;
    name: string;
    email: string;
    role: "admin" | "user";
  }

  interface Props {
    user: User;
    variant?: "compact" | "full";
    onSelect?: (id: number) => void;
  }

  let { user, variant = "compact", onSelect }: Props = $props();

  import { writable } from "svelte/store";
  import type { Writable } from "svelte/store";

  const count: Writable<number> = writable(0);

  function handleClick() {
    onSelect?.(user.id);
  }
</script>

<div class="card {variant}" onclick={handleClick}>
  <h3>{user.name}</h3>
  <p>{user.email}</p>
  {#if variant === "full"}
    <span class="badge">{user.role}</span>
  {/if}
</div>

Expected output: TypeScript validates user prop shape, variant values, onSelect parameter type, and count store type throughout the component.