TypeScript

Typespermalink

ComponentConstructorOptionspermalink

ts
interface ComponentConstructorOptions<
  Props extends Record<string, any> = Record<string, any>
> {…}

ts
target: Element | Document | ShadowRoot;

ts
anchor?: Element;

ts
props?: Props;

ts
context?: Map<any, any>;

ts
hydrate?: boolean;

ts
intro?: boolean;

ts
$$inline?: boolean;

ComponentEventspermalink

Convenience type to get the events the given component expects. Example:

<script lang="ts">
   import type { ComponentEvents } from 'svelte';
   import Component from './Component.svelte';

   function handleCloseEvent(event: ComponentEvents<Component>['close']) {
    console.log(event.detail);
   }
</script>

<Component on:close={handleCloseEvent} />

ts
declare type ComponentEvents<Component extends SvelteComponent> =
  Component extends SvelteComponentTyped<any, infer Events> ? Events : never;

ComponentPropspermalink

Convenience type to get the props the given component expects. Example:

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import Component from './Component.svelte';

  const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
</script>

ts
declare type ComponentProps<Component extends SvelteComponent> =
  Component extends SvelteComponentTyped<infer Props> ? Props : never;

ComponentTypepermalink

Convenience type to get the type of a Svelte component. Useful for example in combination with dynamic components using <svelte:component>.

Example:

<script lang="ts">
  import type { ComponentType, SvelteComponentTyped } from 'svelte';
  import Component1 from './Component1.svelte';
  import Component2 from './Component2.svelte';

  const component: ComponentType = someLogic() ? Component1 : Component2;
  const componentOfCertainSubType: ComponentType<SvelteComponentTyped<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
</script>

<svelte:component this={component} />
<svelte:component this={componentOfCertainSubType} needsThisProp="hello" />

ts
declare type ComponentType<
  Component extends SvelteComponentTyped = SvelteComponentTyped
> = new (
  options: ComponentConstructorOptions<
    Component extends SvelteComponentTyped<infer Props>
      ? Props
      : Record<string, any>
  >
) => Component;

SvelteComponentpermalink

Base class for Svelte components. Used when dev=false.

ts
interface SvelteComponent {…}

ts
$set(props?: Props): void;

ts
$on(event: string, callback: ((event: any) => void) | null | undefined): () => void;

ts
$destroy(): void;

ts
[accessor: string]: any;

SvelteComponentTypedpermalink

Base class to create strongly typed Svelte components. This only exists for typing purposes and should be used in .d.ts files.

Example:permalink

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

ts
import { SvelteComponentTyped } from "svelte";
export class MyComponent extends SvelteComponentTyped<{foo: string}> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
  import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />

Why not make this part of SvelteComponent(Dev)?permalink

Because

ts
class ASubclassOfSvelteComponent extends SvelteComponent<{foo: string}> {}
const component: typeof SvelteComponent = ASubclassOfSvelteComponent;

will throw a type error, so we need to separate the more strictly typed class.

ts
interface SvelteComponentTyped<
  Props extends Record<string, any> = any,
  Events extends Record<string, any> = any,
  Slots extends Record<string, any> = any
> {…}

ts
$set(props?: Partial<Props>): void;

ts
$on<K extends Extract<keyof Events, string>>(type: K, callback: ((e: Events[K]) => void) | null | undefined): () => void;

ts
$destroy(): void;

ts
[accessor: string]: any;