typescript.md

TypeScript Support

To tell us to treat your script tags as typescript, add a type or lang attribute to your script tags like so:

<!-- Add type="text/typescript" -->
<script type="text/typescript">
    export let name: string;
</script>

<!-- Or add lang="typescript" -->
<script lang="typescript">
    export let name: string;
</script>

Now you'll need to add a svelte.config.js file at the root of your project to tell svelte how to convert your TypeScript into JavaScript that it understands.

You likely already have this configuration somewhere if you are/are planning to use TypeScript with svelte, e.g. webpack config, rollup config, etc.

Tip: To avoid duplication of config, you can import the svelte.config.js file in your bundle configuration

Example Configurations

Using svelte-preprocess by @kaisermann

Install

npm i -D svelte-preprocess typescript

Yarn

yarn add --dev svelte-preprocess typescript

Set up svelte.config.js

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess(),
};

Restart the svelte language server

You will need to tell svelte-vscode to restart the svelte language server in order to pick up the new configuration.

Hit ctrl-shift-p or cmd-shift-p on mac, type svelte restart, and select Svelte: Restart Language Server. Any errors you were seeing should now go away and you're now all set up!