Svelte by Example: TypeScript

Add lang="ts" to a component's script tag to enable TypeScript.

Props & data are regular variables and can be types as such.

Events are regular HTML events.

A text editor with Svelte support will understand the types in templates.

Todo.svelte


<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  export let task: string;
  export let completed: boolean = false;

  function handleInput(event: Event) {
    const target = event.target as HTMLInputElement;

    dispatch('checked', {
      checked: target.checked,
    });
  }
</script>

<p>
  <input
    type="checkbox"
    checked={completed}
    on:input={handleInput}
  >
  {task}
</p>

resources://