Ivan Hofer
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
02:40 MIN
Exploring the future of Svelte with SvelteKit
Why I Recommend Svelte to Every New Web Developer
01:22 MIN
Exploring the history and motivation behind Svelte
Why I Recommend Svelte to Every New Web Developer
03:05 MIN
Why developers prefer Svelte over other frameworks
Why I Recommend Svelte to Every New Web Developer
03:26 MIN
Navigating the Svelte ecosystem and its limitations
Why I Recommend Svelte to Every New Web Developer
01:38 MIN
How to convince your team to adopt TypeScript
4 Steps from JavaScript to TypeScript
01:56 MIN
Exploring the key benefits of adopting TypeScript
Do TypeScript without TypeScript
04:52 MIN
Understanding Svelte's compiler-first approach
Why I Recommend Svelte to Every New Web Developer
02:16 MIN
Using Web Components and Svelte as an alternative
On tour with heroes == Moving from Angular to WebComponents
Featured Partners
Related Videos
31:21Why I Recommend Svelte to Every New Web Developer
Markus Hatvan
28:44Advanced Typing in TypeScript
Lars Hupel
29:44Don't compromise on speedy delivery nor type-safety by choosing TypeScript
Jens Claes
31:13Lies we Tell Ourselves As Developers
Stefan Baumgartner
44:31Vuejs and TypeScript- Working Together like Peanut Butter and Jelly
Rob Richardson
43:27Do TypeScript without TypeScript
Simone Sanfratello
30:40What the heck do "declarative" and "reactive" actually mean?
André Kovac
48:56All you need is types
Tal Joffe
Related Articles
View all articles.png?w=240&auto=compress,format)
From learning to earning
Jobs that call for the skills explored in this talk.
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Schulz.codes GmbH
Darmstadt, Germany
Intermediate
Senior
React
JavaScript
TypeScript
ELFIN Engineering and Solutions GmbH
€60-68K
Vue.js
Node.js
TypeScript
Software Architecture
+1
norisk Group
Munich, Germany
Intermediate
Senior
Nuxt.js
JavaScript