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;