Svelte与TypeScript #

npm create svelte@latest my-app -- --template skeleton --types typescript

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "bundler",
    "module": "ESNext",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true
  }
}

<script lang="ts">
  let count: number = 0;
  let name: string = 'Svelte';
  let items: string[] = [];
  let user: { name: string; age: number } | null = null;
</script>

<script lang="ts">
  interface Props {
    title: string;
    count?: number;
    items: string[];
    onUpdate?: (value: number) => void;
  }
  
  let { 
    title, 
    count = 0, 
    items, 
    onUpdate 
  }: Props = $props();
</script>

<h1>{title}</h1>
<p>Count: {count}</p>

<script lang="ts">
  interface Props {
    required: string;
    optional?: number;
    withDefault?: string;
  }
  
  let { 
    required, 
    optional, 
    withDefault = 'default value' 
  }: Props = $props();
</script>

<script lang="ts">
  interface User {
    id: string;
    name: string;
    email: string;
    role: 'admin' | 'user' | 'guest';
  }
  
  interface Props {
    user: User;
    onUserUpdate: (user: User) => void;
    onUserDelete: (id: string) => void;
  }
  
  let { user, onUserUpdate, onUserDelete }: Props = $props();
</script>

<script lang="ts">
  import type { Snippet } from 'svelte';
  
  interface Props {
    header?: Snippet;
    footer?: Snippet;
    children: Snippet;
  }
  
  let { header, footer, children }: Props = $props();
</script>

{#if header}
  <header>{@render header()}</header>
{/if}

<main>{@render children()}</main>

{#if footer}
  <footer>{@render footer()}</footer>
{/if}

<script lang="ts">
  import type { Snippet } from 'svelte';
  
  interface Item {
    id: string;
    name: string;
  }
  
  interface Props {
    items: Item[];
    renderItem: Snippet<[Item, number]>;
  }
  
  let { items, renderItem }: Props = $props();
</script>

{#each items as item, index}
  {@render renderItem(item, index)}
{/each}

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

<script lang="ts">
  let count = $state(0);
  
  let doubled: number = $derived(count * 2);
  let message: string = $derived(`Count is ${count}`);
  
  let user = $state<User | null>(null);
  let userName: string = $derived(user?.name ?? 'Guest');
</script>

<script lang="ts">
  interface Statistics {
    total: number;
    average: number;
    max: number;
    min: number;
  }
  
  let numbers = $state<number[]>([]);
  
  let stats: Statistics = $derived.by(() => {
    if (numbers.length === 0) {
      return { total: 0, average: 0, max: 0, min: 0 };
    }
    
    const total = numbers.reduce((a, b) => a + b, 0);
    
    return {
      total,
      average: total / numbers.length,
      max: Math.max(...numbers),
      min: Math.min(...numbers)
    };
  });
</script>

<script lang="ts">
  function handleClick(event: MouseEvent): void {
    console.log(event.clientX, event.clientY);
  }
  
  function handleKeyDown(event: KeyboardEvent): void {
    if (event.key === 'Enter') {
      console.log('Enter pressed');
    }
  }
  
  function handleInput(event: Event): void {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  }
</script>

<button onclick={handleClick}>Click</button>
<input onkeydown={handleKeyDown} oninput={handleInput} />

<script lang="ts">
  interface CustomEventDetail {
    id: string;
    value: number;
  }
  
  function handleCustomEvent(event: CustomEvent<CustomEventDetail>): void {
    console.log(event.detail.id, event.detail.value);
  }
</script>

<script lang="ts">
  interface FormData {
    email: string;
    password: string;
    remember: boolean;
  }
  
  function handleSubmit(event: SubmitEvent): void {
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    const formData = new FormData(form);
    
    const data: FormData = {
      email: formData.get('email') as string,
      password: formData.get('password') as string,
      remember: formData.get('remember') === 'on'
    };
    
    console.log(data);
  }
</script>

<form onsubmit={handleSubmit}>
  <input type="email" name="email" />
  <input type="password" name="password" />
  <input type="checkbox" name="remember" />
  <button type="submit">Submit</button>
</form>

import { writable, type Writable } from 'svelte/store';

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

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

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

import { derived, type Readable } from 'svelte/store';

export const doubleCount: Readable<number> = derived(
  count,
  $count => $count * 2
);

export const userDisplayName: Readable<string> = derived(
  user,
  $user => $user?.name ?? 'Guest'
);

import { writable, type Readable } from 'svelte/store';

interface Todo {
  id: string;
  text: string;
  done: boolean;
}

interface TodoStore extends Readable<Todo[]> {
  add: (text: string) => void;
  remove: (id: string) => void;
  toggle: (id: string) => void;
}

function createTodoStore(): TodoStore {
  const { subscribe, set, update } = writable<Todo[]>([]);
  
  return {
    subscribe,
    add: (text: string) => {
      update(todos => [...todos, { id: crypto.randomUUID(), text, done: false }]);
    },
    remove: (id: string) => {
      update(todos => todos.filter(t => t.id !== id));
    },
    toggle: (id: string) => {
      update(todos => todos.map(t => 
        t.id === id ? { ...t, done: !t.done } : t
      ));
    }
  };
}

export const todos = createTodoStore();

import type { Action } from 'svelte/action';

interface TooltipOptions {
  text: string;
  position?: 'top' | 'bottom' | 'left' | 'right';
}

export const tooltip: Action<HTMLElement, TooltipOptions> = (
  node,
  options
) => {
  // Implementation
  
  return {
    update(newOptions) {
      // Update logic
    },
    destroy() {
      // Cleanup
    }
  };
};

import type { Action } from 'svelte/action';

interface LongpressOptions {
  duration?: number;
}

interface LongpressAttributes {
  'on:longpress'?: (event: CustomEvent) => void;
}

export const longpress: Action<
  HTMLElement, 
  LongpressOptions, 
  LongpressAttributes
> = (node, { duration = 500 } = {}) => {
  let timer: number;
  
  function handleMouseDown() {
    timer = setTimeout(() => {
      node.dispatchEvent(new CustomEvent('longpress'));
    }, duration);
  }
  
  function handleMouseUp() {
    clearTimeout(timer);
  }
  
  node.addEventListener('mousedown', handleMouseDown);
  node.addEventListener('mouseup', handleMouseUp);
  node.addEventListener('mouseleave', handleMouseUp);
  
  return {
    update({ duration: newDuration = 500 }) {
      duration = newDuration;
    },
    destroy() {
      node.removeEventListener('mousedown', handleMouseDown);
      node.removeEventListener('mouseup', handleMouseUp);
      node.removeEventListener('mouseleave', handleMouseUp);
    }
  };
};

import type { PageLoad } from './$types';

interface Post {
  id: string;
  title: string;
  content: string;
}

export const load: PageLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/posts/${params.slug}`);
  const post: Post = await response.json();
  
  return { post };
};

<script lang="ts">
  import type { PageData } from './$types';
  
  let { data }: { data: PageData } = $props();
</script>

<h1>{data.post.title}</h1>
<p>{data.post.content}</p>

import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async () => {
  return {
    siteName: 'My App'
  };
};

<script lang="ts">
  import type { LayoutData } from './$types';
  
  let { data, children }: { data: LayoutData; children: import('svelte').Snippet } = $props();
</script>

<h1>{data.siteName}</h1>
{@render children()}

import type { PageServerLoad } from './$types';
import type { Actions } from './$types';

export const load: PageServerLoad = async ({ cookies }) => {
  const session = cookies.get('session');
  
  return { session };
};

export const actions: Actions = {
  default: async ({ request, cookies }) => {
    const formData = await request.formData();
    
    return { success: true };
  }
};

declare global {
  namespace App {
    interface Error {
      code: string;
      message: string;
    }
    
    interface Locals {
      user: User | null;
      sessionId: string | null;
    }
    
    interface PageData {
      // ...
    }
    
    interface PageState {
      // ...
    }
    
    interface Platform {
      // ...
    }
  }
}

export {};

declare module '*.svelte' {
  import type { SvelteComponent } from 'svelte';
  
  export default SvelteComponent;
}

// 推荐：使用 type 关键字
import type { User, Post } from '$lib/types';
import { formatDate } from '$lib/utils';

// 或使用内联类型导入
import { type User, type Post, formatDate } from '$lib';

<script lang="ts">
  let user = $state<User | null>(null);
  
  // 使用可选链
  let name = $derived(user?.name ?? 'Guest');
  
  // 使用类型守卫
  function getDisplayName(): string {
    if (user === null) return 'Guest';
    return user.name;
  }
</script>

<script lang="ts" generics="T extends { id: string }">
  interface Props {
    items: T[];
    onSelect: (item: T) => void;
    renderItem: Snippet<[T]>;
  }
  
  let { items, onSelect, renderItem }: Props = $props();
</script>

{#each items as item (item.id)}
  <button onclick={() => onSelect(item)}>
    {@render renderItem(item)}
  </button>
{/each}