svelte-type-generator
A tool to generate Typescript-Declarations for your svelte-components.
Limitations
- this only supports
lang=tscomponents
Installation
pnpm
pnpm install --dev svelte-type-generatoryarn
yarn add --dev svelte-type-generatornpm
npm install --save-dev svelte-type-generatorUsage
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 {};