Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
38
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@oekazuma

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

はじめに

SvelteがTypeScriptを公式サポートしたことを発表したのでさっそく試してみたいと思います!
Svelteって何?って方は僕が以前書いた記事があるので君はVue,Reactの次に来るSvelteを知っているか?を見てから帰ってきてください!

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に設定を追加

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

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

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

実際書いてみる

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

<header>
  <h1>Hello {userName}</h1>
</header> 
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

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


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

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

さいごに

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

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

参考

Svelte <3 TypeScript

38
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
38
Help us understand the problem. What is going on with this article?