[Svelte] "TypeScript support in Svelte": improvements

[klequis]

MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript

Hi,

Here is a suggestion for a change. If you think there is a need for the below changes I would be happy to make them and submit for your approval.

I started this tutorial from the beginning and was impressed with how well the code examples work and how clearly things were explained. However, when I got to TypeScript support in Svelte I found it hard to follow and spent a good amount of time figuring out how to get my project configured so I could continue.

What made it hard to follow was there is no clear indication what is extra/introductory content and what is part of the tutorial. With respect to taking the code at npx degit opensas/mdn-svelte-tutorial/07-typescript-support and following the steps to convert to a TypeScript project, I got confused as to what were steps of the tutorial and what was additional/background information. Even once I understood that, the project still would not run. One problem was I needed to incorporate svelte-preprocess to get it working. This was pretty easy but I think it would be good to include it in the tutorial.

I would suggest the following changes

Either

1. Make it clear that some additional/non-tutorial information is being given by introducing it as such.
2. Have a brief paragraph about TypeScript, something like, "TypeScript is ... its benefits are ... You can read more about it here." And provide links to more detailed documentation
3. Have a brief paragraph about different ways of converting Svelte projects to TypeScript and provide links to more detailed documentation.
4. Make it clear where the tutorial steps resume
5. Add the steps to configure 'svelte-preprocess'

Finally, many of the packages used in the example code are out of date. To get the code working I updated them on my project. I might not have needed to but it seemed easier. I don't know if readers are running into problems because of outdated packages but I'll be learning Svelte/TS config for my own needs and there is a good chance I would have time to update the examples.

What information was incorrect, unhelpful, or incomplete?

Specific section or headline?

What did you expect to see?

Did you test this? If so, how?

MDN Content page report details

* Folder: `en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript` * MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md * Last commit: https://github.com/mdn/content/commit/07453ac2b659a397b0fee921fa71db5488e9ca62 * Document last modified: 2021-10-08T14:43:33.000Z

[sideshowbarker]

If you think there is a need for the below changes I would be happy to make them and submit for your approval.

Those changes described seem like welcome improvements, so I’d suggest you go ahead an open a pull request with the proposed changes.

[klequis]

Working on it.

[klequis]

What I thought was a config problem now looks like user error. I have also realized that this tutorial was written by opensas so am reaching out to him.