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

公開:2020/09/23
更新:2020/09/23
3 min読了の目安(約2200字TECH技術記事

はじめに

SvelteがTypeScriptを公式サポートしたことを発表したのでさっそく試してみたいと思います!

VSCodeの拡張機能をインストールする

VSCodeを使って開発している方は、公式の拡張機能をインストールすることでTypeScriptの恩恵をより受けられるのでインストールしましょう!
Svelte for VS Code

新規プロジェクトで作る

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

上記コマンドを実行することですぐにSvelte TypeScriptプロジェクトを開発することができます。

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

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

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を作成

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

実際書いてみる

<script lang="ts">
  export let userName: string
</script>

<header>
  <h1>Hello {userName}</h1>
</header> 
<script lang="ts">
  import Header from './Header.svelte'
</script>

<main>
  <Header userName={42}/> 
  <p>
    Visit the
    <a href="https://svelte.dev/tutorial">Svelte tutorial</a>
    to learn how to build Svelte apps.
  </p>
</main>

型を試す為にuserNameはStringを定義しているのにNumberを渡してみる

vscode-svelte

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

コマンドライン上でチェックする

$ 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={42}/>
  

====================================
svelte-check found 1 error

こちらでもエラーが確認できました!

さいごに

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

では、良いSvelteライフを〜🚩

参考

Svelte <3 TypeScript