Importing interface from .ts file to svelte component doesn't work

[oreilles]

foo.ts :

export interface Foo {}

index.svelte :

<script lang=typescript>
    import { Foo } from '.../foo'
</script>

result:

Non-existent export 'Foo' is imported from '.../foo.ts'

Is there a way to make this work ?

[pyoner]

Hi @oreilles !
You have a misspelled word "typescript" in your code:

<script lang=typscript>
    import { Foo } from '.../foo'
</script>

[oreilles]

Thanks, corrected, but unrelated to the issue unfortunately...

[pyoner]

Could you create a git repo with your source code?

[oreilles]

Here's a fork of your project, you can replicate the issue in the sapper-template
folder. https://github.com/Oreilles/svelte-typescript (npm install && npm run dev)

[pyoner]

ok, I'll check
thanks!

[pyoner]

The problem is that the preprocessor only transplie typescript to js code.
Transpilation cannot check the imported data whether they are types (interface, type, etc.) or js objects.

I found a solution how to solve the issue (ts.transpileModule)

[pyoner]

But we must preserve all imports excluding types!
Because some importing data is used only in html

<script>
	import { blur } from 'svelte/transition';
</script>

{#if condition}
	<div transition:blur="{{amount: 10}}">
		fades in and out
	</div>
{/if}

[oreilles]

Typescript interfaces will disappear at compilation anyway - I just don't get why we could import an interface from a .ts file to another one, but not to a .svelte document's typescript <script> tag.

[pyoner]

In our case the interfaces will not disappear, because we must preserve all imports, look at this code https://github.com/pyoner/svelte-typescript/blob/master/packages/preprocess/src/svelte-ts-preprocess.ts#L11

By default typescript remove all imported interfaces or types at compile time, but we must preserve them, because we don't know the imported data is types or just js objects (look at the AST of the imported data https://ts-ast-viewer.com/#code/JYWwDg9gTgLgBAbzgMQhOBfOAzKERwDkAdKQPTZqFA)

The AST gives us that Foo is just SyntaxKind.Identifier

[Nostin]

I'm having this problem too. TypeScript support isn't much use if we can't import things like interfaces. Is there a way around this issue yet?

[oreilles]

The workaround is to write the code for your component in an external .ts file, then import that file in your component with the svelte-preprocess feature:

<script src="file.ts" lang="ts" />

EDIT: This actually doesn't work.

[pyoner]

I'm having this problem too. TypeScript support isn't much use if we can't import things like interfaces. Is there a way around this issue yet?

We can ignore this warning (NON_EXISTENT_EXPORT) by simply replacing the onwarn function in rollup.config.js to:

const onwarn = (warning, onwarn) => {
  if (warning.code === "NON_EXISTENT_EXPORT") return;

  (warning.code === "CIRCULAR_DEPENDENCY" &&
    /[/\\]@sapper[/\\]/.test(warning.message)) ||
    onwarn(warning);
};

This is a simple solution

[pyoner]

Another solution is not trivial.
To detect importing types need to analyze the AST code and find these types and remove them from the import