TypeScript provides essential static type checking for long-running Svelte projects, improving maintainability and collaboration among developers.
Initialize a new SvelteKit application with TypeScript support and review the key configuration files like tsconfig.json and svelte.config.js.
Add the `lang="ts"` attribute to script tags and define typed props to get auto-completion and error checking when using components.
Use the `svelte-check` command in watch mode or in a CI/CD pipeline to perform static type analysis across your entire Svelte project.
Make component props optional by assigning a default value and safely handle complex data structures like discriminated unions in your templates.
Use the special `$$Generic` type to create reusable Svelte components that can work with multiple data types while maintaining full type safety.
Build wrapper components like custom buttons that accept standard HTML attributes with full type safety by using `$$restProps` and `$$Props`.
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.
Leverage SvelteKit's auto-generated types for file-based routes to create type-safe API endpoints with validated dynamic URL parameters.
Find additional learning resources, including a dedicated GitHub repository with examples, to continue exploring Svelte and TypeScript integration.
Hubert Burda Media
München, Germany
Sensory-Minds GmbH
Offenbach am Main, Germany
26:00Rainer Hahnekamp
31:13Stefan Baumgartner
28:44Lars Hupel
29:44Jens Claes
31:21Markus Hatvan
43:27Simone Sanfratello
32:28Phil Nash
30:40André Kovac
.png?w=240&auto=compress,format)
Jobs that call for the skills explored in this talk.
CareerValue
Bilthoven, Netherlands
Hochschule Campus Wien
Vienna, Austria
Lightspeed
Ghent, Belgium
Client Server
Richmond, United Kingdom
SPM Sportplatz Media GmbH
Hamburg, Germany
Projektron GmbH
Berlin, Germany
TechBiz Global GmbH
Kiel, Germany