SvelteKit and TypeScript Course - Build A Type-Safe SvelteKit 1.0 App

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video we cover everything you need to know to get started building apps with SvelteKit 1.0 and TypeScript. In this video we discuss loading in typed data from our +page.ts, creating types throughout our SvelteKit application, creating a typed writable, creating an input that is typed to a specific input type object, and more! Alongside learning all these new things, you also get to create this amazing code snippet project that allows users to save code snippets, favorite code snippets, and then delete snippets as well. This video is a great introduction to anyone interested in SvelteKit, even if you're completely new.
Final Project Code: github.com/coopercodes/Svelte...
0:00 Intro / project showcase
1:13 Create initial user interface
13:00 Create typed inputs (CodeSnippetInput in app.d.ts)
16:50 Create typed store (typed writable)
29:45 Add typed properties to Svelte component
34:20 Load typed data with +page.ts
38:00 Final project, thank you for watching!

[@a7mdbest15]

This channel is a hidden gem

[@salahaldinedouard5299]

Wow, Cooper lately you’ve been on fire 🔥🔥🔥 Keep up the great work your channel is awesome.

[@CooperCodes]

Yo Salah I seriously appreciate comments like this! More stuff soon :) thank you for supporting

[@JeremiKress]

I love your teaching style ❤

[@Loui3Hunna]

Just discovered your channel via the Svelte Ecommerce video and I'm so happy I did!
Very well explained and the content feels relative and interesting.
Been working with Svelte for a while now, but haven't touched much Typescript, so this channel is a perfect match. Please keep it up and I will watch every video you put out 🤩🔥

[@CooperCodes]

Thank you Ludvig for both of your comments! Glad you're appreciating the SvelteKit and TypeScript content, more stuff with this stack soon :)

[@Loui3Hunna]

@@CooperCodes Sounds great man, looking forward for it

[@Jake-bh1hm]

Awesome, completed this but now it would be cool if you had a video showing how to convert this into local store or integrate with drizzle

[@paulthomas1052]

Great tutorial as always. Thanks - I found it really interesting having not done a great a deal of SvelteKit Dev before.

[@CooperCodes]

Thank you as always :) this tutorial is definitely approachable for newer SvelteKit devs, so glad you appreciated it in that aspect.

[@meka4996]

Wow such an amazing little tutorial! I understand all you have shown here. Thanks!

[@jhonyortiz5]

This is really cool. I mean svelte is cool too but I appreciate you showed an entire example.

[@CooperCodes]

The example helps show TypeScript in action, so glad to see it was helpful for that. Thank you for watching :)

[@MikeZornek]

Thanks for the vid. Was very tight and well done.

[@skeletonlabs]

Great job Cooper! Thanks for sharing!

[@joywins2dois2be43]

thank you so much!

[@sebuzz17]

Just a small remark: Types could be a lot better if you'd use utility operators like Partial, Pick or Omit instead of duplicating your types as two independant things with common values.

[@soushi8885]

Personnally, I did this :
interface CodeSnippet extends CodeSnippetInput {
favorite: boolean;
}

[@ThomasJunkOS]

@@soushi8885 Which is IMHO the proper way to do it.

[@MirrorsEdgeGamer01]

@@ThomasJunkOS Or use the intersection operator. If you made them as a type def.

[@8koi245]

sheesh 2 days ago, fresh and nice

[@TheFoxstory]

found your channel and I love it! Thank you! Could you do a SvelteKit Auth tutorial with credentials and mongodb or something :>

[@kerodfresenbetgebremedhin1881]

you can extend interfaces to avoid code duplication mate

[@jamiewalker1745]

Amazing tutorial. I got all the way towards the end, but when I start the +page.ts file, I get an error alying that the module "PageLoad" doesn't exist on $types. I can't work it out from there.

[@CooperCodes]

During the setup did you ensure that you built the project with Typescript typings? I have the GitHub in description if that helps. Sometimes to recognize types you may have to restart VS Code as well

[@AerveCreations]

Wauw

[@bambanx]

Sveltekit have own backend? Thanks you

[@maskman4821]

This is an an awesome Sveltekit + Typescript tutorial, by far the best, have learned a lot about typing variables, objects with interface in app.d.ts, this is a valuable lesson, thanks a bunch, you are the man 👍🤩😍😘😀🙏

[@CooperCodes]

Thanks so much! This project is a really practical approach showing all the different ways TypeScript is used in SvelteKit, glad you enjoyed it so much :)

[@TheMrSinek]

my CodeBlock works in npm run dev, but when i build my sveltekit-app highlight.js doesn't do its job :(