From f6152002eb828fdc433e162bbad0c143a979c6c6 Mon Sep 17 00:00:00 2001 From: Orta Therox Date: Tue, 21 Jul 2020 10:28:26 -0400 Subject: [PATCH] Initial stab at a TypeScript blog post (#5101) * Initial stab at a blog post * Update site/content/blog/2020-06-04-svelte-and-typescript.md Co-authored-by: pngwn * Update 2020-06-04-svelte-and-typescript.md * Apply suggestions from code review Co-authored-by: halfnelson Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Tighten the post * Fix degit sample * Feedback * More feeedback * Handle feedback * Handle all the feedback in the PR * Add a note about the should work * Change date * code style consistency, fix syntax error Co-authored-by: pngwn Co-authored-by: halfnelson Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> Co-authored-by: Rich Harris --- .../blog/2020-07-17-svelte-and-typescript.md | 141 ++++++++++++++++++ site/static/media/svelte-ts.png | Bin 0 -> 189664 bytes 2 files changed, 141 insertions(+) create mode 100644 site/content/blog/2020-07-17-svelte-and-typescript.md create mode 100644 site/static/media/svelte-ts.png diff --git a/site/content/blog/2020-07-17-svelte-and-typescript.md b/site/content/blog/2020-07-17-svelte-and-typescript.md new file mode 100644 index 000000000000..75f7cd250cfc --- /dev/null +++ b/site/content/blog/2020-07-17-svelte-and-typescript.md @@ -0,0 +1,141 @@ +--- +title: Svelte <3 TypeScript +description: Typernetically enhanced web apps +author: Orta Therox +authorURL: https://twitter.com/orta +--- + +It's been by far the most requested feature for a while, and it's finally here: Svelte officially supports TypeScript. + +We think it'll give you a much nicer development experience — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or JavaScript. + +
+ Screenshot of TypeScript in Svelte +
Image of TypeScript + Svelte in VS Code (theme is Kary Pro.)
+
+ + +## Try it now + +You can start a new Svelte TypeScript project using the [normal template](https://github.com/sveltejs/template) and by running `node scripts/setupTypeScript.js` before you do anything else: + +```bash +npx degit sveltejs/template svelte-typescript-app +cd svelte-typescript-app +node scripts/setupTypeScript.js +``` + +If you're a VS Code user, make sure you're using the (new) [official extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which replaces the popular extension by James Birtles. +Later in this blog post, we'll detail the individual steps involved in using TypeScript in an existing Svelte project. + +## What does it mean to support TypeScript in Svelte? + +TypeScript support in Svelte has been possible for a long time, but you had to mix a lot of disparate tools together and each project ran independently. Today, nearly all of these tools live under the Svelte organization and are maintained by a set of people who take responsibility over the whole pipeline and have common goals. + +A week before COVID was declared a pandemic, [I pitched a consolidation](https://github.com/sveltejs/svelte/issues/4518) of the best Svelte tools and ideas from similar dev-ecosystems and provided a set of steps to get first class TypeScript support. Since then, many people have pitched in and written the code to get us there. + +When we say that Svelte now supports TypeScript, we mean a few different things: + +* You can use TypeScript inside your `