Typescript for the realworld example

[UnlimitedCookies]

This would make it easier for beginners who want to use Svelte(kit) alongside typescript and need a starting point for all the necessary type declarations. I've tried to add some, but gave up at some point.

It is a selling point for svelte if you see the realworld example and can already get an idea how to use it.

We all know Svelte <3 TypeScript.

I think this would especially please @orta

[SuspiciousLookingOwl]

IMO writing the realworld example in TypeScript is not really a good idea since it might confuse some developers who don't know TypeScript, while if the realworld example is written in JavaScript, it can be understood by both JavaScript and TypeScript developer.

Plus you can find TypeScript example on doc easily, for example typings for load function can be found here

    /**
     * @type {import('@sveltejs/kit').Load}
     * or import type { Load } from "@sveltejs/kit";
     */
    export async function load({ page, fetch, session, context }) {
        const url = `/blog/${page.params.slug}.json`;
        const res = await fetch(url);

        if (res.ok) {
            return {
                props: {
                    article: await res.json()
                }
            };
        }

        return {
            status: res.status,
            error: new Error(`Could not load ${url}`)
        };
    }

[jhubbardsf]

I don't see why a Typescript SvelteKit realworld example can't coexistent with this one. No reason there can't be both. But that might be out of scope of this issue section.

[matjam]

I'm trying to use best practices learning Sveltekit using TypeScript and it's really hard to follow the documentation without a working example in TypeScript to know exactly where to define types and how to pass them around. I'm getting extremely frustrated as I'm a BE dev trying to dabble in Svelte to build UIs for my BE services and this has been my general experience with Javascript projects.

Everyone who KNOWS js and ts well just instantly understand everything because all the docs are written by people who assume everyone has the same context as them. But in reality, people need full working examples, with clear explanation of what things do in the frame work.

As it stands it's not obvious how any of this works in Typescript.

[matjam]

OK, so after spending a little time figuring things out (and getting help from colleagues) I figured out what I was doing wrong, and I wrote an example TypeScript app that people can look at if they stumble on this issue.

If someone is keen to start work on a TypeScript version of the Realworld app, let me know. I could probably help with some of it.

Pro tip: toggling on TS versions of the docs is super helpful.

[AntoineBalaine]

Hello, I’ve ported the real-world app to Svelte Typescript.

It’s basically the same code, I just pulled the types from the api using openapi-typescript, added unit and E2E tests, and stewed the folder the structure a little differently. Porting to typescript was a great way of learning Svelte, and I couldn’t have done it without this repo. So, thank you very much for writing the JS version of this app!

I did my best to write detailed commit messages, too. I hope this helps. Here’s the repo.

[matjam]

Hello, I’ve ported the real-world app to Svelte Typescript.

Ha! Thank you - yet again proof that if you procrastinate long enough, someone else will scratch your itch :D