TypeScript Type Reference

interface Component<
  Props extends Record<string, any> = {},
  Exports extends Record<string, any> = {},
  Bindings extends keyof Props | '' = string
>

import type { Component } from 'svelte';

// Declare a component type
export const MyButton: Component<
  { label: string; disabled?: boolean },
  { focus(): void },
  'disabled'
>;

type ComponentProps<Comp extends SvelteComponent | Component<any, any>>

import type { ComponentProps } from 'svelte';
import MyComponent from './MyComponent.svelte';

// Get props type from component
type Props = ComponentProps<typeof MyComponent>;

// Use in generic function
function withProps<TComponent extends Component<any>>(
  component: TComponent,
  props: ComponentProps<TComponent>
) {
  // ...
}

interface Snippet<Parameters extends unknown[] = []>

import type { Snippet } from 'svelte';

interface Props {
  // Snippet with no parameters
  header?: Snippet;

  // Snippet expecting a single object parameter
  item: Snippet<[{ id: number; name: string }]>;

  // Snippet with multiple parameters
  row: Snippet<[number, string, boolean]>;
}

let { header, item, row }: Props = $props();

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

{#each items as data}
  {@render item(data)}
{/each}

interface HTMLButtonAttributes extends HTMLAttributes<HTMLButtonElement>

<script lang="ts">
  import type { HTMLButtonAttributes } from 'svelte/elements';

  let buttonProps: HTMLButtonAttributes = {
    type: 'submit',
    disabled: false,
    onclick: (e) => console.log('clicked', e.currentTarget)
  };
</script>

<button {...buttonProps}>Submit</button>

interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement>

<script lang="ts">
  import type { HTMLInputAttributes } from 'svelte/elements';

  let emailInput: HTMLInputAttributes = {
    type: 'email',
    required: true,
    placeholder: 'user@example.com',
    autocomplete: 'email',
    oninput: (e) => {
      const target = e.currentTarget as HTMLInputElement;
      console.log(target.value);
    }
  };
</script>

<input {...emailInput} bind:value={email} />

interface HTMLFormAttributes extends HTMLAttributes<HTMLFormElement>

<script lang="ts">
  import type { HTMLFormAttributes } from 'svelte/elements';

  let formProps: HTMLFormAttributes = {
    method: 'POST',
    action: '/api/submit',
    novalidate: false,
    onsubmit: async (e) => {
      e.preventDefault();
      const form = e.currentTarget as HTMLFormElement;
      const data = new FormData(form);
      // Handle submission
    }
  };
</script>

<form {...formProps}>
  <!-- form fields -->
</form>

interface HTMLAnchorAttributes extends HTMLAttributes<HTMLAnchorElement>

<script lang="ts">
  import type { HTMLAnchorAttributes } from 'svelte/elements';

  let linkProps: HTMLAnchorAttributes = {
    href: '/dashboard',
    target: '_blank',
    rel: 'noopener noreferrer',
    onclick: (e) => {
      console.log('navigating to', e.currentTarget.href);
    }
  };
</script>

<a {...linkProps}>Go to Dashboard</a>

interface HTMLImgAttributes extends HTMLAttributes<HTMLImageElement>

<script lang="ts">
  import type { HTMLImgAttributes } from 'svelte/elements';

  let imgProps: HTMLImgAttributes = {
    src: '/images/hero.jpg',
    alt: 'Hero image description',
    loading: 'lazy',
    width: 800,
    height: 600,
    onload: () => console.log('Image loaded'),
    onerror: () => console.error('Failed to load image')
  };
</script>

<img {...imgProps} />

interface HTMLDivAttributes extends HTMLAttributes<HTMLDivElement>

interface HTMLSpanAttributes extends HTMLAttributes<HTMLSpanElement>

interface HTMLTableAttributes extends HTMLAttributes<HTMLTableElement>

HTMLAnchorAttributes        // <a>
HTMLAreaAttributes          // <area>
HTMLAudioAttributes         // <audio>
HTMLBaseAttributes          // <base>
HTMLBlockquoteAttributes    // <blockquote>
HTMLButtonAttributes        // <button>
HTMLCanvasAttributes        // <canvas>
HTMLColAttributes           // <col>
HTMLColgroupAttributes      // <colgroup>
HTMLDataAttributes          // <data>
HTMLDetailsAttributes       // <details>
HTMLDialogAttributes        // <dialog>
HTMLDivAttributes           // <div>
HTMLEmbedAttributes         // <embed>
HTMLFieldsetAttributes      // <fieldset>
HTMLFormAttributes          // <form>
HTMLHtmlAttributes          // <html>
HTMLIframeAttributes        // <iframe>
HTMLImgAttributes           // <img>
HTMLInputAttributes         // <input>
HTMLInsAttributes           // <ins>
HTMLDelAttributes           // <del>
HTMLKeygenAttributes        // <keygen>
HTMLLabelAttributes         // <label>
HTMLLiAttributes            // <li>
HTMLLinkAttributes          // <link>
HTMLMapAttributes           // <map>
HTMLMenuAttributes          // <menu>
HTMLMetaAttributes          // <meta>
HTMLMeterAttributes         // <meter>
HTMLObjectAttributes        // <object>
HTMLOlAttributes            // <ol>
HTMLOptgroupAttributes      // <optgroup>
HTMLOptionAttributes        // <option>
HTMLOutputAttributes        // <output>
HTMLParamAttributes         // <param>
HTMLProgressAttributes      // <progress>
HTMLQuoteAttributes         // <q>
HTMLScriptAttributes        // <script>
HTMLSelectAttributes        // <select>
HTMLSlotAttributes          // <slot>
HTMLSourceAttributes        // <source>
HTMLSpanAttributes          // <span>
HTMLStyleAttributes         // <style>
HTMLTableAttributes         // <table>
HTMLTdAttributes            // <td>
HTMLTemplateAttributes      // <template>
HTMLTextareaAttributes      // <textarea>
HTMLThAttributes            // <th>
HTMLTimeAttributes          // <time>
HTMLTrackAttributes         // <track>
HTMLVideoAttributes         // <video>
HTMLWebViewAttributes       // <webview>

interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T>

type SVGCircleAttributes = SVGAttributes<SVGCircleElement>

<script lang="ts">
  import type { SVGCircleAttributes } from 'svelte/elements';

  let circleProps: SVGCircleAttributes = {
    cx: 50,
    cy: 50,
    r: 40,
    fill: 'blue',
    stroke: 'black',
    'stroke-width': 2,
    onclick: (e) => console.log('Circle clicked')
  };
</script>

<svg viewBox="0 0 100 100">
  <circle {...circleProps} />
</svg>

type SVGPathAttributes = SVGAttributes<SVGPathElement>

<script lang="ts">
  import type { SVGPathAttributes } from 'svelte/elements';

  let pathProps: SVGPathAttributes = {
    d: 'M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80',
    fill: 'transparent',
    stroke: 'purple',
    'stroke-width': 3,
    onmouseover: (e) => {
      e.currentTarget.setAttribute('stroke', 'red');
    }
  };
</script>

<svg viewBox="0 0 200 200">
  <path {...pathProps} />
</svg>

type SVGRectAttributes = SVGAttributes<SVGRectElement>

<script lang="ts">
  import type { SVGRectAttributes } from 'svelte/elements';

  let rectProps: SVGRectAttributes = {
    x: 10,
    y: 10,
    width: 80,
    height: 60,
    rx: 5,  // rounded corners
    ry: 5,
    fill: 'lightblue',
    stroke: 'navy'
  };
</script>

<svg viewBox="0 0 100 100">
  <rect {...rectProps} />
</svg>

type SVGLineAttributes = SVGAttributes<SVGLineElement>

<script lang="ts">
  import type { SVGLineAttributes } from 'svelte/elements';

  let lineProps: SVGLineAttributes = {
    x1: 0,
    y1: 0,
    x2: 100,
    y2: 100,
    stroke: 'black',
    'stroke-width': 2
  };
</script>

<svg viewBox="0 0 100 100">
  <line {...lineProps} />
</svg>

type SVGEllipseAttributes = SVGAttributes<SVGEllipseElement>

<script lang="ts">
  import type { SVGEllipseAttributes } from 'svelte/elements';

  let ellipseProps: SVGEllipseAttributes = {
    cx: 50,
    cy: 50,
    rx: 40,  // x-axis radius
    ry: 25,  // y-axis radius
    fill: 'yellow',
    stroke: 'orange'
  };
</script>

<svg viewBox="0 0 100 100">
  <ellipse {...ellipseProps} />
</svg>

type SVGPolygonAttributes = SVGAttributes<SVGPolygonElement>

<script lang="ts">
  import type { SVGPolygonAttributes } from 'svelte/elements';

  // Star shape
  let polygonProps: SVGPolygonAttributes = {
    points: '50,15 61,35 82,35 66,48 73,68 50,55 27,68 34,48 18,35 39,35',
    fill: 'gold',
    stroke: 'darkorange',
    'stroke-width': 2
  };
</script>

<svg viewBox="0 0 100 100">
  <polygon {...polygonProps} />
</svg>

SVGAttributes<SVGSVGElement>              // <svg>
SVGAttributes<SVGCircleElement>           // <circle>
SVGAttributes<SVGEllipseElement>          // <ellipse>
SVGAttributes<SVGLineElement>             // <line>
SVGAttributes<SVGPathElement>             // <path>
SVGAttributes<SVGPolygonElement>          // <polygon>
SVGAttributes<SVGPolylineElement>         // <polyline>
SVGAttributes<SVGRectElement>             // <rect>
SVGAttributes<SVGGElement>                // <g>
SVGAttributes<SVGDefsElement>             // <defs>
SVGAttributes<SVGClipPathElement>         // <clipPath>
SVGAttributes<SVGLinearGradientElement>   // <linearGradient>
SVGAttributes<SVGRadialGradientElement>   // <radialGradient>
SVGAttributes<SVGStopElement>             // <stop>
SVGAttributes<SVGTextElement>             // <text>
SVGAttributes<SVGTSpanElement>            // <tspan>
SVGAttributes<SVGImageElement>            // <image>
SVGAttributes<SVGUseElement>              // <use>
SVGAttributes<SVGSymbolElement>           // <symbol>
SVGAttributes<SVGMarkerElement>           // <marker>
SVGAttributes<SVGMaskElement>             // <mask>
SVGAttributes<SVGPatternElement>          // <pattern>
SVGAttributes<SVGFilterElement>           // <filter>
// ... and all filter effect elements

type EventHandler<E extends Event = Event, T extends EventTarget = Element> = (
  event: E & { currentTarget: EventTarget & T }
) => any

type MouseEventHandler<T extends EventTarget> = EventHandler<MouseEvent, T>

<script lang="ts">
  import type { MouseEventHandler } from 'svelte/elements';

  const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
    console.log('Button clicked at', e.clientX, e.clientY);
    console.log('Button element:', e.currentTarget); // Typed as HTMLButtonElement
  };
</script>

<button onclick={handleClick}>Click me</button>

type KeyboardEventHandler<T extends EventTarget> = EventHandler<KeyboardEvent, T>

<script lang="ts">
  import type { KeyboardEventHandler } from 'svelte/elements';

  const handleKeydown: KeyboardEventHandler<HTMLInputElement> = (e) => {
    if (e.key === 'Enter') {
      console.log('Enter pressed:', e.currentTarget.value);
    }
  };
</script>

<input type="text" onkeydown={handleKeydown} />

type FormEventHandler<T extends EventTarget> = EventHandler<Event, T>
type ChangeEventHandler<T extends EventTarget> = EventHandler<Event, T>

<script lang="ts">
  import type { FormEventHandler, ChangeEventHandler } from 'svelte/elements';

  const handleInput: FormEventHandler<HTMLInputElement> = (e) => {
    console.log('Input value:', e.currentTarget.value);
  };

  const handleChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
    console.log('Selected:', e.currentTarget.value);
  };

  const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    console.log('Form submitted:', Object.fromEntries(formData));
  };
</script>

<form onsubmit={handleSubmit}>
  <input type="text" oninput={handleInput} />
  <select onchange={handleChange}>
    <option value="a">Option A</option>
    <option value="b">Option B</option>
  </select>
  <button type="submit">Submit</button>
</form>

type FocusEventHandler<T extends EventTarget> = EventHandler<FocusEvent, T>

<script lang="ts">
  import type { FocusEventHandler } from 'svelte/elements';

  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
    e.currentTarget.style.borderColor = 'blue';
  };

  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
    e.currentTarget.style.borderColor = '';
  };
</script>

<input onfocus={handleFocus} onblur={handleBlur} />

type TouchEventHandler<T extends EventTarget> = EventHandler<TouchEvent, T>

<script lang="ts">
  import type { TouchEventHandler } from 'svelte/elements';

  let startX = 0;

  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {
    startX = e.touches[0].clientX;
  };

  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {
    const currentX = e.touches[0].clientX;
    const diff = currentX - startX;
    e.currentTarget.style.transform = `translateX(${diff}px)`;
  };
</script>

<div ontouchstart={handleTouchStart} ontouchmove={handleTouchMove}>
  Swipeable element
</div>

type PointerEventHandler<T extends EventTarget> = EventHandler<PointerEvent, T>

<script lang="ts">
  import type { PointerEventHandler } from 'svelte/elements';

  const handlePointerDown: PointerEventHandler<HTMLCanvasElement> = (e) => {
    const canvas = e.currentTarget;
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // Draw at pointer position
    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.fillRect(x - 2, y - 2, 4, 4);
    }
  };
</script>

<canvas onpointerdown={handlePointerDown} />

type DragEventHandler<T extends EventTarget> = EventHandler<DragEvent, T>

<script lang="ts">
  import type { DragEventHandler } from 'svelte/elements';

  const handleDragOver: DragEventHandler<HTMLDivElement> = (e) => {
    e.preventDefault();
    e.currentTarget.style.backgroundColor = 'lightblue';
  };

  const handleDrop: DragEventHandler<HTMLDivElement> = (e) => {
    e.preventDefault();
    e.currentTarget.style.backgroundColor = '';
    const data = e.dataTransfer?.getData('text/plain');
    console.log('Dropped:', data);
  };
</script>

<div ondragover={handleDragOver} ondrop={handleDrop}>
  Drop zone
</div>

type AnimationEventHandler<T extends EventTarget> = EventHandler<AnimationEvent, T>
type TransitionEventHandler<T extends EventTarget> = EventHandler<TransitionEvent, T>

<script lang="ts">
  import type { AnimationEventHandler, TransitionEventHandler } from 'svelte/elements';

  const handleAnimationEnd: AnimationEventHandler<HTMLDivElement> = (e) => {
    console.log('Animation ended:', e.animationName);
  };

  const handleTransitionEnd: TransitionEventHandler<HTMLDivElement> = (e) => {
    console.log('Transition ended:', e.propertyName);
  };
</script>

<div onanimationend={handleAnimationEnd} ontransitionend={handleTransitionEnd}>
  Animated element
</div>

type ClipboardEventHandler<T>     // copy, cut, paste
type CompositionEventHandler<T>   // compositionstart, compositionupdate, compositionend
type WheelEventHandler<T>         // wheel
type UIEventHandler<T>            // scroll, resize
type GamepadEventHandler<T>       // gamepadconnected, gamepaddisconnected
type MessageEventHandler<T>       // message, messageerror
type ToggleEventHandler<T>        // toggle, beforetoggle (popover)

type AriaRole =
  | 'alert' | 'alertdialog' | 'application' | 'article' | 'banner'
  | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox'
  | 'complementary' | 'contentinfo' | 'definition' | 'dialog'
  | 'directory' | 'document' | 'feed' | 'figure' | 'form'
  | 'grid' | 'gridcell' | 'group' | 'heading' | 'img'
  | 'link' | 'list' | 'listbox' | 'listitem' | 'log'
  | 'main' | 'marquee' | 'math' | 'menu' | 'menubar'
  | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'navigation'
  | 'none' | 'note' | 'option' | 'presentation' | 'progressbar'
  | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup'
  | 'rowheader' | 'scrollbar' | 'search' | 'searchbox'
  | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch'
  | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term'
  | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree'
  | 'treegrid' | 'treeitem'
  | (string & {})

<script lang="ts">
  import type { AriaRole } from 'svelte/elements';

  let role: AriaRole = 'button';
</script>

<div role={role} tabindex="0">
  Custom button
</div>

interface AriaAttributes

<script lang="ts">
  import type { AriaAttributes } from 'svelte/elements';

  let expanded = $state(false);

  let triggerAttrs: AriaAttributes = {
    'aria-expanded': expanded,
    'aria-controls': 'dropdown-menu',
    'aria-haspopup': 'menu'
  };

  let menuAttrs: AriaAttributes = {
    'aria-hidden': !expanded,
    'aria-labelledby': 'menu-trigger'
  };
</script>

<button id="menu-trigger" {...triggerAttrs} onclick={() => expanded = !expanded}>
  Menu
</button>
<div id="dropdown-menu" role="menu" {...menuAttrs}>
  <div role="menuitem">Item 1</div>
  <div role="menuitem">Item 2</div>
</div>

interface DOMAttributes<T extends EventTarget>

'on:click'?: MouseEventHandler<T>    // Svelte syntax
onclick?: MouseEventHandler<T>       // Standard syntax
onclickcapture?: MouseEventHandler<T> // Capture phase

readonly 'bind:contentRect'?: DOMRectReadOnly
readonly 'bind:contentBoxSize'?: Array<ResizeObserverSize>
readonly 'bind:borderBoxSize'?: Array<ResizeObserverSize>
readonly 'bind:devicePixelContentBoxSize'?: Array<ResizeObserverSize>
readonly 'bind:clientWidth'?: number
readonly 'bind:clientHeight'?: number

<script lang="ts">
  import type { DOMAttributes } from 'svelte/elements';

  let width = $state(0);
  let height = $state(0);

  let divProps: DOMAttributes<HTMLDivElement> = {
    onclick: (e) => console.log('Clicked'),
    'on:mouseover': (e) => console.log('Mouse over'),
    onclickcapture: (e) => console.log('Click captured')
  };
</script>

<div
  {...divProps}
  bind:clientWidth={width}
  bind:clientHeight={height}
>
  Size: {width} x {height}
</div>

interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T>

<script lang="ts">
  import type { HTMLButtonAttributes } from 'svelte/elements';

  interface Props extends HTMLButtonAttributes {
    variant?: 'primary' | 'secondary';
    loading?: boolean;
  }

  let {
    variant = 'primary',
    loading = false,
    children,
    ...buttonProps
  }: Props = $props();
</script>

<button
  {...buttonProps}
  class="btn btn-{variant}"
  disabled={buttonProps.disabled || loading}
>
  {#if loading}
    Loading...
  {:else}
    {@render children?.()}
  {/if}
</button>

<script lang="ts">
  import type { Action } from 'svelte/action';
  import type { HTMLInputAttributes } from 'svelte/elements';

  interface TooltipParams {
    text: string;
    position?: 'top' | 'bottom';
  }

  const tooltip: Action<HTMLElement, TooltipParams> = (node, params) => {
    let tooltipEl: HTMLDivElement | null = null;

    function show() {
      tooltipEl = document.createElement('div');
      tooltipEl.textContent = params.text;
      tooltipEl.className = `tooltip tooltip-${params.position ?? 'top'}`;
      document.body.appendChild(tooltipEl);
    }

    function hide() {
      tooltipEl?.remove();
      tooltipEl = null;
    }

    node.addEventListener('mouseenter', show);
    node.addEventListener('mouseleave', hide);

    return {
      update(newParams) {
        params = newParams;
      },
      destroy() {
        hide();
        node.removeEventListener('mouseenter', show);
        node.removeEventListener('mouseleave', hide);
      }
    };
  };

  let inputProps: HTMLInputAttributes = {
    type: 'text',
    placeholder: 'Enter text...'
  };
</script>

<input {...inputProps} use:tooltip={{ text: 'This is a tooltip' }} />

<script lang="ts" generics="T extends HTMLElement">
  import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements';

  interface Props extends HTMLAttributes<T> {
    element?: keyof HTMLElementTagNameMap;
    onCustomClick?: MouseEventHandler<T>;
  }

  let {
    element = 'div',
    onCustomClick,
    children,
    ...attrs
  }: Props = $props();

  const handleClick: MouseEventHandler<T> = (e) => {
    console.log('Internal handling:', e.currentTarget);
    onCustomClick?.(e);
  };
</script>

<svelte:element this={element} {...attrs} onclick={handleClick}>
  {@render children?.()}
</svelte:element>

<script lang="ts">
  import type {
    HTMLFormAttributes,
    FormEventHandler,
    ChangeEventHandler
  } from 'svelte/elements';

  let formData = $state({
    username: '',
    email: '',
    role: 'user'
  });

  const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();
    console.log('Submitted:', formData);
  };

  const handleUsernameInput: FormEventHandler<HTMLInputElement> = (e) => {
    formData.username = e.currentTarget.value;
  };

  const handleEmailInput: FormEventHandler<HTMLInputElement> = (e) => {
    formData.email = e.currentTarget.value;
  };

  const handleRoleChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
    formData.role = e.currentTarget.value;
  };
</script>

<form onsubmit={handleSubmit}>
  <input
    type="text"
    name="username"
    value={formData.username}
    oninput={handleUsernameInput}
    required
  />

  <input
    type="email"
    name="email"
    value={formData.email}
    oninput={handleEmailInput}
    required
  />

  <select
    name="role"
    value={formData.role}
    onchange={handleRoleChange}
  >
    <option value="user">User</option>
    <option value="admin">Admin</option>
  </select>

  <button type="submit">Submit</button>
</form>

<script lang="ts">
  import type { SVGAttributes } from 'svelte/elements';

  interface Props {
    size?: number;
    color?: string;
    onclick?: SVGAttributes<SVGSVGElement>['onclick'];
  }

  let { size = 24, color = 'currentColor', onclick }: Props = $props();

  let svgAttrs: SVGAttributes<SVGSVGElement> = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: color,
    'stroke-width': 2,
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round',
    onclick
  };
</script>

<svg {...svgAttrs}>
  <path d="M12 2L2 7l10 5 10-5-10-5z" />
  <path d="M2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>

<script lang="ts">
  import type { HTMLAttributes, AriaAttributes, KeyboardEventHandler } from 'svelte/elements';

  interface Props extends HTMLAttributes<HTMLDivElement> {
    label: string;
    checked?: boolean;
    onToggle?: (checked: boolean) => void;
  }

  let { label, checked = $bindable(false), onToggle, ...attrs }: Props = $props();

  const toggle = () => {
    checked = !checked;
    onToggle?.(checked);
  };

  const handleKeydown: KeyboardEventHandler<HTMLDivElement> = (e) => {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      toggle();
    }
  };

  let ariaAttrs: AriaAttributes = {
    'aria-checked': checked,
    'aria-label': label
  };
</script>

<div
  {...attrs}
  {...ariaAttrs}
  role="checkbox"
  tabindex="0"
  onclick={toggle}
  onkeydown={handleKeydown}
>
  {checked ? '☑' : '☐'} {label}
</div>

import type { HTMLButtonAttributes } from 'svelte/elements';

interface CustomButtonProps extends HTMLButtonAttributes {
  variant: 'primary' | 'secondary';
}

// Good - specific typing
const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
  e.currentTarget // HTMLButtonElement
};

// Avoid - generic typing
const handleClick = (e: Event) => {
  (e.target as HTMLButtonElement) // requires casting
};

const handleInput: FormEventHandler<HTMLInputElement> = (e) => {
  const value = e.currentTarget.value; // No casting needed
  const checked = e.currentTarget.checked; // TypeScript knows this is an input
};

let attrs: AriaAttributes & HTMLAttributes<HTMLDivElement> = {
  role: 'button',
  tabindex: 0,
  'aria-pressed': pressed,
  'aria-label': 'Custom button'
};

interface Props {
  // Single parameter
  item: Snippet<[{ id: number; name: string }]>;

  // Multiple parameters
  cell: Snippet<[number, number, string]>;

  // No parameters
  header: Snippet;
}