svelte-preprocess: typescript does not recognize svelte syntax

Describe the bug typescript does not recognize svelte syntax when I use Sapper.

Logs

syntax error reporting:

# error for 'import Nav from '../components/Nav.svelte';'
Module '"/Users/mervin/Projects/vache/src/components/Nav.svelte"' has no default export.

# error for '$: a = segment + 'aa';'
Cannot find name 'a'.ts(2304)

build error reporting:

To Reproduce

repo: https://github.com/mervinjin/vache/tree/svelte-ts-issue

// src/routes/_layout.svelte

<script lang="typescript" >
	import Nav from '../components/Nav.svelte';

	export let segment;

	$: a = segment + 'aa';
</script>

Expected behavior should have no error.

Information about your project:

Your operating system: OS X 10.15.4
svelte-preprocess version : v3.7.4
Whether your project uses Webpack or Rollup: yes, I use rollup

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (8 by maintainers)

Most upvoted comments

Based off the discussion in https://github.com/sveltejs/svelte/issues/4965 I’m convinced that nothing should change in Svelte itself. There was a suggestion there that we use the two line split declaration and initialization syntax:

let a: string;
$: a = segment + 'aa';

The good thing about this option is that it doesn’t introduce new syntax that’s specific to the pre-processor and is already supported today. We could just close this ticket by adding better documentation. It is more verbose, but I haven’t written enough code with the combination of TypeScript and Svelte to know whether it’d be terribly annoying or not.

benmccann on Jun 3, 2020