TypeScript with Svelte

เปิดใช้ TypeScript

เพิ่ม lang="ts" ให้ script แล้วคุณก็เขียน TypeScript ได้ rune เป็น generic อยู่แล้ว state จึงถูก type โดยไม่ต้องมีพิธีรีตอง:

<script lang="ts">
  let count = $state(0);          // inferred number
  let name = $state<string>('');   // explicit
  let user = $state<User | null>(null);
</script>

compiler infer type จากค่าเริ่มต้นเมื่อทำได้ ใช้ $state<T>(...) เมื่ออยาก explicit (เช่น ค่าเริ่มต้นเป็น null แต่ type กว้างกว่านั้น)

type ให้ props

ประกาศ interface สำหรับ props แล้ว annotate การ destructure $props() นี่คือวิธี idiomatic ของ Svelte 5 ที่มาแทน props แบบ export let ที่ type ทีละตัวใน Svelte 4:

<script lang="ts">
  interface Props {
    label: string;
    count?: number;          // optional
    onclick?: () => void;    // event callbacks are just props
  }

  let { label, count = 0, onclick }: Props = $props();
</script>

<button {onclick}>{label}: {count}</button>

ผู้ใช้ component จะได้ autocompletion และ type-checking ตอนใช้ และ svelte-check จะ flag prop ที่ผิดหรือขาดตรงจุดที่เรียกใช้

snippet props และ type `Snippet`

snippet ที่ส่งเป็น prop ถูก type ด้วย type Snippet จาก svelte snippet ที่รับ parameter เป็น Snippet<[ArgType]>:

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

  interface Props {
    header: Snippet;                 // a plain snippet
    row: Snippet<[item: string]>;    // a snippet taking one argument
    children: Snippet;               // the default passed-in content
  }

  let { header, row, children }: Props = $props();
</script>

{@render header()}
{@render row('first')}
{@render children()}

generic component

เมื่อ type ของ component ขึ้นกับสิ่งที่ผู้ใช้ส่งเข้ามา (list ที่ type แล้ว, select แบบ generic) ให้ประกาศ type parameter ด้วย attribute generics บน script tag:

<script lang="ts" generics="T">
  interface Props {
    items: T[];
    selected: T;
    onselect: (item: T) => void;
  }

  let { items, selected, onselect }: Props = $props();
</script>

ตอนนี้ T ไหลผ่านทั้งหมด: ส่ง items เป็น User[] แล้ว onselect จะถูก type เป็น (item: User) => void มี type Component (จาก svelte) สำหรับ type ตัวแปรที่เก็บ component ด้วย

flowchart LR
  props["interface Props"] --> dollar["let { ... }: Props = props()"]
  snip["Snippet type"] --> dollar
  gen["generics attribute (T)"] --> dollar
  dollar --> check["svelte-check verifies usage + markup"]

type ไหลไปที่ไหนใน Svelte component

TypeScript with Svelte

เปิดใช้ TypeScript

type ให้ props

snippet props และ type Snippet

generic component

snippet props และ type `Snippet`