CODEWITHSUNDEEP
typescriptsveltesveltekit
Will Iverson
Will Iverson

Reputation: 2069

Import TypeScript interfaces in SvelteKit?

I have a starting SvelteKit project. I am trying to reuse an interface in multiple places.

The file is placed in /src/lib/choice.ts.

export interface Choice {
    id: number;
    value: string;
}

However, when I try to reference this interface in a Svelte component like so:

<script lang="ts">
    import {Choice} from "$lib/choice";
</script>

I get this error:

500
The requested module '/src/lib/choice.ts' does not provide an export named 'Choice'
SyntaxError: The requested module '/src/lib/choice.ts' does not provide an export named 'Choice'

My IDE, however, thinks this is perfectly valid, up to and including allowing click-navigation to the Choice declaration.

If, however, I change the declaration to this:

export class Choice {
    id!: number;
    value!: string;
}

Everything works and my IDE is happy.

What's going on here? I don't understand why the interface doesn't work but the class declaration does.

Upvotes: 4

Views: 3637

Answers (1)

brunnerh
brunnerh

Reputation: 184516

You might have to annotate this as a type import:

import type { Choice } from "$lib/choice";

If you look at the default tsconfig.json for SvelteKit, there is an explanation:

{
  "compilerOptions": {
    // this ensures that types are explicitly
    // imported with `import type`, which is
    // necessary as svelte-preprocess cannot
    // otherwise compile components correctly
    "importsNotUsedAsValues": "error",

Upvotes: 6

Related Questions