TypeScript

<scriptlang="ts">letname:string='world';functiongreet(name:string) {alert(`Hello,${name}!`);}</script><buttononclick={(e:Event)=>greet(e.target.innerText)}>{nameasstring}</button>

import{functionvitePreprocess(opts?:VitePreprocessOptions|undefined):import("svelte/compiler").PreprocessorGroupvitePreprocess}from'@sveltejs/vite-plugin-svelte';const
constconfig:{preprocess:PreprocessorGroup;}config={// Note the additional `{ script: true }`preprocess:PreprocessorGrouppreprocess:functionvitePreprocess(opts?:VitePreprocessOptions|undefined):import("svelte/compiler").PreprocessorGroupvitePreprocess({VitePreprocessOptions.script?:boolean|undefined
preprocess script block with vite pipeline. Since svelte5 this is not needed for typescript anymore
@defaultfalsescript:true})};exportdefault
constconfig:{preprocess:PreprocessorGroup;}config;

import{functionvitePreprocess(opts?:VitePreprocessOptions|undefined):import("svelte/compiler").PreprocessorGroupvitePreprocess}from'@sveltejs/vite-plugin-svelte';const
constconfig:{preprocess:PreprocessorGroup;}config={preprocess:PreprocessorGrouppreprocess:functionvitePreprocess(opts?:VitePreprocessOptions|undefined):import("svelte/compiler").PreprocessorGroupvitePreprocess()};exportdefault
constconfig:{preprocess:PreprocessorGroup;}config;

<scriptlang="ts">importtype{ Snippet }from'svelte';interfaceProps{requiredProperty:number;optionalProperty?:boolean;snippetWithStringArgument:Snippet<[string]>;eventHandler:(arg:string)=>void;[key:string]:unknown;}let{requiredProperty,optionalProperty,snippetWithStringArgument,eventHandler,...everythingElse}:Props=$props();</script><buttononclick={()=>eventHandler('clicked button')}>{@rendersnippetWithStringArgument('hello')}</button>

<scriptlang="ts"generics="Itemextends{ text:string}">interfaceProps{items:Item[];select(item:Item):void;}let{ items,select }:Props=$props();</script>{#eachitemsasitem}<buttononclick={()=>select(item)}>{item.text}</button>{/each}

<scriptlang="ts">importtype{ HTMLButtonAttributes }from'svelte/elements';let{ children,...rest }:HTMLButtonAttributes=$props();</script><button{...rest}>{@renderchildren?.()}</button>

<scriptlang="ts">importtype{ SvelteHTMLElements }from'svelte/elements';let{ children,...rest }:SvelteHTMLElements['div']=$props();</script><div{...rest}>{@renderchildren?.()}</div>

letletcount:numbercount:number=
function$state<0>(initial:0):0(+1overload)namespace$state
Declares reactive state.
Example:
letcount=$state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);

// Error: Type 'number | undefined' is not assignable to type 'number'letletcount:numbercount:number=
function$state<number>():number|undefined(+1overload)namespace$state
Declares reactive state.
Example:
letcount=$state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state();

classclassCounterCounter{Counter.count: numbercount=
function$state<number>():number|undefined(+1overload)namespace$state
Declares reactive state.
Example:
letcount=$state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state()asnumber;constructor(initial:numberinitial:number) {this.Counter.count: numbercount=initial:numberinitial;}}

<scriptlang="ts">importtype{ Component }from'svelte';interfaceProps{// only components that have at most the "prop"// property required can be passedDynamicComponent:Component<{ prop:string}>;}let{ DynamicComponent }:Props=$props();</script><DynamicComponentprop="foo"/>

importtype{interfaceComponent<PropsextendsRecord<string,any>={},ExportsextendsRecord<string,any>={},BindingsextendskeyofProps|""=string>
Can be used to create strongly typed Svelte components.
Example:
You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:
importtype{ Component }from'svelte';exportdeclareconstMyComponent:Component&#x3C;{ foo:string }>{}
Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:
&#x3C;script lang="ts">import { MyComponent } from "component-library";&#x3C;/script>&#x3C;MyComponent foo={'bar'} />Component,typeComponentProps<CompextendsSvelteComponent|Component<any,any>>=CompextendsSvelteComponent<inferPropsextendsRecord<string,any>,any,any>?Props:CompextendsComponent<inferPropsextendsRecord<...>,any,string>?Props:never
Convenience type to get the props the given component expects.
Example: Ensure a variable contains the props expected by MyComponent:
importtype{ ComponentProps }from'svelte';importMyComponentfrom'./MyComponent.svelte';// Errors if these aren't the correct props expected by MyComponent.constprops:ComponentProps&#x3C;typeofMyComponent>={ foo:'bar'};
 In Svelte 4, you would do ComponentProps&#x3C;MyComponent> because MyComponent was a class.
Example: A generic function that accepts some component and infers the type of its props:
importtype{ Component,ComponentProps }from'svelte';importMyComponentfrom'./MyComponent.svelte';functionwithProps&#x3C;TComponent extends Component&#x3C;any>>(component: TComponent,props: ComponentProps&#x3C;TComponent>) {};// Errors if the second argument is not the correct props expected by the component in the first argument.withProps(MyComponent,{ foo:'bar'});ComponentProps}from'svelte';import
typeMyComponent=SvelteComponent<Record<string,any>,any,any>constMyComponent:LegacyComponentTypeMyComponentfrom'./MyComponent.svelte';functionfunctionwithProps<TComponentextendsComponent<any>>(component:TComponent,props:ComponentProps<TComponent>):voidwithProps<function(type parameter)TComponentinwithProps<TComponentextendsComponent<any>>(component:TComponent,props:ComponentProps<TComponent>):voidTComponentextendsinterfaceComponent<PropsextendsRecord<string,any>={},ExportsextendsRecord<string,any>={},BindingsextendskeyofProps|""=string>
Can be used to create strongly typed Svelte components.
Example:
You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:
importtype{ Component }from'svelte';exportdeclareconstMyComponent:Component&#x3C;{ foo:string }>{}
Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:
&#x3C;script lang="ts">import { MyComponent } from "component-library";&#x3C;/script>&#x3C;MyComponent foo={'bar'} />Component<any>>(component:TComponent extends Component<any>component:function(type parameter)TComponentinwithProps<TComponentextendsComponent<any>>(component:TComponent,props:ComponentProps<TComponent>):voidTComponent,props:ComponentProps<TComponent>props:typeComponentProps<CompextendsSvelteComponent|Component<any,any>>=CompextendsSvelteComponent<inferPropsextendsRecord<string,any>,any,any>?Props:CompextendsComponent<inferPropsextendsRecord<...>,any,string>?Props:never
Convenience type to get the props the given component expects.
Example: Ensure a variable contains the props expected by MyComponent:
importtype{ ComponentProps }from'svelte';importMyComponentfrom'./MyComponent.svelte';// Errors if these aren't the correct props expected by MyComponent.constprops:ComponentProps&#x3C;typeofMyComponent>={ foo:'bar'};
 In Svelte 4, you would do ComponentProps&#x3C;MyComponent> because MyComponent was a class.
Example: A generic function that accepts some component and infers the type of its props:
importtype{ Component,ComponentProps }from'svelte';importMyComponentfrom'./MyComponent.svelte';functionwithProps&#x3C;TComponent extends Component&#x3C;any>>(component: TComponent,props: ComponentProps&#x3C;TComponent>) {};// Errors if the second argument is not the correct props expected by the component in the first argument.withProps(MyComponent,{ foo:'bar'});ComponentProps<function(type parameter)TComponentinwithProps<TComponentextendsComponent<any>>(component:TComponent,props:ComponentProps<TComponent>):voidTComponent>) {}// Errors if the second argument is not the correct props expected// by the component in the first argument.functionwithProps<LegacyComponentType>(component:LegacyComponentType,props:Record<string,any>):voidwithProps(constMyComponent:LegacyComponentTypeMyComponent,{foo:stringfoo:'bar'});

<scriptlang="ts">importMyComponentfrom'./MyComponent.svelte';letcomponentConstructor:typeofMyComponent=MyComponent;letcomponentInstance:MyComponent;</script><MyComponentbind:this={componentInstance} />

declarenamespacesvelteHTML{// enhance elementsinterfaceinterfacesvelteHTML.IntrinsicElementsIntrinsicElements{'my-custom-element':{someattribute:stringsomeattribute:string;'on:event':(e:CustomEvent<any>e:interfaceCustomEvent<T=any>
MDN ReferenceCustomEvent<any>)=>void};}// enhance attributesinterfaceinterfacesvelteHTML.HTMLAttributes<T>HTMLAttributes<function(type parameter)TinHTMLAttributes<T>T> {// If you want to use the beforeinstallprompt eventsvelteHTML.HTMLAttributes<T>.onbeforeinstallprompt?:((event:any)=>any)|undefinedonbeforeinstallprompt?:(event:anyevent:any)=>any;// If you want to use myCustomAttribute={..} (note: all lowercase)svelteHTML.HTMLAttributes<T>.mycustomattribute?:anymycustomattribute?:any;// You can replace any with something more specific if you like}}

import{HTMLButtonAttributes}from'svelte/elements';declaremodule'svelte/elements'{exportinterfaceSvelteHTMLElements{'custom-button':HTMLButtonAttributes;}// allows for more granular control over what element to add the typings toexportinterfaceHTMLButtonAttributes{HTMLButtonAttributes.veryexperimentalattribute?:string|undefinedveryexperimentalattribute?:string;}}export{};// ensure this is not an ambient module, else types will be overridden instead of augmented