Ivan Hofer

Jun 15, 2022 • World Congress 2022

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.

#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.

Cards Co

Remote

Intermediate

JavaScript

TypeScript

Andrew Comp
Cosio Valtellino, Italy

Intermediate

TypeScript

Name of

Remote

Intermediate

PHP

Java

From learning to earning

Jobs that call for the skills explored in this talk.

Senior Frontend Developer - Typescript / Svelte - (f/m/x)

doinstruct Software GmbH
Berlin, Germany

Senior

GIT

JavaScript

TypeScript

Speech Processing Solutions
Vienna, Austria

Intermediate

CSS

HTML

JavaScript

TypeScript

Schulz.codes GmbH
Darmstadt, Germany

Intermediate

Senior

React

JavaScript

TypeScript

Saby New Compy
Karlsruhe, Germany

Intermediate

Java

Kotlin

Typescript Svelte Backend Development Frontend Development

Freelancer Technology Pty Limited
Wiesbaden, Germany

Senior

HTML

Svelte

Vue.js

Laravel

Next.js

Softwareentwickler Frontend (w/m/d) / Bielefeld

Saby New Compy
Bielefeld, Germany

Intermediate

Java

Kotlin

SAFELOG GmbH

Remote

Node.js

TypeScript

Material Design

norisk Group
München, Germany

Intermediate

Senior

Nuxt.js

JavaScript

SOMI Solutions GmbH
Kiel, Germany

TypeScript

The benefits of using TypeScript with Svelte

Setting up a SvelteKit project with TypeScript

Defining and using typed component props

Running project-wide type checks with svelte-check

Handling optional props and discriminated unions

Creating generic components with `$$Generic`

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

Implementing a type-safe Svelte context

Type-safe routing and endpoints in SvelteKit

Resources for learning Svelte with TypeScript

Typescript developer

Typescript developer

Remote

Matching moments

Exploring the future of Svelte with SvelteKit

Why I Recommend Svelte to Every New Web Developer

Exploring the history and motivation behind Svelte

Why I Recommend Svelte to Every New Web Developer

Navigating the Svelte ecosystem and its limitations

Why I Recommend Svelte to Every New Web Developer

How to convince your team to adopt TypeScript

4 Steps from JavaScript to TypeScript

Why developers prefer Svelte over other frameworks

Why I Recommend Svelte to Every New Web Developer

Exploring the key benefits of adopting TypeScript

Do TypeScript without TypeScript

Using Web Components and Svelte as an alternative

On tour with heroes == Moving from Angular to WebComponents

Final takeaways for building modern TypeScript applications

End-to-End TypeScript: Completing the Modern Development Stack

Featured Partners

Related Videos

Lies we Tell Ourselves As Developers

Advanced Typing in TypeScript

To New Frontiers: The Future of Frontend Development

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

Do TypeScript without TypeScript

4 Steps from JavaScript to TypeScript

Why I Recommend Svelte to Every New Web Developer

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

Related Articles

From learning to earning

Senior Frontend Developer - Typescript / Svelte - (f/m/x)

Frontend Web Developer

Senior Fullstack TypeScript Developer (m/w/d)

Software Engineer Frontend (w/m/d)

Typescript Svelte Backend Development Frontend Development

Softwareentwickler Frontend (w/m/d) / Bielefeld

Frontendentwickler TypeScript / React

Tech Lead Frontend Entwicklung (m/w/d)

TypeScript/JavaScript Entwickler (w/m/d)