export typescript type in svelte file

Viewed 2987

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.

2 Answers

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.

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";
Related