Tighten the post

Author: orta

site/content/blog/2020-06-04-svelte-and-typescript.md

@@ -5,9 +5,14 @@ author: Orta Therox
 authorURL: https://twitter.com/orta
 ---
 
-It's been on the TODO list for a while, and it's now happening. TypeScript with Svelte is now a first class citizen of the eco-system.
+It's been on the TODO list for a while, and it's now happening. TypeScript with Svelte is now a first class citizen of the ecosystem.
 
-We think it'll help you handle much larger Svelte code bases regardless of whether you use TypeScript.
+We think it'll help you handle much larger Svelte code bases regardless of whether you use TypeScript or JavaScript.
+
+<figure>
+	<img alt="Screenshot of TypeScript in Svelte" src="media/svelte-ts.png">
+	<figcaption>Image of TypeScript + Svelte in VS Code (theme is <a href="https://marketplace.visualstudio.com/items?itemName=karyfoundation.theme-karyfoundation-themes">Kary Pro</a>.)</figcaption>
+</figure>
 
 ## What does it mean to support TypeScript in Svelte?
 
@@ -17,7 +22,7 @@ A week before COVID was declared a pandemic, [I pitched a consolidation](https:/
 
 #### How does it work?
 
-To understand the two main parts of TypeScript support, we'll compare it to the technique TypeScript uses to provide dev tools. There is a compiler `tsc` which you run on the command-line to convert `*.ts` to `*.js`, then there is a `TSServer` which is a node API that responds to requests from text editors. The `TSServer` is what provides all the JavaScript and TypeScript experience, and it has most of the compiler's code inside it.
+To understand the two main parts of TypeScript support, we'll compare it to the technique TypeScript uses to provide dev tools. There is a compiler `tsc` which you run on the command-line to convert `*.ts` to `*.js`, then there is a `TSServer` which is a node API that responds to requests from text editors. The `TSServer` is what provides all the JavaScript and TypeScript realtime introspection for editors while coding, and it has most of the compiler's code inside it.
 
 For Svelte, we have the Svelte compiler, and now we have the [`svelte-language-server`](https://github.com/sveltejs/language-tools/tree/master/packages/language-server#svelte-language-server) which responds to text editor calls via the [Language Server Protocol standard](https://microsoft.github.io//language-server-protocol/overviews/lsp/overview/). First class TypeScript support means that _both_ of these two systems do good job of handling TypeScript code.
 
@@ -30,7 +35,8 @@ For the editor level, we took inspiration from [Pine's](https://github.com/octre
 
 For the official Svelte VS Code extension, we built off the foundations which [James Birtles](https://github.com/UnwrittenFun) has created in [`UnwrittenFun/svelte-vscode`](https://github.com/UnwrittenFun/svelte-vscode) and [`UnwrittenFun/svelte-language-server`](https://github.com/UnwrittenFun/svelte-language-server/).
 
-[Simon H](https://github.com/dummdidumm) and [Lyu, Wei-Da](https://github.com/jasonlyu123) have done great work improving the Javascript and Typescript introspection, including integrating [@halfnelson](https://github.com/halfnelson)'s [svelte2ts](https://github.com/sveltejs/language-tools/tree/master/packages/svelte2tsx#svelte2tsx) which powers understanding the props on components in your codebase.
+[Simon Holthausen](https://github.com/dummdidumm) and [Lyu, Wei-Da](https://github.com/jasonlyu123) have done great work improving the JavaScript and TypeScript introspection, including integrating [@halfnelson](https://github.com/halfnelson)'s [svelte2tsx](https://github.com/sveltejs/language-tools/tree/master/packages/svelte2tsx#svelte2tsx) which powers understanding the props on components in your codebase.
+
 
 ### Try today
 
@@ -43,6 +49,13 @@ node scripts/updateTypeScriptVersion.js
 
 ### Adding TypeScript support to your project
 
+Before getting started, add the dependencies:
+
+```bash
+yarn add --dev svelte-preprocess @rollup/plugin-typescript @tsconfig/svelte svelte-check
+npm install --save-dev svelte-preprocess @rollup/plugin-typescript @tsconfig/svelte svelte-check
+```
+
 ##### 1. Compiling TypeScript
 
 You first need to set up [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess#svelte-preprocess) and  [`@rollup/plugin-typescript`](https://github.com/rollup/plugins/tree/master/packages/typescript#rollupplugin-typescript) for the compiler:
@@ -81,9 +94,9 @@ Your `include`/`exclude` may differ per project.
 
 ##### 2. Editor Support
 
-Any editor which supports using an LSP can work, the [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) extension has been our primary focus but there is work in progress [on Atom](https://github.com/sveltejs/language-tools/pull/160), and [coc-svelte](https://github.com/coc-extensions/coc-svelte) has been updated with the latest changes.
+Any editor [using an LSP](https://langserver.org/#implementations-client) can be supported. The [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) extension has been our primary focus, but there is work in progress [on Atom](https://github.com/sveltejs/language-tools/pull/160), and Vim via [coc-svelte](https://github.com/coc-extensions/coc-svelte) has been updated with the latest LSP.
 
-These editor extensions will improve your coding experience even if you only use JavaScript. The editor won't offer errors, but it will offer inference and refactoring tools. You can [add `// @check-js`](https://www.staging-typescript.org/docs/handbook/intro-to-js-ts.html) to the top of a `<script>` tag using JavaScript to get better error messages.
+These editor extensions will improve your coding experience even if you only use JavaScript. The editor won't offer errors, but it will offer inference and refactoring tools. You can [add `// @check-js`](https://www.staging-typescript.org/docs/handbook/intro-to-js-ts.html) to the top of a `<script>` tag using JavaScript to get better error messages with no infra changes.
 
 To switch a `<script>` to use TypeScript, use `<script lang="ts">` and that should be it. Hopefully you won't be seeing an ocean of red squiggles.