Svelteが公式にTypeScriptに対応しました

## そもそも Svelte って何？


そもそも Svelte って何？という事についてはこの記事では触れるつもりはないので、
知りたい方は下記に参考になる Qiita の記事をいくつか記載しておきますので、そちらを一読してください。

[ReactとVueを改善したSvelteというライブラリーについて](https://qiita.com/so99ynoodles/items/a8144ced1a21467c6300)
[vueよりも満足度の高いjsフレームワーク、svelteについて](https://qiita.com/koji-kimura/items/592a2bc382ccd1e2b653)
[君はVue,Reactの次に来るSvelteを知っているか？](https://qiita.com/oekazuma/items/d3d97f78466be983b19f)

## Svelte が公式に TypeScript に対応しました

その Svelte が 2020/07/17 に要望の多かった TypeScript に対応しました！
以下に公式サイトに掲載されているTypeScript対応の概要をまとめて記載してみました。

なお以下は概訳であり、オリジナルの文章は下記のリンクを参照してください。

[Svelte <3 TypeScript](https://svelte.dev/blog/svelte-and-typescript?fbclid=IwAR0M3hr9C5HJ3O2eawg6nV6Mn6Q0B9yf11SaWnBHTpSmvx1pb3hFmEML-DA)

## 公式サイト概訳

以前から最も多く要望をもらっていた機能がついに実現しました、Svelte は正式に TypeScript をサポートします。
これにより、TypeScript と JavaScript のどちらを使用しているかに関わらず、より良い開発体験が得られると考えています。

### 今すぐ試してみてください

新しい Svelte TypeScript プロジェクトは [normal template](https://github.com/sveltejs/template) を利用して`node scripts/setupTypeScript.js`を実行することで開始できます。

```
npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js
```

VS Code ユーザーの方は、(新しい) [official extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) を使用していることを確認してください。
これは James Birtles による人気の高い拡張機能に取って代わるものです。
後半では、既存の Svelte プロジェクトで TypeScript を使用するための個々のステップについて詳しく説明します。

### Svelte で TypeScript をサポートするとはどういうことでしょうか?

Svelte で TypeScript に対応することはかなり前から可能でしたが、多くの異なるツールを組み合わせ、それぞれを個別に動作するようにしなければなりませんでした。

今日では、これらのツールのほぼすべてが Svelte の組織の下にあり、パイプライン全体に責任を持ち、共通の目標を持った人たちによってメンテナンスされています。

COVIDがパンデミックと宣言される一週間前、私は類似の開発エコシステムによる最高のSvelte用のツールとアイデアの[統合を提案](https://github.com/sveltejs/svelte/issues/4518)し、ファーストクラスの TypeScript サポートを得るための一連のステップを提供しました。
それ以来、多くの人たちが協力してくれて、そのためのコードを書いてくれました。

Svelte が TypeScript をサポートするようになったということは、いくつかの異なる意味を持っています。

- `<script>`ブロックの中で TypeScript を使うことができます - `lang="ts"` 属性を追加するだけです。
- TypeScript を持つコンポーネントは `svelte-check` コマンドでタイプチェックを行うことができます。
- コンポーネントを書いているときに、マークアップ内の式でも自動補完のヒントや型チェックを得ることができます。
- TypeScript ファイルは Svelte コンポーネント API を理解しています - `.ts` モジュールに `.svelte` ファイルをインポートしても、赤い四角い線はもうありません。

### どのような仕組みになっているのか？

TypeScript のサポートの 2 つの主要な部分を理解するために、TypeScript が開発ツールを提供するために使用している技術と比較してみましょう。

それはコマンドラインで実行し `*.ts` を `*.js` に変換する`tsc compiler`と、テキストエディタからのリクエストに応答するノードAPI である`TSServer`です。`TSServer`は、コーディング中のエディタにJavaScriptとTypeScriptのリアルタイムイントロスペクションを提供するもので、その中にコンパイラのコードのほとんどが含まれています。

一方 Svelte には、Svelte コンパイラと、[Language Server Protocol standard](https://microsoft.github.io//language-server-protocol/overviews/lsp/overview/) を介してテキストエディタの呼び出しに応答する `svelte-language-server` があります。
ファーストクラスの TypeScript をサポートしているということは、これらの二つのシステムが TypeScript コードをうまく扱えることを意味しています。

TypeScript のための Svelte コンパイラのサポートは、[Christian Kaisermann](https://github.com/kaisermann) の `svelte-preprocess` が担当しており、現在では公式の Svelte プロジェクトとなっています。

エディタレベルについては、[Pine](https://github.com/octref) 氏による [Vue](https://vuejs.org/)エコシステムの [Vetur](https://github.com/vuejs/vetur) からインスピレーションを得ました。
Vetur は LSP、VS Code 拡張機能、CLI を提供します。Svelteも現在、[LSP](https://github.com/sveltejs/language-tools/tree/master/packages/language-server)、[VS Code拡張](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode)、[CLI](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check)を提供しています。

### *.svelte イントロスペクション

公式のSvelte VS Codeエクステンションでは、[James Birtles](https://github.com/UnwrittenFun)氏が`UnwrittenFun/svelte-vscode`と`UnwrittenFun/svelte-language-server`で作成した基盤を基に構築しました。

[Simon Holthausen](https://github.com/dummdidumm) と [Lyu, Wei-Da](https://github.com/jasonlyu123) は、JavaScript と TypeScript のイントロスペクションを改善する素晴らしい仕事をしてくれました。
またコードベース内のコンポーネントのPropsを理解する力を強化する [@halfnelson](https://github.com/halfnelson) の `svelte2tsx` を統合しました。

### 既存のプロジェクトにTypeScriptを追加する

スタートする前に、依存関係を追加します。

```
npm install --save-dev @tsconfig/svelte typescript 
svelte-preprocess svelte-check
```

#### 1. TypeScriptのコンパイル

まず最初に、`<script lang="ts">` ブロックの内容を TypeScript コンパイラに渡す `svelte-preprocess` を設定する必要があります。

Rollupプロジェクトでは、次のようになります - Rollupが `.ts` ファイルを扱えるように `@rollup/plugin-typescript` をインストールする必要があることに注意してください。

```
+ import autoPreprocess from 'svelte-preprocess';
+ import typescript from '@rollup/plugin-typescript';

export default {
  ...,
  plugins: [
    svelte({
+       preprocess: autoPreprocess()
    }),
+   typescript({ sourceMap: !production })
  ]
}
```
[他の環境のための説明はこちら。](https://github.com/sveltejs/svelte-preprocess#usage)

TypeScriptを設定するには、プロジェクトのルートに `tsconfig.json` を作成する必要があります。

```
{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*", "src/node_modules"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}
```

`include/exclude` はあなたのプロジェクトによって異なります。ー これらは、ほとんどの Svelte プロジェクトで動作するデフォルト値です。

#### 2. エディタサポート

[LSPを使用しているエディタ](https://langserver.org/#implementations-client)であれば、どのようなエディタでも対応可能です。
[VS Code 拡張機能](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)は、私たちが最も力を入れてきたものです。
しかし、[Atom上](https://github.com/sveltejs/language-tools/pull/160)では作業が進行中で、`coc-svelte` 経由のVimは最新のLSPでアップデートされています。

これらのエディタ拡張機能は、JavaScriptだけを使っていてもコーディング体験を向上させてくれます。
エディタはエラーを提供してくれませんが、推論やリファクタリングツールを提供してくれます。
JavaScript を使って `<script>` タグの先頭に `// @ts-check` を追加すると、インフラの変更なしでより良いエラーメッセージを得ることができます。

`<script>` を TypeScript を使うように切り替えるには、`<script lang="ts">` を使ってください。願わくば、赤い四角い線の海を見ることがないことを願っています。

#### 3. CIチェック

赤い四角いマークがあるのは素晴らしいことですが、まあ、ちょっとしたことです。
しかし、長期的には、コードにエラーがないことを確認できるようにしたいものです。
プロジェクトにエラーがないことを確認するには、CLIツールの`svelte-check`を使うことができます。
これはエディタのように動作し、すべての `.svelte` ファイルに対してエラーを確認します。

依存関係をプロジェクトに追加し、CI に追加することができます。

```
❯ npx svelte-check

Loading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-app
Getting Svelte diagnostics...
====================================

/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2
Error: Type '123' is not assignable to type 'string'. (ts)

====================================
svelte-check found 1 error
error Command failed with exit code 1.
```

### SapperプロジェクトのTypeScriptについてはどうなってますか？

TypeScriptのサポートは 0.28 で Sapper に追加されましたので、古いバージョンをお使いの場合は[アップグレード](https://sapper.svelte.dev/migrating#0_27_to_0_28)をお勧めします。

### どうすれば貢献できますか？

ご質問ありがとうございます。

作業は `sveltejs/language-tools` リポジトリと `Svelte Discord` の `#language-tools` チャンネルで行われています。
問題を報告したり、修正を提出したり、新しいエディタのための拡張機能の開発を手伝ったりしたい場合は、こちらで作業を行っていますので、そこでお会いしましょう！