Svelte

Svelte | TypeScriptに対応する

Svelte が TypeScript に対応していたようなので、試してみた。

開発環境の更新

TypeScript に対応するために開発環境を更新する。

Docker 開発環境

今までの開発環境作成用の Dockerfile に node scripts/setupTypeScript.js を追加すればいいみたい。

1
2
3
4
5
6
7
8
9
10
11
12
FROM node:15.5.1-alpine3.12

WORKDIR /root/sveltejs

RUN apk update && apk add git \
 && npx degit sveltejs/template helloworld \
 && cd helloworld
COPY ./package.json /root/sveltejs/helloworld/package.json
WORKDIR /root/sveltejs/helloworld
RUN node scripts/setupTypeScript.js && npm install

CMD ["npm", "run", "dev"]

package.json

  • scripts に validate が追加されている
  • TypeScript 関連の依存関係が追加されている
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --host=0.0.0.0",
    "validate": "svelte-check"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "@tsconfig/svelte": "^1.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^1.0.0",
    "svelte-preprocess": "^4.0.0",
    "tslib": "^2.0.0",
    "typescript": "^3.9.3"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

ソースコードの確認

TypeScript に対応したことでソースコードがどのように変更されているかを確認する。

src/App.svelte

  • <script> タグに lang="ts" が追加されている
  • 変数に型宣言が追加されている
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script lang="ts">
        export let name: string;
</script>

<main>
        <h1>Hello {name}!</h1>
        <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
        main {
                text-align: center;
                padding: 1em;
                max-width: 240px;
                margin: 0 auto;
        }

        h1 {
                color: #ff3e00;
                text-transform: uppercase;
                font-size: 4em;
                font-weight: 100;
        }

        @media (min-width: 640px) {
                main {
                        max-width: none;
                }
        }
</style>

src/main.ts

  • ファイルの拡張子が .js から .ts に変更されている
1
2
3
4
5
6
7
8
9
10
import App from './App.svelte';

const app = new App({
        target: document.body,
        props: {
                name: 'world'
        }
});

export default app;