svelte-type-generator

A tool to generate Typescript-Declarations for your svelte-components.

Limitations

• this only supports lang=ts components

Installation

pnpm

pnpm install --dev svelte-type-generator

yarn

yarn add --dev svelte-type-generator

npm

npm install --save-dev svelte-type-generator

Usage

Just configure typescript in tsconfig.json as you normally would, eg:

{
  /* ... */
  "compilerOptions": {
    "declarations": true,
    "declarationDir": "types"
  },
  "include": ["src/***/*.svelte"]
  /* ... */
}

Then run svelte-type-generator eg. in a package.json-script

Examples

Button.svelte:

<script context="module" lang="ts">
  export type ButtonSize = 'small' | 'medium' | 'large';
</script>

<script lang="ts">
  /** button size */
  export let size: ButtonSize = 'small';
  /** whether the button is disabled */
  export let disabled = false;

  let clickCount: number = 0;

  function handleClick() {
    clickCount += 1;
  }
</script>

<button class="size-{size}" class:disabled on:click={handleClick} on:click>
  <slot />
  <slot name="named-slot" {clickCount} />
</button>

Resulting Button.svelte.d.ts:

import { SvelteComponentTyped } from 'svelte';
export declare type ButtonSize = 'small' | 'medium' | 'large';
export default class Button extends SvelteComponentTyped<
  ButtonProps,
  ButtonEvents,
  ButtonSlots
> {}
declare const propDef: {
  props?: {
    /** button size */ size?: ButtonSize;
    /** whether the button is disabled */ disabled?: boolean;
  };
  events?: {
    click: MouseEvent;
  } & {
    [evt: string]: CustomEvent<any>;
  };
  slots?: {
    default: {};
    'named-slot': {
      clickCount: number;
    };
  };
};
export declare type ButtonProps = typeof propDef.props;
export declare type ButtonEvents = typeof propDef.events;
export declare type ButtonSlots = typeof propDef.slots;
export {};

Related Work

• svelte2tsx
• svelte2dts
• svelte-types-writer
• sveld