Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A helper script to get you started with writing typescript declaration files for svelte apps. It creates typescript .d.ts based on svelte2tsx, which is used by the official vs code svelte plugin


Easiest usage is with npx

npx svelte-types-writer

to process the files directly you could run

node /svelte-types-writer/dist/index.js ./src/**/*.svelte --libs ./src/**/*.ts ./src/**/*.js

See end of file if you want to install local.


--out : Set an output folder for the type declarations. --override: if existing types and js files should be overridden. --no-js: if set no forwarding javascript files are generated, next section "Typing Strategy". --debug: for debugging only.

Typing Strategy

A preferred solution would be to directly type the *.svelte file by adding a *.svelte.d.ts file with default export. Unfortunately that does not play well with vs code intellisense. While in normal .ts/.js files the types from the .svelte.d.ts files are used, in other .svelte files it does not seem to work (8/26/2020).

What seems to work is the following:

  1. by file: Let's say we want to have types for Example.svelte. svelte-types-writer would generate Example.d.ts in the same folder. What we then need is file Example.js in the same folder with the following content:
// ./Example.js
import Example from './Example.svelte';
export default Example;
now we can access the svelte component from other files by using 
// ./Test.svelte
    import Example from './Example';
  1. by folder: Let's say we have a subfolder "./Component" with the following files:


    we can add two files index.js:

// ./Component/index.js
import Example1 from 'Example1.svelte';
import Example2 from 'Example2.svelte';
export {Example1, Example2};
and index.d.ts:
// ./Component/index.d.ts
import Example1 from 'Example1';
import Example2 from 'Example2';
export {Example1, Example2};
then we can access the typed components that
// ./App.ts or ./App.js
import {Example1} from './Component';

const app = new Example1(...);
// ./App.svelte
    import {Example2} from './Component';
<Example2 ...></Example2>

By default svelte-types-writer adds .js files Example1.js & Example2.js like above. You can turn this off with the --no-js option.

Typing and Commenting

Good written type declarations help the users to quickly use your library or module. General tips for writing .d.ts files can be found here. For now(8/26/2020) it seems most important to focus on the props of your component. Events and Slots are also generated, but by now they don't seem to show up in vs code intellisens. Vs code intellisense can show comments, which are formatted like this:

// Example.d.ts
import { SvelteTypedComponent } from 'svelte-typed-component';
Put general information about the component here
export default class Example extends SvelteTypedComponent<ExampleProps, ExampleEvents, ExampleSlots> {
declare const _ExampleProps: {
    /** Add information for certain props here*/
    t?: number;
    /** Add information for certain props here*/
    r?: any;
    /** Add information for certain props here*/
    a?: string;
    b?: string;
    c: number;

Alternative usage with local installation

npm install --save-dev svelte-types-writer

Then you can run:

node /svelte-types-writer/dist/index.js ./src/**/*.svelte --libs ./src/**/*.ts ./src/**/*.js

Declaration files are written directly next to the .svelte files. If you prefer to have them in an extra folder, use the --out option:

node /svelte-types-writer/dist/index.js ./**/*.svelte --libs ./**/*.ts ./**/*.js --out ./types

Then you have first class type definitions? No. You now basically got the output of what svelte2tsx generates to make svelte types intellisense-usable for vs code and other editors in a convenient format. See next chapter "Typing Strategy" on how to use the .d.ts files. See "Intellisense" to learn, how to add comments.

Removing and Dependencies for Alternative usage

Note: the dependency to svelte-typed-component was removed with version 1.0.2 since svelte now exposes the type SvelteComponentTyped. So the following only applies to prior versions: After using svelte-types-writer you can uninstall the package and all its dependencies with one exception. Make sure to keep a dependency to svelte-typed-component, since all generated declaration files depend on it.

npm install svelte-typed-component

For more information see this blog post.


Export typescript types based form .svelte files based on svelte2tsx








No releases published