WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2022 • Jun 15, 2022

Svelte ♥ TypeScript and so will you

Ivan Hofer

Svelte's simplicity no longer requires sacrificing type safety. Master generic components, svelte-check, and typed contexts to eliminate runtime exceptions and scale your frontend architecture.

Pause
Mute Enter Fullscreen
#1 about 4 min

The importance of TypeScript in enterprise Svelte projects

Adding static type checking improves the long-term maintainability of large enterprise applications built with Svelte.

#2 about 3 min

Initializing a new SvelteKit project via the CLI

Running command line setup processes scaffolds a new application structure with basic TypeScript configuration.

#3 about 2 min

Configuring the Svelte preprocessor for TypeScript support

Exploring the generated configuration files reveals how the preprocessor integrates different languages into components.

#4 about 3 min

Creating the first typed Svelte component

Adding language attributes to script tags enables comprehensive property linting and syntax highlighting for components.

#5 about 2 min

Catching application errors with the svelte-check utility

Running background validation scripts across an entire project catches hidden compilation issues locally and inside continuous integration pipelines.

#6 about 3 min

Handling optional props and complex API responses

Leveraging discriminated unions prevents layout errors when rendering unpredictable application payloads or setting default property values.

#7 about 3 min

Implementing generic types inside Svelte components

Defining generic declarations allows developers to construct modular components capable of handling multiple variable structures cleanly.

#8 about 4 min

Typing unhandled component props and native DOM elements

Restoring type safety on custom wrapper components requires explicit type definitions for remaining attributes and standard element properties.

#9 about 4 min

Making Svelte context getters and setters type-safe

Securing global state variables via isolated wrapper files avoids loose string-based mapping collisions by using explicit object references.

#10 about 3 min

Adding generated types to SvelteKit routing endpoints

Extending request handlers with generated relative path types automatically defines dynamic network parameters natively.

#11 about 2 min

Exploring learning resources and internationalization libraries

Studying up-to-date community examples accelerates feature velocity when integrating framework-agnostic tooling.

Matching moments

2:49 min

Introduction to the speakers and the TypeScript problem

Michael Hladky +1 · LIVE

1:21 min

History and timeline of Svelte and SvelteKit

Markus Hatvan · LIVE

2:00 min

The origins and early problems solved by TypeScript

Dani Coll Dani Coll · World Congress 2026 Europe

4:52 min

Core concepts and benefits of the Svelte framework

Markus Hatvan · LIVE

43 sec

Reviewing the benefits of building with Svelte conventions

Benjamin Glusa · LIVE

49 sec

Exploring a basic SvelteKit project structure and scripts

Markus Hatvan · LIVE

More from World Congress 2022

What the heck do "declarative" and "reactive" actually mean? thumbnail
30:40
about 4 years ago

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

André Kovac

The Design and Evolution of C++ thumbnail
1:01:15
over 4 years ago

The Design and Evolution of C++

Bjarne Stroustrup

But, you're not Facebook thumbnail
31:12
over 4 years ago

But, you're not Facebook

Kristijan Ristovski

Communicate efficiently with Software Architecture Diagrams thumbnail
28:11
over 4 years ago

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

Get Ready for Jakarta EE 10! thumbnail
42:53
over 4 years ago

Get Ready for Jakarta EE 10!

Ivar Grimstad

Keep your code refactorable thumbnail
26:46
over 4 years ago

Keep your code refactorable

Gerrit Stapper

Upcoming sessions on this topic

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Teaching AI Coding Agents to Build It Right the First Time

  • Sajeetharan Sinnathurai

    Microsoft

    Principal Product Manager

Open session

Supply Chain Security for the Everyday Engineer

  • Pradumna Saraf

    Kestra Technologies

    Quality Assurance Engineer

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

How is SWE & EM roles are changing in the age of AI

  • Amol Sharma

    Stripe

    Engineering Manager

Related videos

Why I Recommend Svelte to Every New Web Developer thumbnail
31:21
LIVE • over 5 years ago

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly thumbnail
44:31
LIVE • over 5 years ago

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

On tour with heroes == Moving from Angular to WebComponents thumbnail
43:08
LIVE • almost 6 years ago

On tour with heroes == Moving from Angular to WebComponents

Benjamin Glusa

Don't compromise on speedy delivery nor type-safety by choosing TypeScript thumbnail
29:44
World Congress 2023 • about 3 years ago

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

Jens Claes

Do TypeScript without TypeScript thumbnail
43:27
JS Congress • almost 5 years ago

Do TypeScript without TypeScript

Simone Sanfratello

All you need is types thumbnail
48:56
JS Congress • almost 5 years ago

All you need is types

Tal Joffe

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.