📘 TypeScript with Svelte: Compile-Time Types

🎯 Introduction

Welcome to the exciting world of TypeScript with Svelte! 🎉 In this comprehensive guide, we’ll explore how Svelte’s compile-time magic works perfectly with TypeScript’s type safety to create lightning-fast, type-safe applications.

You’ll discover how TypeScript and Svelte combine to give you the best of both worlds: Svelte’s incredible performance and TypeScript’s bulletproof type safety. Whether you’re building web applications 🌐, interactive dashboards 📊, or component libraries 📚, understanding TypeScript with Svelte is essential for modern web development.

By the end of this tutorial, you’ll feel confident using TypeScript with Svelte in your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding TypeScript with Svelte

🤔 What is TypeScript with Svelte?

TypeScript with Svelte is like having a super-powered development experience 🚀. Think of it as having a personal assistant that checks your code while Svelte’s compiler works its magic to create incredibly fast applications.

In TypeScript terms, Svelte provides compile-time optimization while TypeScript provides compile-time type checking. This means you can:

• ✨ Catch errors before they reach your users
• 🚀 Get amazing performance from Svelte’s compiler
• 🛡️ Enjoy type safety throughout your components
• 💡 Benefit from excellent IDE support and autocompletion

💡 Why Use TypeScript with Svelte?

Here’s why developers love this combination:

1. Compile-Time Safety 🔒: Both TypeScript and Svelte catch issues at build time
2. Amazing Performance ⚡: Svelte generates vanilla JavaScript with minimal runtime overhead
3. Developer Experience 💻: Incredible IDE support and debugging capabilities
4. Smaller Bundle Sizes 📦: Svelte’s compiler removes unused code automatically

Real-world example: Imagine building a real-time chat application 💬. With TypeScript and Svelte, you get type-safe message handling with incredible performance!

🔧 Basic Syntax and Usage

📝 Setting Up TypeScript with Svelte

Let’s start with setting up your Svelte project with TypeScript:

# 🎯 Create a new Svelte project with TypeScript
npm create svelte@latest my-svelte-app
cd my-svelte-app

# 📦 Choose TypeScript template during setup
npm install

🎨 Your First TypeScript Svelte Component

Here’s a simple TypeScript-powered Svelte component:

<!-- 📘 HelloWorld.svelte -->
<script lang="ts">
  // 👋 TypeScript in Svelte!
  export let name: string = "World"; // 🎯 Typed prop with default
  export let count: number = 0;      // 🔢 Number prop
  
  // 🎨 Typed reactive statement
  $: greeting = `Hello, ${name}! 👋`;
  $: isHighCount = count > 5; // 🔥 Boolean derived from count
  
  // 🎮 Typed event handler
  const handleClick = (): void => {
    count += 1;
    console.log(`Clicked! Count is now: ${count} 🎉`);
  };
  
  // 🎨 Interface for complex data
  interface UserData {
    id: number;
    name: string;
    emoji: string;
  }
  
  const user: UserData = {
    id: 1,
    name: "TypeScript Fan",
    emoji: "🚀"
  };
</script>

<div class="container">
  <h1>{greeting}</h1>
  <p>User: {user.emoji} {user.name}</p>
  
  <button 
    on:click={handleClick}
    class:active={isHighCount}
  >
    Clicked {count} times! 🎯
  </button>
  
  {#if isHighCount}
    <p>🔥 You're on fire! Great clicking!</p>
  {/if}
</div>

<style>
  .container {
    text-align: center;
    padding: 2rem;
  }
  
  .active {
    background-color: #ff6b6b;
    color: white;
  }
</style>

💡 Explanation: Notice how we use lang="ts" in the script tag! This tells Svelte to use TypeScript for type checking.

🎯 Common TypeScript Patterns in Svelte

Here are patterns you’ll use daily:

<!-- 🏗️ Advanced Component with Types -->
<script lang="ts">
  // 🎨 Union types for component states
  type LoadingState = "idle" | "loading" | "success" | "error";
  type Theme = "light" | "dark" | "auto";
  
  // 📋 Props with complex types
  export let items: Array<{id: string; name: string; emoji: string}> = [];
  export let theme: Theme = "light";
  export let onItemClick: (id: string) => void = () => {};
  
  let loadingState: LoadingState = "idle";
  
  // 🔄 Async function with proper typing
  const loadData = async (): Promise<void> => {
    loadingState = "loading";
    
    try {
      // 🎯 Simulated API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      loadingState = "success";
    } catch (error) {
      loadingState = "error";
      console.error("Failed to load data:", error);
    }
  };
</script>

💡 Practical Examples

🛒 Example 1: TypeScript Shopping Cart Component

Let’s build a real shopping cart with TypeScript:

<!-- 🛍️ ShoppingCart.svelte -->
<script lang="ts">
  // 🛒 Product interface
  interface Product {
    id: string;
    name: string;
    price: number;
    emoji: string;
    category: "electronics" | "clothing" | "books" | "food";
  }
  
  // 🧾 Cart item extends product with quantity
  interface CartItem extends Product {
    quantity: number;
  }
  
  // 📦 Props
  export let products: Product[] = [];
  
  // 🎯 Component state
  let cart: CartItem[] = [];
  let isCheckingOut: boolean = false;
  
  // 💰 Computed total with type safety
  $: total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  $: itemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
  
  // ➕ Add to cart function
  const addToCart = (product: Product): void => {
    const existingItem = cart.find(item => item.id === product.id);
    
    if (existingItem) {
      // 🔄 Update existing item
      cart = cart.map(item => 
        item.id === product.id 
          ? { ...item, quantity: item.quantity + 1 }
          : item
      );
    } else {
      // 🆕 Add new item
      cart = [...cart, { ...product, quantity: 1 }];
    }
    
    console.log(`Added ${product.emoji} ${product.name} to cart! 🛒`);
  };
  
  // ➖ Remove from cart
  const removeFromCart = (productId: string): void => {
    cart = cart.filter(item => item.id !== productId);
  };
  
  // 💳 Checkout process
  const checkout = async (): Promise<void> => {
    isCheckingOut = true;
    
    try {
      // 🎯 Simulate payment processing
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      console.log(`🎉 Order completed! Total: $${total.toFixed(2)}`);
      cart = []; // 🧹 Clear cart
      
    } catch (error) {
      console.error("Checkout failed:", error);
    } finally {
      isCheckingOut = false;
    }
  };
</script>

<div class="shopping-cart">
  <h2>🛒 TypeScript Shopping Cart</h2>
  
  <!-- 📦 Products list -->
  <div class="products">
    <h3>🛍️ Available Products</h3>
    {#each products as product (product.id)}
      <div class="product-card">
        <span class="emoji">{product.emoji}</span>
        <span class="name">{product.name}</span>
        <span class="price">${product.price.toFixed(2)}</span>
        <button on:click={() => addToCart(product)}>
          Add to Cart ➕
        </button>
      </div>
    {/each}
  </div>
  
  <!-- 🧾 Cart display -->
  <div class="cart">
    <h3>🛒 Your Cart ({itemCount} items)</h3>
    
    {#if cart.length === 0}
      <p>Your cart is empty 😢</p>
    {:else}
      {#each cart as item (item.id)}
        <div class="cart-item">
          <span>{item.emoji} {item.name}</span>
          <span>Qty: {item.quantity}</span>
          <span>${(item.price * item.quantity).toFixed(2)}</span>
          <button on:click={() => removeFromCart(item.id)}>❌</button>
        </div>
      {/each}
      
      <div class="total">
        <strong>Total: ${total.toFixed(2)} 💰</strong>
      </div>
      
      <button 
        class="checkout-btn"
        on:click={checkout}
        disabled={isCheckingOut}
      >
        {isCheckingOut ? "Processing... ⏳" : "Checkout 💳"}
      </button>
    {/if}
  </div>
</div>

<style>
  .shopping-cart {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  .products, .cart {
    margin: 2rem 0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  
  .product-card, .cart-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: #f9f9f9;
    border-radius: 4px;
  }
  
  .checkout-btn {
    background: #28a745;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
  }
  
  .checkout-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
  }
</style>

🎯 Try it yourself: Add a quantity selector and discount codes feature!

🎮 Example 2: Real-Time Game Score Dashboard

Let’s create a live game dashboard:

<!-- 🏆 GameDashboard.svelte -->
<script lang="ts">
  // 🎮 Game interfaces
  interface Player {
    id: string;
    name: string;
    avatar: string; // emoji
    score: number;
    level: number;
    status: "online" | "offline" | "in-game";
  }
  
  interface GameMatch {
    id: string;
    players: Player[];
    startTime: Date;
    gameType: "quick" | "ranked" | "tournament";
    status: "waiting" | "active" | "finished";
  }
  
  // 📊 Component state
  let players: Player[] = [
    { id: "1", name: "TypeScript Hero", avatar: "🚀", score: 1500, level: 42, status: "online" },
    { id: "2", name: "Svelte Master", avatar: "⚡", score: 1200, level: 38, status: "in-game" },
    { id: "3", name: "Code Ninja", avatar: "🥷", score: 1800, level: 55, status: "online" }
  ];
  
  let currentMatch: GameMatch | null = null;
  let isMatchmaking: boolean = false;
  
  // 🎯 Reactive computations
  $: onlinePlayers = players.filter(p => p.status === "online");
  $: topPlayer = players.reduce((top, player) => 
    player.score > top.score ? player : top
  );
  $: averageLevel = Math.round(
    players.reduce((sum, p) => sum + p.level, 0) / players.length
  );
  
  // 🎮 Start matchmaking
  const startMatchmaking = async (): Promise<void> => {
    if (onlinePlayers.length < 2) {
      alert("Need at least 2 players online! 👥");
      return;
    }
    
    isMatchmaking = true;
    
    try {
      // 🔍 Simulate matchmaking
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      currentMatch = {
        id: `match-${Date.now()}`,
        players: onlinePlayers.slice(0, 2), // Take first 2 players
        startTime: new Date(),
        gameType: "quick",
        status: "active"
      };
      
      // 🎯 Update player status
      players = players.map(player => 
        currentMatch!.players.some(p => p.id === player.id)
          ? { ...player, status: "in-game" }
          : player
      );
      
      console.log("🎮 Match started!", currentMatch);
      
    } catch (error) {
      console.error("Matchmaking failed:", error);
    } finally {
      isMatchmaking = false;
    }
  };
  
  // 🏁 End match
  const endMatch = (): void => {
    if (!currentMatch) return;
    
    // 🎉 Award points to winner (random for demo)
    const winner = currentMatch.players[Math.floor(Math.random() * currentMatch.players.length)];
    
    players = players.map(player => {
      if (player.id === winner.id) {
        return {
          ...player,
          score: player.score + 100,
          level: player.level + 1,
          status: "online"
        };
      }
      return currentMatch!.players.some(p => p.id === player.id)
        ? { ...player, status: "online" }
        : player;
    });
    
    console.log(`🏆 ${winner.avatar} ${winner.name} won the match!`);
    currentMatch = null;
  };
</script>

<div class="dashboard">
  <h1>🎮 Real-Time Game Dashboard</h1>
  
  <!-- 📊 Stats overview -->
  <div class="stats">
    <div class="stat-card">
      <h3>👥 Online Players</h3>
      <p>{onlinePlayers.length}</p>
    </div>
    
    <div class="stat-card">
      <h3>🏆 Top Player</h3>
      <p>{topPlayer.avatar} {topPlayer.name}</p>
      <small>{topPlayer.score} points</small>
    </div>
    
    <div class="stat-card">
      <h3>📈 Avg Level</h3>
      <p>{averageLevel}</p>
    </div>
  </div>
  
  <!-- 👥 Players list -->
  <div class="players">
    <h2>🎯 Players</h2>
    {#each players as player (player.id)}
      <div class="player-card" class:in-game={player.status === "in-game"}>
        <span class="avatar">{player.avatar}</span>
        <div class="player-info">
          <h4>{player.name}</h4>
          <p>Level {player.level} • {player.score} points</p>
          <span class="status {player.status}">{player.status}</span>
        </div>
      </div>
    {/each}
  </div>
  
  <!-- 🎮 Match controls -->
  <div class="match-controls">
    {#if currentMatch}
      <div class="current-match">
        <h3>🎯 Current Match</h3>
        <p>Game Type: {currentMatch.gameType}</p>
        <p>Players: {currentMatch.players.map(p => `${p.avatar} ${p.name}`).join(" vs ")}</p>
        <button on:click={endMatch}>End Match 🏁</button>
      </div>
    {:else}
      <button 
        on:click={startMatchmaking}
        disabled={isMatchmaking || onlinePlayers.length < 2}
      >
        {isMatchmaking ? "Finding Match... 🔍" : "Start Matchmaking 🎮"}
      </button>
    {/if}
  </div>
</div>

<style>
  .dashboard {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
  }
  
  .stat-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
  }
  
  .players {
    margin: 2rem 0;
  }
  
  .player-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin: 0.5rem 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  .player-card.in-game {
    background: #fff3cd;
    border-color: #ffeaa7;
  }
  
  .avatar {
    font-size: 2rem;
  }
  
  .status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
  }
  
  .status.online { background: #d4edda; color: #155724; }
  .status.offline { background: #f8d7da; color: #721c24; }
  .status.in-game { background: #d1ecf1; color: #0c5460; }
  
  .match-controls {
    text-align: center;
    margin: 2rem 0;
  }
  
  .current-match {
    background: #e7f3ff;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
  }
</style>

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: TypeScript Stores in Svelte

When you’re ready to level up, try Svelte stores with TypeScript:

// 🏪 stores.ts - Type-safe Svelte stores
import { writable, derived, readable } from 'svelte/store';

// 🎯 User store with TypeScript
interface User {
  id: string;
  name: string;
  email: string;
  preferences: {
    theme: 'light' | 'dark';
    notifications: boolean;
  };
}

export const user = writable<User | null>(null);

// 🎨 Theme store derived from user
export const theme = derived(
  user,
  ($user): 'light' | 'dark' => $user?.preferences.theme ?? 'light'
);

// ⏰ Real-time clock store
export const currentTime = readable<Date>(new Date(), (set) => {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});

// 🛒 Shopping cart store with complex types
interface CartState {
  items: Array<{
    id: string;
    name: string;
    price: number;
    quantity: number;
  }>;
  total: number;
  discount: number;
}

const createCartStore = () => {
  const { subscribe, set, update } = writable<CartState>({
    items: [],
    total: 0,
    discount: 0
  });

  return {
    subscribe,
    addItem: (item: Omit<CartState['items'][0], 'quantity'>) => {
      update(state => {
        const existingItem = state.items.find(i => i.id === item.id);
        
        if (existingItem) {
          existingItem.quantity += 1;
        } else {
          state.items.push({ ...item, quantity: 1 });
        }
        
        state.total = state.items.reduce((sum, i) => sum + (i.price * i.quantity), 0);
        return state;
      });
    },
    clear: () => set({ items: [], total: 0, discount: 0 })
  };
};

export const cart = createCartStore();

🏗️ Advanced Topic 2: Component Typing with Slots

For the brave developers, here’s advanced component typing:

<!-- 🎨 AdvancedModal.svelte -->
<script lang="ts">
  import type { SvelteComponent } from 'svelte';
  
  // 🎯 Complex prop types
  interface ModalAction {
    label: string;
    variant: 'primary' | 'secondary' | 'danger';
    action: () => void;
    disabled?: boolean;
  }
  
  export let isOpen: boolean = false;
  export let title: string;
  export let size: 'small' | 'medium' | 'large' = 'medium';
  export let actions: ModalAction[] = [];
  export let onClose: () => void = () => {};
  export let allowBackdropClose: boolean = true;
  
  // 🎪 Slot props typing
  interface ModalSlotProps {
    closeModal: () => void;
    modalId: string;
  }
  
  const modalId = `modal-${Math.random().toString(36).substr(2, 9)}`;
  
  const closeModal = (): void => {
    isOpen = false;
    onClose();
  };
  
  const handleBackdropClick = (event: MouseEvent): void => {
    if (allowBackdropClose && event.target === event.currentTarget) {
      closeModal();
    }
  };
  
  // 🎯 Typed slot props
  const slotProps: ModalSlotProps = {
    closeModal,
    modalId
  };
</script>

{#if isOpen}
  <div 
    class="modal-backdrop" 
    on:click={handleBackdropClick}
    on:keydown={(e) => e.key === 'Escape' && closeModal()}
    role="dialog"
    aria-labelledby="{modalId}-title"
    aria-modal="true"
  >
    <div class="modal-content {size}">
      <header class="modal-header">
        <h2 id="{modalId}-title">{title}</h2>
        <button class="close-btn" on:click={closeModal}>❌</button>
      </header>
      
      <main class="modal-body">
        <!-- 🎪 Named slot with typed props -->
        <slot name="content" {closeModal} {modalId} />
        
        <!-- 🎯 Default slot with props -->
        <slot {...slotProps} />
      </main>
      
      {#if actions.length > 0}
        <footer class="modal-footer">
          {#each actions as action}
            <button
              class="action-btn {action.variant}"
              disabled={action.disabled}
              on:click={action.action}
            >
              {action.label}
            </button>
          {/each}
        </footer>
      {/if}
    </div>
  </div>
{/if}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Forgetting lang="ts" in Script Tags

<!-- ❌ Wrong way - no TypeScript! -->
<script>
  let name: string = "Hello"; // ⚠️ Type annotation ignored!
</script>

<!-- ✅ Correct way - TypeScript enabled! -->
<script lang="ts">
  let name: string = "Hello"; // ✅ Type safety enabled!
</script>

🤯 Pitfall 2: Incorrect Event Handler Typing

<!-- ❌ Dangerous - untyped events! -->
<script lang="ts">
  const handleClick = (event) => { // 💥 `event` is `any`!
    console.log(event.target.value); // Might not exist!
  };
</script>

<!-- ✅ Safe - properly typed events! -->
<script lang="ts">
  const handleClick = (event: MouseEvent): void => {
    const target = event.target as HTMLButtonElement;
    console.log("Button clicked:", target.textContent); // ✅ Type safe!
  };
  
  const handleInput = (event: Event): void => {
    const target = event.target as HTMLInputElement;
    console.log("Input value:", target.value); // ✅ Safe access!
  };
</script>

🔧 Pitfall 3: Store Typing Issues

// ❌ Wrong way - losing type safety in stores!
import { writable } from 'svelte/store';

const userData = writable(null); // 💥 Type is `any`!

// ✅ Correct way - explicit store typing!
import { writable } from 'svelte/store';

interface User {
  id: string;
  name: string;
}

const userData = writable<User | null>(null); // ✅ Typed store!

🛠️ Best Practices

1. 🎯 Always Use lang="ts": Enable TypeScript in all your script tags
2. 📝 Type Your Props: Explicitly type all component props and their defaults
3. 🛡️ Type Event Handlers: Use proper event types for all event handlers
4. 🎨 Interface Everything: Create interfaces for complex data structures
5. ✨ Leverage Reactive Statements: Use $: with proper TypeScript inference
6. 🏪 Type Your Stores: Always provide explicit types for Svelte stores
7. 🎪 Type Slot Props: Define interfaces for slot prop types

🧪 Hands-On Exercise

🎯 Challenge: Build a TypeScript Todo App with Svelte

Create a fully type-safe todo application with these features:

📋 Requirements:

• ✅ Todo items with title, completed status, priority, and due date
• 🏷️ Categories for todos (work, personal, shopping)
• 👤 User assignment feature
• 📅 Sorting and filtering capabilities
• 🎨 Each todo needs an emoji based on category!
• 💾 Local storage persistence

🚀 Extra Credit:

• Add drag-and-drop reordering
• Implement todo search functionality
• Create a statistics dashboard
• Add keyboard shortcuts

💡 Solution

<!-- 📋 TodoApp.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  
  // 🎯 Todo interfaces
  interface Todo {
    id: string;
    title: string;
    completed: boolean;
    priority: 'low' | 'medium' | 'high';
    category: 'work' | 'personal' | 'shopping';
    dueDate?: Date;
    assignee?: string;
    createdAt: Date;
  }
  
  type FilterType = 'all' | 'active' | 'completed';
  type SortType = 'created' | 'priority' | 'dueDate' | 'title';
  
  // 📦 Component state
  let todos: Todo[] = [];
  let newTodoTitle: string = '';
  let selectedCategory: Todo['category'] = 'personal';
  let selectedPriority: Todo['priority'] = 'medium';
  let filter: FilterType = 'all';
  let sortBy: SortType = 'created';
  let searchTerm: string = '';
  
  // 🎨 Category emojis
  const categoryEmojis: Record<Todo['category'], string> = {
    work: '💼',
    personal: '🏠',
    shopping: '🛒'
  };
  
  // 🎯 Priority colors
  const priorityColors: Record<Todo['priority'], string> = {
    low: '#28a745',
    medium: '#ffc107',
    high: '#dc3545'
  };
  
  // 🔄 Reactive filtering and sorting
  $: filteredTodos = todos
    .filter(todo => {
      // 🎯 Filter by completion status
      if (filter === 'active' && todo.completed) return false;
      if (filter === 'completed' && !todo.completed) return false;
      
      // 🔍 Filter by search term
      if (searchTerm && !todo.title.toLowerCase().includes(searchTerm.toLowerCase())) {
        return false;
      }
      
      return true;
    })
    .sort((a, b) => {
      switch (sortBy) {
        case 'priority':
          const priorityOrder = { high: 3, medium: 2, low: 1 };
          return priorityOrder[b.priority] - priorityOrder[a.priority];
        case 'dueDate':
          if (!a.dueDate && !b.dueDate) return 0;
          if (!a.dueDate) return 1;
          if (!b.dueDate) return -1;
          return a.dueDate.getTime() - b.dueDate.getTime();
        case 'title':
          return a.title.localeCompare(b.title);
        default:
          return b.createdAt.getTime() - a.createdAt.getTime();
      }
    });
  
  // 📊 Statistics
  $: completedCount = todos.filter(t => t.completed).length;
  $: totalCount = todos.length;
  $: completionRate = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
  
  // ➕ Add new todo
  const addTodo = (): void => {
    if (!newTodoTitle.trim()) return;
    
    const newTodo: Todo = {
      id: Date.now().toString(),
      title: newTodoTitle.trim(),
      completed: false,
      priority: selectedPriority,
      category: selectedCategory,
      createdAt: new Date()
    };
    
    todos = [newTodo, ...todos];
    newTodoTitle = '';
    saveTodos();
    
    console.log(`✅ Added todo: ${categoryEmojis[newTodo.category]} ${newTodo.title}`);
  };
  
  // ✅ Toggle completion
  const toggleTodo = (id: string): void => {
    todos = todos.map(todo => 
      todo.id === id 
        ? { ...todo, completed: !todo.completed }
        : todo
    );
    saveTodos();
  };
  
  // ❌ Delete todo
  const deleteTodo = (id: string): void => {
    const todo = todos.find(t => t.id === id);
    todos = todos.filter(t => t.id !== id);
    saveTodos();
    
    if (todo) {
      console.log(`🗑️ Deleted: ${categoryEmojis[todo.category]} ${todo.title}`);
    }
  };
  
  // 💾 Local storage functions
  const saveTodos = (): void => {
    localStorage.setItem('typescript-todos', JSON.stringify(todos));
  };
  
  const loadTodos = (): void => {
    const saved = localStorage.getItem('typescript-todos');
    if (saved) {
      try {
        const parsed = JSON.parse(saved);
        todos = parsed.map((todo: any) => ({
          ...todo,
          createdAt: new Date(todo.createdAt),
          dueDate: todo.dueDate ? new Date(todo.dueDate) : undefined
        }));
      } catch (error) {
        console.error('Failed to load todos:', error);
      }
    }
  };
  
  // 🎮 Keyboard shortcuts
  const handleKeydown = (event: KeyboardEvent): void => {
    if (event.ctrlKey || event.metaKey) {
      switch (event.key) {
        case 'k':
          event.preventDefault();
          document.getElementById('search-input')?.focus();
          break;
        case 'n':
          event.preventDefault();
          document.getElementById('new-todo-input')?.focus();
          break;
      }
    }
  };
  
  // 🚀 Initialize on mount
  onMount(() => {
    loadTodos();
  });
</script>

<svelte:window on:keydown={handleKeydown} />

<div class="todo-app">
  <header class="app-header">
    <h1>📋 TypeScript Todo App</h1>
    <div class="stats">
      <span>📊 {completedCount}/{totalCount} completed ({completionRate}%)</span>
    </div>
  </header>
  
  <!-- 🔍 Search and filters -->
  <div class="controls">
    <input
      id="search-input"
      type="text"
      placeholder="🔍 Search todos... (Ctrl+K)"
      bind:value={searchTerm}
    />
    
    <select bind:value={filter}>
      <option value="all">All Todos</option>
      <option value="active">Active</option>
      <option value="completed">Completed</option>
    </select>
    
    <select bind:value={sortBy}>
      <option value="created">Sort by Created</option>
      <option value="priority">Sort by Priority</option>
      <option value="dueDate">Sort by Due Date</option>
      <option value="title">Sort by Title</option>
    </select>
  </div>
  
  <!-- ➕ Add new todo -->
  <div class="add-todo">
    <input
      id="new-todo-input"
      type="text"
      placeholder="What needs to be done? (Ctrl+N)"
      bind:value={newTodoTitle}
      on:keydown={(e) => e.key === 'Enter' && addTodo()}
    />
    
    <select bind:value={selectedCategory}>
      <option value="personal">🏠 Personal</option>
      <option value="work">💼 Work</option>
      <option value="shopping">🛒 Shopping</option>
    </select>
    
    <select bind:value={selectedPriority}>
      <option value="low">🟢 Low</option>
      <option value="medium">🟡 Medium</option>
      <option value="high">🔴 High</option>
    </select>
    
    <button on:click={addTodo} disabled={!newTodoTitle.trim()}>
      Add Todo ➕
    </button>
  </div>
  
  <!-- 📋 Todos list -->
  <div class="todos-list">
    {#if filteredTodos.length === 0}
      <div class="empty-state">
        {#if searchTerm}
          <p>🔍 No todos found matching "{searchTerm}"</p>
        {:else if filter === 'completed'}
          <p>🎉 No completed todos yet!</p>
        {:else if filter === 'active'}
          <p>✨ All caught up! No active todos.</p>
        {:else}
          <p>📝 No todos yet. Add one above!</p>
        {/if}
      </div>
    {:else}
      {#each filteredTodos as todo (todo.id)}
        <div class="todo-item" class:completed={todo.completed}>
          <input
            type="checkbox"
            checked={todo.completed}
            on:change={() => toggleTodo(todo.id)}
          />
          
          <div class="todo-content">
            <div class="todo-header">
              <span class="category-emoji">{categoryEmojis[todo.category]}</span>
              <span class="todo-title" class:completed={todo.completed}>
                {todo.title}
              </span>
              <span 
                class="priority-badge"
                style="background-color: {priorityColors[todo.priority]}"
              >
                {todo.priority}
              </span>
            </div>
            
            <div class="todo-meta">
              <small>
                Category: {todo.category} • 
                Created: {todo.createdAt.toLocaleDateString()}
                {#if todo.dueDate}
                  • Due: {todo.dueDate.toLocaleDateString()}
                {/if}
              </small>
            </div>
          </div>
          
          <button class="delete-btn" on:click={() => deleteTodo(todo.id)}>
            🗑️
          </button>
        </div>
      {/each}
    {/if}
  </div>
</div>

<style>
  .todo-app {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  .app-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .stats {
    color: #666;
    font-size: 0.9rem;
  }
  
  .controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  
  .controls input, .controls select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    flex: 1;
    min-width: 150px;
  }
  
  .add-todo {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }
  
  .add-todo input {
    flex: 2;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
  }
  
  .add-todo select, .add-todo button {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
  }
  
  .add-todo button {
    background: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: 600;
  }
  
  .add-todo button:disabled {
    background: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
  }
  
  .todos-list {
    margin-top: 2rem;
  }
  
  .empty-state {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-style: italic;
  }
  
  .todo-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.2s ease;
  }
  
  .todo-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .todo-item.completed {
    opacity: 0.7;
    background: #f8f9fa;
  }
  
  .todo-content {
    flex: 1;
  }
  
  .todo-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }
  
  .category-emoji {
    font-size: 1.2rem;
  }
  
  .todo-title {
    flex: 1;
    font-weight: 500;
  }
  
  .todo-title.completed {
    text-decoration: line-through;
    color: #6c757d;
  }
  
  .priority-badge {
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .todo-meta {
    color: #6c757d;
    font-size: 0.8rem;
  }
  
  .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }
  
  .delete-btn:hover {
    opacity: 1;
  }
  
  input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
  }
</style>

🎓 Key Takeaways

You’ve mastered TypeScript with Svelte! Here’s what you can now do:

• ✅ Set up TypeScript in Svelte projects with confidence 💪
• ✅ Create type-safe components with proper prop typing 🛡️
• ✅ Use reactive statements with TypeScript inference 🎯
• ✅ Handle events safely with proper event typing 🐛
• ✅ Build complex applications with Svelte and TypeScript! 🚀

Remember: TypeScript and Svelte together create an incredible developer experience! You get compile-time safety with runtime performance. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered TypeScript with Svelte!

Here’s what to do next:

1. 💻 Practice building the todo app from the exercise
2. 🏗️ Create a Svelte component library with TypeScript
3. 📚 Explore SvelteKit for full-stack TypeScript development
4. 🌟 Build a real project combining both technologies!

Remember: Every Svelte expert started with their first component. Keep building, keep learning, and most importantly, have fun creating amazing applications! 🚀

Happy coding! 🎉🚀✨