Ivan Hofer

Svelte ♥ TypeScript and so will you

The Svelte Context API can be error-prone. Discover a powerful pattern using object references as keys to make it completely type-safe.

Svelte ♥ TypeScript and so will you
#1about 3 minutes

The benefits of using TypeScript with Svelte

TypeScript provides essential static type checking for long-running Svelte projects, improving maintainability and collaboration among developers.

#2about 3 minutes

Setting up a SvelteKit project with TypeScript

Initialize a new SvelteKit application with TypeScript support and review the key configuration files like tsconfig.json and svelte.config.js.

#3about 3 minutes

Defining and using typed component props

Add the `lang="ts"` attribute to script tags and define typed props to get auto-completion and error checking when using components.

#4about 2 minutes

Running project-wide type checks with svelte-check

Use the `svelte-check` command in watch mode or in a CI/CD pipeline to perform static type analysis across your entire Svelte project.

#5about 2 minutes

Handling optional props and discriminated unions

Make component props optional by assigning a default value and safely handle complex data structures like discriminated unions in your templates.

#6about 3 minutes

Creating generic components with `$$Generic`

Use the special `$$Generic` type to create reusable Svelte components that can work with multiple data types while maintaining full type safety.

#7about 4 minutes

Typing passthrough props with `$$restProps` and `$$Props`

Build wrapper components like custom buttons that accept standard HTML attributes with full type safety by using `$$restProps` and `$$Props`.

#8about 3 minutes

Implementing a type-safe Svelte context

Overcome the limitations of Svelte's default context API by creating a typed wrapper that eliminates the need for string keys and provides type inference.

#9about 2 minutes

Type-safe routing and endpoints in SvelteKit

Leverage SvelteKit's auto-generated types for file-based routes to create type-safe API endpoints with validated dynamic URL parameters.

#10about 2 minutes

Resources for learning Svelte with TypeScript

Find additional learning resources, including a dedicated GitHub repository with examples, to continue exploring Svelte and TypeScript integration.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

How to convince your team to adopt TypeScript
30:50 MIN

How to convince your team to adopt TypeScript

4 Steps from JavaScript to TypeScript

Exploring the future of Svelte with SvelteKit
28:41 MIN

Exploring the future of Svelte with SvelteKit

Why I Recommend Svelte to Every New Web Developer

Final thoughts and review of developing with Svelte
42:09 MIN

Final thoughts and review of developing with Svelte

On tour with heroes == Moving from Angular to WebComponents

Using Web Components and Svelte as an alternative
04:03 MIN

Using Web Components and Svelte as an alternative

On tour with heroes == Moving from Angular to WebComponents

Why TypeScript is essential for building large applications
22:24 MIN

Why TypeScript is essential for building large applications

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Exploring the history and motivation behind Svelte
07:22 MIN

Exploring the history and motivation behind Svelte

Why I Recommend Svelte to Every New Web Developer

Improving the in-editor experience with better types
08:23 MIN

Improving the in-editor experience with better types

Why pair programming is the best usability testing tool for developer focused products?

Building the UI with Svelte and a Convex backend
03:44 MIN

Building the UI with Svelte and a Convex backend

How to Automate your Murder Mystery

Featured Partners

Related Videos

See all videos
Lies we Tell Ourselves As Developers31:13

Lies we Tell Ourselves As Developers

Stefan Baumgartner

Advanced Typing in TypeScript28:44

Advanced Typing in TypeScript

Lars Hupel

Don't compromise on speedy delivery nor type-safety by choosing TypeScript29:44

Don't compromise on speedy delivery nor type-safety by choosing TypeScript

Jens Claes

Why I Recommend Svelte to Every New Web Developer31:21

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

4 Steps from JavaScript to TypeScript32:28

4 Steps from JavaScript to TypeScript

Phil Nash

Do TypeScript without TypeScript43:27

Do TypeScript without TypeScript

Simone Sanfratello

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

Related Articles

View all articles
DC
Daniel Cranney
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
JavaScript is the backbone of web development, powering everything from small websites to large-scale enterprise applications. However, as projects grow in complexity, maintaining JavaScript code can become increasingly difficult. This is where TypeS...
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
EM
Eli McGarvie
Top 10 Svelte UI Libraries in 2025
As Svelte gains traction among developers for its impressive performance and simplicity, the need for robust UI libraries becomes increasingly apparent. UI libraries can provide developers with the necessary building blocks to easily create beautiful...
Top 10 Svelte UI Libraries in 2025
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos
DC
Daniel Cranney
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!
Inside last week’s Dev Digest 190 . 🙅 Developers don’t trust AI, and that’s a good thing 🤖 Why everyone is talking about AI agents 🔓 Autonomous AI hacking and the future of cyber security 😨 Windows 10 support ends, millions of PC’s fall off a securi...
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!

From learning to earning

Jobs that call for the skills explored in this talk.

Svelte Programmer

Svelte Programmer

OfferZen
Delft, Netherlands

Intermediate
React
Svelte
Next.js
Angular
Unit Testing