Converting a JavaScript SvelteKit app to TypeScript

• Install typescript, tslib, and svelte-check for dev mode

pnpm i -D typescript tslib svelte-check

• Add a tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"moduleResolution": "bundler"
	}
}

• Add scripts to package.json:

"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"

• Add an src/app.d.ts

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		// interface PageState {}
		// interface Platform {}
	}
}

export {};

• Rename src/lib/*.js -> src/lib/*.ts, and add types.
• Rename src/routes/*.js -> src/routes/*.ts, and add types.
• Add <script lang="ts"> to src/routes/*.svelte, and related types.
• Rename vite.config.js -> vite.config.ts
• Add vitePreprocessor to svelte.config.js

import adapter from '@sveltejs/adapter-auto'
+ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
+  preprocess: vitePreprocess(),

   kit: {
   	// ...
   }
}