Svelte and SvelteKit TypeScript Cheatsheet

GitHub

Ever wondered how to type props, slots, events, etc. in your projects? Here's how 👇

Sponsor

# Props

<script lang="ts">
	// Regular prop
	export let count: number;

	// Untyped = any
	export let name;
</script>

{count}

{name}
<script lang="ts">
	export let firstName: string;
	export let lastName: string;

	// Inferred
	$: greeting = 'Hello ' + firstName;

	// Type it explicitly by creating a var like so 👇
	let fancyGreeting: string;
	$: fancyGreeting = 'Good evening ' + lastName;
</script>

{greeting}

{fancyGreeting}
<script lang="ts">
	export let count: number | undefined;
</script>

{count}