Svelte + Sapper + TypeScript (1)

SvelteファイルのTypeScript対応

Sapperテンプレートを使用したSvelteファイル内でTypeScriptを記述できるように設定をする。

Sapperのテンプレートを取得してパッケージをインストール

$ npx degit sveltejs/sapper-template#rollup sapper-typescript
$ cd sapper-typescript
$ yarn
$ yarn dev

TypeScript関連パッケージをインストール

公式に従ってTypeScript関連パッケージをインストール

$ yarn add -D @tsconfig/svelte typescript svelte-preprocess svelte-check

rollup.config.jsを修正

clientとserverのplugins/svelteにpreprocessを追加

./rollup.config.js

...
import autoPreprocess from "svelte-preprocess"; // 追加
...

export default {
  client: {
    ...
    plugins: [
      svelte({
        preprocess: autoPreprocess(), // 追加
        ...
      }),
      ...
    ],
  },
  ...
  server: {
    ...
    plugins: [
      svelte({
        preprocess: autoPreprocess(), // 追加
        ...
      }),
      ...
    ],
  },
...
}

サンプルコード

<script lang="ts">
  let title: string = "TypeScript";
</script
...
<h1>Great success!</h1>
<div>{title}</div>