Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

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

Gary Bruce

8 months ago

Very concise, thanks Scott. I feel more confident to migrate my project from Sapper to Kit now. My only issue is on migrating my Sapper/Express/PassportJS/oidc work (I authenticate with Keycloak). Not sure if I should migrate to a Kit/Node adapter with Express/PassportJS/oidc (if such a combo exists) or if I should do something else... I'll ask the Discord group :-)

FYI, I noticed that 3 of the last 4 tutorials were not in the download zip.

Martin Kuhn

about 1 year ago

Hi Scott,

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

Regards..

User avatar

Tomek Rozalski

about 1 year 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

about 1 year 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

about 1 year 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

about 1 year 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!