TypeScript Integration

TypeScript with Svelte: Your Safety Net for Building Amazing Apps! 🎯

The Story: Meet Your Code Guardian

Imagine you’re building a LEGO castle. You have all these colorful blocks, and you’re putting them together piece by piece. But what if someone gave you a magic magnifying glass that could tell you BEFORE you finished building:

“Hey! That blue block won’t fit there. You need a red one!”

That’s exactly what TypeScript does for your Svelte code! It’s like a helpful friend who watches over your shoulder and says, “Wait! That’s going to break!” — before anything actually breaks.

What IS TypeScript, Really?

Think of JavaScript as speaking a language where you can say anything:

• “The sky is banana”
• “My age is purple”

JavaScript doesn’t care. It just nods and tries to make sense of it later (usually failing).

TypeScript is like JavaScript with rules:

• “The sky is blue” ✅ (Makes sense!)
• “My age is 25” ✅ (Numbers for age!)
• “My age is purple” ❌ (Wait, that’s not a number!)

graph TD
    A["You Write Code"] --> B{TypeScript Checks}
    B -->|All Good!| C["✅ Code Runs"]
    B -->|Problem Found!| D["🚨 Error Message"]
    D --> E["You Fix It"]
    E --> B

Setting Up TypeScript in Your Svelte Project

The Magic Words

When you create a new Svelte project with TypeScript, you use:

npm create svelte@latest my-app

Then pick “Yes” when asked about TypeScript. That’s it! You’re ready!

The Special File: tsconfig.json

This file tells TypeScript how strict to be. Think of it like setting the difficulty level in a game:

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2020"
  }
}

Writing Your First TypeScript Svelte Component

Before TypeScript (Vanilla JavaScript)

<script>
  let name = 'Alex';
  let age = 10;

  function birthday() {
    age = age + 1;
  }
</script>

With TypeScript (The Safe Way!)

<script lang="ts">
  let name: string = 'Alex';
  let age: number = 10;

  function birthday(): void {
    age = age + 1;
  }
</script>

See that lang="ts"? That’s the magic switch that turns on TypeScript!

The Building Blocks: Basic Types

Think of types like different shaped containers:

Using Types in Svelte

<script lang="ts">
  // Strings for text
  let greeting: string = "Hello!";

  // Numbers for counting
  let score: number = 100;

  // Booleans for yes/no
  let isHappy: boolean = true;

  // Arrays for lists
  let colors: string[] = ["red", "blue"];
</script>

<p>{greeting} Your score: {score}</p>

Props with TypeScript: Telling Components What to Expect

The Problem Without Types

Imagine ordering a pizza and the shop doesn’t know what toppings mean. You say “pepperoni” and get… bananas? 🍌

The Solution: Typed Props!

<script lang="ts">
  // We EXPECT a name (must be text)
  // and an age (must be a number)
  export let name: string;
  export let age: number;

  // Optional prop (might be there)
  export let nickname: string = "";
</script>

<div>
  <h1>Meet {name}!</h1>
  <p>Age: {age}</p>
</div>

Now if someone tries to use your component wrong:

<!-- ❌ TypeScript catches this! -->
<UserCard name={123} age="twenty" />

<!-- ✅ This works! -->
<UserCard name="Alex" age={10} />

Creating Custom Types: Your Own LEGO Shapes

Sometimes you need to describe something more complex. Like a person who has a name, age, AND favorite color!

The type Keyword

<script lang="ts">
  // Define your custom shape
  type Person = {
    name: string;
    age: number;
    favoriteColor: string;
  };

  // Use your custom shape
  let friend: Person = {
    name: "Sam",
    age: 12,
    favoriteColor: "purple"
  };
</script>

The interface Keyword (Another Way!)

<script lang="ts">
  interface Pet {
    name: string;
    species: string;
    age: number;
  }

  let myPet: Pet = {
    name: "Buddy",
    species: "dog",
    age: 3
  };
</script>

Events with TypeScript: No More Mystery Clicks!

When a button gets clicked, something happens. TypeScript helps you know EXACTLY what that something is!

<script lang="ts">
  function handleClick(
    event: MouseEvent
  ): void {
    console.log("Clicked at:", event.clientX);
  }

  function handleInput(
    event: Event
  ): void {
    const target = event.target as HTMLInputElement;
    console.log("You typed:", target.value);
  }
</script>

<button on:click={handleClick}>
  Click Me!
</button>

<input on:input={handleInput} />

Working with Stores: Typed Data Containers

Svelte stores are like magic boxes that many components can peek into. With TypeScript, we know exactly what’s IN the box!

<script lang="ts">
  import { writable } from 'svelte/store';

  // This store holds a number
  const count = writable<number>(0);

  // This store holds a list of strings
  const todos = writable<string[]>([]);

  function addTodo(task: string): void {
    todos.update(list => [...list, task]);
  }
</script>

Generics: The Shape-Shifter Types

Sometimes you want a container that can hold ANYTHING, but once you put something in, it remembers what type it holds!

<script lang="ts">
  // A function that works with ANY type
  function firstItem<T>(items: T[]): T {
    return items[0];
  }

  // TypeScript knows these results!
  const num = firstItem([1, 2, 3]);     // number!
  const word = firstItem(["a", "b"]);   // string!
</script>

Think of it like a magical bag that can hold toys OR snacks, but once you put toys in, it only accepts more toys!

Error Messages: Your Helpful Hints

TypeScript errors might look scary, but they’re actually super helpful!

Example Error

Type 'string' is not assignable to type 'number'.

Translation: “Hey! You tried to put text where a number should go!”

How to Fix It

<script lang="ts">
  let age: number;

  // ❌ This causes the error
  age = "twenty";

  // ✅ This is correct
  age = 20;
</script>

Common Patterns You’ll Use Every Day

1. Optional Properties

interface User {
  name: string;
  email?: string;  // The ? means optional!
}

2. Union Types (This OR That)

type Status = "loading" | "success" | "error";
let current: Status = "loading";

3. Type Assertions (Trust Me!)

const element = document.querySelector(
  '#myButton'
) as HTMLButtonElement;

The Benefits Flowchart

graph TD
    A["Write TypeScript Code"] --> B["Catch Bugs Early"]
    B --> C["Better Autocomplete"]
    C --> D["Easier Refactoring"]
    D --> E["Happy Developer!"]
    E --> F["Amazing App!"]

Summary: Your TypeScript Toolkit

You Did It! 🎉

You now understand how TypeScript makes your Svelte code safer, smarter, and easier to work with!

Remember:

• TypeScript is your friend, not your enemy
• Error messages are hints, not punishments
• Start simple, add more types as you learn!

Go forth and build amazing, type-safe Svelte apps! 🚀