TypeScript view

[Rich-Harris]

would be neat if we could opt into TypeScript, both as .ts and lang="ts", and opt into JSDoc otherwise

[stephane-vanraes]

One option would be a toggle in the sidebar to change between TS and JS

But I think the main issue with this is that it requires to write all content in both typescript and javascript, which could be a lot of duplication/extra work.

What about a section Part 5: TypeScript ?
Here we can then put the most common pitfalls surrounding typescript:

• Adding TypeScript (running the setup script ? / lang=ts)
• app.d.ts what is how, how to add your own types
• other things...

[Rich-Harris]

it requires to write all content in both typescript and javascript

Not necessarily. We have the same problem for create-svelte, and we solve it like this:

• https://github.com/sveltejs/kit/blob/master/packages/create-svelte/templates/default/src/routes/todos/index.svelte
• https://github.com/sveltejs/kit/blob/master/packages/create-svelte/templates/default/src/routes/todos/index.ts

<script lang="ts">
	import { enhance } from '$lib/form';
	import { scale } from 'svelte/transition';
	import { flip } from 'svelte/animate';

	/**
	 * @typedef {{
	 *   uid: string;
	 *   created_at: Date;
	 *   text: string;
	 *   done: boolean;
	 *   pending_delete: boolean;
	 * }} Todo
	 */

	type Todo = {
		uid: string;
		created_at: Date;
		text: string;
		done: boolean;
		pending_delete: boolean;
	};

	/** @type {Todo[]} */
	export let todos: Todo[];
</script>

import { api } from './_api';
import type { RequestHandler } from './__types';

/** @type {import('./__types').RequestHandler} */
export const get: RequestHandler = async ({ locals }) => {
	// ...
}

In other words we write TypeScript and annotate it with redundant JS, then we have the option of keeping the TS and removing the JSDoc, keeping the JSDoc and removing the TS, or removing both. It's a bit more work than just writing type-less code, but it's not twice as much work, and there's little danger of things falling out of sync. We could do the same here.

Design-wise I feel like it needs to be a top-level option (maybe in the menu) since it should apply to code snippets in the sidebar as well.

[gtm-nayan]

I have a feeling comparing contents for the solve button would end up being kinda painful,

maybe it won't be with fetching the transformed files from vite for comparison.