Adding TypeScript to an Existing Svelte Project

Why Add TypeScript to Your Svelte Project

TypeScript brings significant advantages to Svelte applications, helping developers catch bugs early and write more maintainable code. As projects grow in complexity, type safety becomes increasingly valuable for maintaining code quality and improving developer productivity.

The compiler catches type mismatches at compile time before they reach production, reducing runtime errors that can impact users Svelte TypeScript Documentation. IDEs provide smarter autocompletion, code navigation, and refactoring support when types are present, making development more efficient MDN Web Docs. Type annotations serve as built-in documentation for component APIs, making your codebase immediately understandable to new team members.

The migration process is straightforward because TypeScript is a superset of JavaScript--your existing code continues to work while you gradually add type annotations where needed. This allows for incremental adoption, so you can start typing your most critical components first and expand coverage over time. This guide walks you through configuration for all major bundler setups and covers best practices for typing components, props, state, and stores.

Our web development services team regularly helps clients modernize their Svelte applications with TypeScript to improve code quality and maintainability. Whether you're building a new feature or maintaining an existing codebase, our custom software development expertise ensures smooth TypeScript integration for projects of any scale.

Prerequisites and Project Assessment

Before adding TypeScript, ensure your development environment is ready for the migration.

What You Need

• Node.js and npm installed and up to date
• A working Svelte project with version control
• VS Code or another IDE with TypeScript support
• Understanding of your current bundler setup

Check Your Current Setup

Identify which bundler your project uses by examining your configuration files:

Knowing your bundler is essential because the TypeScript configuration differs significantly between Vite, Rollup, and webpack setups. Most modern Svelte projects use Vite, but legacy projects may still rely on Rollup or webpack. Our web development services team can help you assess your current setup and plan a smooth migration path.

Installing TypeScript and Dependencies

The installation process involves adding TypeScript as a development dependency and configuring your project accordingly.

Step 1: Install TypeScript

npm install --save-dev typescript

This installs TypeScript as a development dependency, ensuring it doesn't affect your production bundle LogRocket.

Step 2: Initialize TypeScript Configuration

npx tsc --init

This generates a tsconfig.json file that you'll customize for your Svelte project. The default configuration provides a starting point, but Svelte projects require specific settings for optimal type checking, such as setting noEmit to true since Vite handles transpilation.

Configuring Vite and SvelteKit Projects

Modern SvelteKit and Vite projects benefit from built-in TypeScript support through vitePreprocess.

Update svelte.config.js

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
 preprocess: vitePreprocess()
};

export default config;

In Svelte 5, TypeScript support is enabled automatically through vitePreprocess() Svelte TypeScript Documentation. The preprocessor handles TypeScript compilation seamlessly without additional configuration, making migration straightforward.

Svelte 4 Configuration

For Svelte 4 projects, you may need to explicitly enable TypeScript:

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
 preprocess: vitePreprocess({ script: true })
};

The { script: true } option ensures TypeScript processing is active in older Svelte versions.

Configuring Rollup-Based Projects

Rollup-based projects require additional packages and configuration to support TypeScript properly LogRocket.

Install Required Packages

npm install --save-dev rollup-plugin-svelte svelte-preprocess @rollup/plugin-typescript

Update rollup.config.js

import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

export default {
 input: 'src/main.js',
 output: {
 sourcemap: true,
 format: 'iife',
 name: 'app',
 file: 'public/build/bundle.js'
 },
 plugins: [
 svelte({
 preprocess: sveltePreprocess({
 typescript: true
 })
 }),
 typescript({
 sourceMap: true,
 inlineSources: true
 })
 ]
};

The key configuration involves enabling TypeScript within sveltePreprocess and adding the TypeScript plugin to handle .ts file compilation.

Configuring webpack Projects

webpack projects need specific loader configurations to handle TypeScript files alongside Svelte components.

Install Required Packages

npm install --save-dev svelte-loader ts-loader

Update webpack.config.js

const path = require('path');

const config = {
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'public'),
 filename: 'bundle.js'
 },
 module: {
 rules: [
 {
 test: /\.svelte$/,
 use: {
 loader: 'svelte-loader',
 options: {
 preprocess: require('svelte-preprocess')({ typescript: true })
 }
 }
 },
 {
 test: /\.ts$/,
 use: 'ts-loader'
 }
 ]
 },
 resolve: {
 extensions: ['.mjs', '.js', '.ts', '.svelte']
 }
};

module.exports = config;

The configuration uses ts-loader for TypeScript files and configures svelte-loader with TypeScript preprocessing enabled.

Configuring tsconfig.json

Your TypeScript configuration file controls how type checking operates in your project.

Recommended Configuration

{
 "compilerOptions": {
 "target": "ES2015",
 "module": "ESNext",
 "moduleResolution": "bundler",
 "verbatimModuleSyntax": true,
 "isolatedModules": true,
 "strict": true,
 "noEmit": true,
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true
 },
 "include": ["src/**/*"],
 "exclude": ["node_modules", "public"]
}

Key Settings Explained

Setting target to ES2015 or higher ensures that classes compile correctly Svelte TypeScript Documentation. The noEmit option is set to true because Vite handles the actual transpilation during the build process.

Converting Your First Component

Start with a simple component to understand the migration pattern. The <script lang="ts"> directive enables TypeScript syntax Svelte TypeScript Documentation.

Before: JavaScript Component

<script>
 let name = 'World';
 
 function greet(inputName) {
 alert(`Hello, ${inputName}!`);
 }
</script>

<button onclick={() => greet(name)}>
 Hello {name}
</button>

After: TypeScript Component

<script lang="ts">
 let name: string = 'World';
 
 function greet(inputName: string): void {
 alert(`Hello, ${inputName}!`);
 }
</script>

<button onclick={() => greet(name)}>
 Hello {name}
</button>

The migration is incremental--add lang="ts" to components as you're ready to type them. This approach allows you to gradually adopt TypeScript without disrupting your development workflow.

Typing Component Props

In Svelte 5, use the $props() rune with TypeScript interfaces for type-safe prop definitions Svelte TypeScript Documentation.

Basic Prop Types

<script lang="ts">
 interface Props {
 title: string;
 count?: number;
 onClick?: (event: MouseEvent) => void;
 }

 let { title, count = 0, onClick }: Props = $props();
</script>

<button onclick={onClick}>
 {title}: {count}
</button>

Optional props use the ? modifier with default values provided in the destructuring assignment. This pattern ensures type safety while maintaining optional behavior for components.

Generic Components

Create reusable components that work with multiple data types using the generics attribute.

<script lang="ts" generics="Item extends { text: string }">
 interface Props {
 items: Item[];
 select: (item: Item) => void;
 }

 let { items, select }: Props = $props();
</script>

{#each items as item}
 <button onclick={() => select(item)}>
 {item.text}
 </button>
{/each}

The generics attribute enables type-safe generic components where the relationship between props is explicitly typed Svelte TypeScript Documentation. This is particularly valuable for list components, form inputs, and data display components that work with various data shapes.

Typing State and Reactivity

Type $state variables like any other TypeScript variable.

<script lang="ts">
 let count: number = $state(0);
 let name: string = $state('');
 let items: string[] = $state([]);
</script>

Handling Undefined State

If you don't provide an initial value, TypeScript infers undefined:

<script lang="ts">
 // Type is number | undefined
 let count = $state();
</script>

Use type assertions when you know a value will be defined:

<script lang="ts">
 let count = $state() as number;
</script>

This pattern follows standard TypeScript conventions while leveraging Svelte 5's reactivity system.

Typing Wrapper Components

When creating wrapper components, use types from svelte/elements to maintain proper HTML attribute typing.

Using HTML Element Types

<script lang="ts">
 import type { HTMLButtonAttributes } from 'svelte/elements';

 let { children, ...rest }: HTMLButtonAttributes = $props();
</script>

<button {...rest}>
 {@render children?.()}
</button>

Using SvelteHTMLElements for Custom Elements

<script lang="ts">
 import type { SvelteHTMLElements } from 'svelte/elements';

 let { children, ...rest }: SvelteHTMLElements['div'] = $props();
</script>

<div {...rest}>
 {@render children?.()}
</div>

Using svelte/elements types ensures your wrapper components properly type all native HTML attributes, preventing errors when users pass props like disabled, class, or event handlers.

Working with Stores and TypeScript

Type your Svelte stores to ensure type safety across your application state.

Typed Writable Stores

<script lang="ts">
 import { writable } from 'svelte/store';

 interface User {
 id: number;
 name: string;
 email: string;
 }

 const userStore = writable<User | null>(null);
</script>

Creating Typed Custom Stores

import { writable, type Writable } from 'svelte/store';

export function createTypedStore<T>(initialValue: T): Writable<T> {
 const { subscribe, set, update } = writable<T>(initialValue);
 
 return {
 subscribe,
 set: (value: T) => set(value),
 update: (fn: (value: T) => T) => update(fn),
 reset: () => set(initialValue)
 };
}

Typed stores prevent type mismatches when reading and writing state, which is especially important in larger applications with multiple contributors MDN Web Docs.

Best Practices for TypeScript in Svelte

Incremental Adoption Strategy

1. Start with lang="ts" on components you want to type first
2. Use allowJs: true in tsconfig.json for mixed JavaScript/TypeScript files
3. Gradually increase strictness as your team becomes comfortable

Performance Considerations

• TypeScript types are stripped during compilation--no runtime overhead MDN Web Docs
• Use skipLibCheck: true to speed up compilation
• Run type checking separately during CI with svelte-check

Code Organization

• Create a types.ts file for shared interfaces
• Use barrel exports: export type * from './types'
• Keep component-specific types in the same file when not reused

Common Pitfalls to Avoid

• Enums in Svelte components: Use const objects instead, as enums aren't supported in Svelte's build process Svelte TypeScript Documentation
• Missing DOM types: Use svelte/elements for proper HTML element typing
• Private modifiers: Use TypeScript's type system rather than class modifiers

Following these best practices ensures your TypeScript adoption strengthens rather than complicates your codebase. Our team has helped numerous clients successfully migrate to TypeScript--learn more about our software development methodology.

Verifying Your TypeScript Setup

After configuration, verify that TypeScript is working correctly.

Build Verification

npm run build

A successful build confirms TypeScript is configured correctly and compiling without errors.

IDE Verification

VS Code with the Svelte extension should show:

• Type errors highlighted in red
• Autocomplete for typed props
• Hover information showing types

Command Line Type Checking

Add type checking to your package.json scripts:

{
 "scripts": {
 "check": "svelte-check --tsconfig ./tsconfig.json"
 }
}

Run with npm run check for comprehensive type verification across your project. This command performs thorough type checking using Svelte's type-aware analysis Svelte TypeScript Documentation.

Sources

1. LogRocket: Adding TypeScript to an existing Svelte project - Comprehensive tutorial covering Rollup, webpack, and Parcel bundler configurations
2. Svelte.dev Docs: TypeScript - Official Svelte documentation covering TypeScript integration
3. MDN Web Docs: TypeScript support in Svelte - Educational guide on TypeScript migration