Skip to content

Commit

Permalink
Tighten the post
Browse files Browse the repository at this point in the history
  • Loading branch information
orta committed Jul 5, 2020
1 parent 2fe853b commit b126f67
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 6 deletions.
25 changes: 19 additions & 6 deletions site/content/blog/2020-06-04-svelte-and-typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?

Expand All @@ -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.

This comment has been minimized.

Copy link
@burningTyger

burningTyger Jul 5, 2020

Contributor

a good job


Expand All @@ -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

Expand All @@ -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:
Expand Down Expand Up @@ -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.

Expand Down
Binary file added site/static/media/svelte-ts.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit b126f67

@burningTyger
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Github has a problem with my comments...

Again...
There's a problem with the link in line:

CLI tool [`svelte-check`](https://www.npmjs.com/package/svelte-check). 

And there's a line with improving improvments.

Please sign in to comment.