SvelteがTypeScriptを公式サポートしたので試してみる！

# はじめに
SvelteがTypeScriptを公式サポートしたことを発表したのでさっそく試してみたいと思います！
Svelteって何？って方は僕が以前書いた記事があるので[君はVue,Reactの次に来るSvelteを知っているか？](https://qiita.com/oekazuma/items/d3d97f78466be983b19f)を見てから帰ってきてください！

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">ok, we&#39;ve kept you in suspense long enough. we are absolutely cock-a-hoop to announce that Svelte now officially supports...<br><br>🎉🎉🎉 TYPESCRIPT!!! 🎉🎉🎉<a href="https://t.co/Ze8hnp0Qgi">https://t.co/Ze8hnp0Qgi</a><br><br>amazing, amazing work by <a href="https://twitter.com/orta?ref_src=twsrc%5Etfw">@orta</a>, dummdidumm, jasonlyu123, <a href="https://twitter.com/UnwrittenFun?ref_src=twsrc%5Etfw">@UnwrittenFun</a>, <a href="https://twitter.com/halfnelson_au?ref_src=twsrc%5Etfw">@halfnelson_au</a> and <a href="https://twitter.com/octref?ref_src=twsrc%5Etfw">@octref</a></p>&mdash; Svelte (@sveltejs) <a href="https://twitter.com/sveltejs/status/1285627864310743043?ref_src=twsrc%5Etfw">July 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# VSCodeの拡張機能をインストールする
VSCodeを使って開発している方は、公式の拡張機能をインストールすることでTypeScriptの恩恵をより受けられるのでインストールしましょう！
[Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
# 新規プロジェクトで作る

```shell
npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js
```
上記コマンドを実行することですぐにSvelte TypeScriptプロジェクトを開発することができます。

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

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

rollup.config.jsに設定を追加

```js:rollup.config.js
+ import autoPreprocess from 'svelte-preprocess';
+ import typescript from '@rollup/plugin-typescript';

export default {
  ...,
  plugins: [
    svelte({
+       preprocess: autoPreprocess()
    }),
+   typescript({ sourceMap: !production })
  ]
}
```

プロジェクトのルートにtsconfig.jsonを作成

```json:tsconfig.json
{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*", "src/node_modules"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}
```

# 実際書いてみる

```html:Header.svelte
<script lang="ts">
  export let userName: string
</script>

<header>
  <h1>Hello {userName}</h1>
</header> 
```

```html:App.svelte
<script lang="ts">
  import Header from './Header.svelte'
</script>

<main>
  <Header userName={24}/> 
  <p>
    Visit the
    <a href="https://svelte.dev/tutorial">Svelte tutorial</a>
    to learn how to build Svelte apps.
  </p>
</main>
```
型を試す為にuserNameはStringを定義しているのにNumberを渡してみる

![スクリーンショット 2020-07-22 14.22.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/f30f82a5-7f1d-049c-62b9-e718ad076955.png)

VSCode上でエラーが確認できました！

# コマンドライン上でチェックする
```shell
$ npx svelte-check

Loading svelte-check in workspace: svelte-typescript-app
Getting Svelte diagnostics...
====================================

svelte-typescript-app/src/App.svelte:6:11
Error: Type 'number' is not assignable to type 'string'. (ts)
  <Header userName={24}/>
  

====================================
svelte-check found 1 error
```
こちらでもエラーが確認できました！

# さいごに
TypeScriptが公式サポートしたのは嬉しいですね！
Svelte使ってみたいけどTypeScriptで書きたいと思っていた方々は使い始めるきっかけになるんじゃないかなと思います！

では、良いSvelteライフを〜:triangular_flag_on_post:

## 参考
[Svelte <3 TypeScript](https://svelte.dev/blog/svelte-and-typescript)