joshnuss · July 6, 2025 07:09 · Jun 16, 2024 · Jun 16, 2024 · Jun 15, 2024 · Jun 15, 2024
diff --git a/NOTES.md b/NOTES.md
@@ -63,7 +63,7 @@ import adapter from '@sveltejs/adapter-auto'
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 +  preprocess: vitePreprocess(),
-+
+
    kit: {
    	// ...
    }

diff --git a/NOTES.md b/NOTES.md
@@ -54,3 +54,18 @@ export {};
 - 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`
+
+```diff
+import adapter from '@sveltejs/adapter-auto'
++ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
++  preprocess: vitePreprocess(),
++
+   kit: {
+   	// ...
+   }
+}
+```
diff --git a/NOTES.md b/NOTES.md
@@ -22,11 +22,6 @@ pnpm i -D typescript tslib svelte-check
 		"strict": true,
 		"moduleResolution": "bundler"
 	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
 }
 ```
 

diff --git a/NOTES.md b/NOTES.md
@@ -8,7 +8,7 @@ pnpm i -D typescript tslib svelte-check
 
 - Add a `tsconfig.json`
 
-```json
+```javascript
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {

diff --git a/NOTES.md b/NOTES.md
@@ -0,0 +1,61 @@
+# Converting a JavaScript SvelteKit app to TypeScript
+
+- Install `typescript`, `tslib`, and `svelte-check` for dev mode
+
+```bash
+pnpm i -D typescript tslib svelte-check
+```
+
+- Add a `tsconfig.json`
+
+```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"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
+```
+
+- Add `scripts` to `package.json`:
+
+```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`
+
+```typescript
+// 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`