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

そもそも Svelte って何？

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

ReactとVueを改善したSvelteというライブラリーについて
 vueよりも満足度の高いjsフレームワーク、svelteについて
 君はVue,Reactの次に来るSvelteを知っているか？

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

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

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

公式サイト概訳

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

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

新しい Svelte TypeScript プロジェクトは normal template を利用してnode scripts/setupTypeScript.jsを実行することで開始できます。

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

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

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

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

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

COVIDがパンデミックと宣言される一週間前、私は類似の開発エコシステムによる最高のSvelte用のツールとアイデアの統合を提案し、ファーストクラスの 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 を介してテキストエディタの呼び出しに応答する svelte-language-server があります。
ファーストクラスの TypeScript をサポートしているということは、これらの二つのシステムが TypeScript コードをうまく扱えることを意味しています。

TypeScript のための Svelte コンパイラのサポートは、Christian Kaisermann の svelte-preprocess が担当しており、現在では公式の Svelte プロジェクトとなっています。

エディタレベルについては、Pine 氏による Vueエコシステムの Vetur からインスピレーションを得ました。
Vetur は LSP、VS Code 拡張機能、CLI を提供します。Svelteも現在、LSP、VS Code拡張、CLIを提供しています。

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

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

Simon Holthausen と Lyu, Wei-Da は、JavaScript と TypeScript のイントロスペクションを改善する素晴らしい仕事をしてくれました。
またコードベース内のコンポーネントのPropsを理解する力を強化する @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 })
  ]
}

他の環境のための説明はこちら。

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

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

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

2. エディタサポート

LSPを使用しているエディタであれば、どのようなエディタでも対応可能です。
VS Code 拡張機能は、私たちが最も力を入れてきたものです。
しかし、Atom上では作業が進行中で、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 に追加されましたので、古いバージョンをお使いの場合はアップグレードをお勧めします。

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

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

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