Svelte 49: TypeScript with Svelte
easy⏱ 5 mincoursesvelte
Type stripping, not type checking at runtime
When you write <script lang="ts">, the Svelte compiler (via its TypeScript preprocessor) simply erases the type annotations before generating JavaScript. Interfaces, generics like $state<number>, and typed $props<Props>() destructures all vanish from the compiled output — they exist purely to help you and your editor catch mistakes before the code ever runs.
<script lang="ts">
interface Props {
name: string;
role?: string;
}
let { name, role = 'Member' }: Props = $props();
let views = $state<number>(0);
</script>
Type your props and your state
In the editor: define an interface Profile with name: string and title: string. Destructure it from $props(). Declare let views = $state<number>(0) and increment it with a button. TypeScript will flag it immediately if you ever pass the wrong shape of prop.
Editor tooling still needs the Svelte extension
In a real project, TypeScript-in-Svelte support comes from the official Svelte VS Code extension or svelte-check on the CLI — plain tsc can't parse .svelte files. This sandbox's compiler strips types the same way, so what you see run here behaves identically to a real Vite + svelte-preprocess setup.
Zero runtime cost
Every type annotation you add is a compile-time-only safety net. It never ships to the browser and never slows down your component — Svelte + TypeScript gives you safety without a runtime tax.