export typescript type in svelte file

Question

I want to export the type that I defined in one of my files and import it inside another file.

export type myNewType = {name: string};

linter show me bellow error when I add export:

Modifiers cannot appear here.

I can make it work by creating a new ts file and import the type from it. I just want to know if there is a way to define type inside svelte file or not.

Update:

I use the sapper template and it will run without error but TS functionality not work and show me errors in vscode when importing type and export type from svelte file.

Answer 1

You need export the type from a module-script, not the normal script. You also need to add the lang="ts" attribute on either the normal script or the module-script. This will work:

<script context="module" lang="ts">
  export type myNewType = {name: string};
</script>

<script>
  export let aProp: string;
</script>

<p>some html</p>

In general, whenever you want to import something from another Svelte file which is not the component itself, you need to declare that export inside the module-script.

Answer 2

Just in case it helps anyone, I was having an issue importing my own type which I had declared in a .ts file, into another library file:

My type was declared as follows:

export type UserAuth = {
    name: string,
    email: string,
    token: ''
};

An in my /lib/auth.ts file, I was attempting to import it as follows:

import { UserAuth } from "../types/user.auth";

Which produced an error that the type has not been exported.

The following fixed the issue for me:

import type { UserAuth } from "../types/user.auth";