Sign Up
Go Pro Sign Up Login

Buy Now and unlock this series

$

49

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

TypeScript In Svelte Kit

In this last video, we will take a quick look at what Svelte Kit looks like with Typescript.

Downloads

Become a pro to download code and videos

Comments

Martin Kuhn

about 1 month ago

Hi Scott,

I enjoyed the course but I really wish you had a video about hooks…

Regards..

User avatar

Tomek Rozalski

about 2 months ago [edited]

Thank you from the bottom of my heart for this awesome tutorial! :) The only thing that is not absolutely clear for me is how to work with TypeScript in Svelte. For example how to set properties types in component, I believe it should be like:

<script lang="ts">
    export let isNavigationOpened: boolean;
</script>

It is ok. I have mindset of React developer, so this looks odd a bit at the beginning :) Also adapters is the topic I need to dive deeper. I need some pages to be static sites, but part I need as SPA. I believe it is doable.

Simon Hopstätter

3 months ago

@Raul Thanks, I already did that but apparently I had to restart my dev process as well. Afterwards, it worked just fine like you described!

User avatar

Raul

3 months ago [edited]

@Simon Hopstätter Hey, might be a long shot but have you tried importing it using the Type-Only syntax? https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export e.g: import type { SomeThing } from "./some-module.js";

EDIT: Sveltes docs actually says to use it https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md#typescript---limitations

Simon Hopstätter

3 months ago [edited]

Hi Scott,

thanks for your nice series. Especially the markdown processing part really helped me to migrate my sapper project to svelte-kit. I used this opportunity to move to TypeScript as well but there is one thing I don't get:

Say I create a simple interface "Animal" in /data/models/animal.ts:

export interface Animal { name: string; } // also tried export default interface Animal...

If I try to import this in a component like import type { Animal } from '$data/models/animal'; // yes, $data is registered as alias and works otherwise

I get the error: File '.../src/data/models/animal.ts' is not a module. ts(2306)

which is correct because TS interface are of course not compiled to JS (modules) at all. Oddly, if I define this interface in my component in the context="module" script tag, I can import it from there in other components. I'd rather have my interface declarations in a models directory instead of scattering them around in different components, though. Do you have any idea how to resolve this?

Want to join the conversation?

Become a Pro member today!