Svelte/Sapperを用いたSveletタイプスクリプトの使用

編集Svelte now officially supports TypeScript
TypeScriptを使用するにはいくつかの手順を取る.svelte ファイル<script lang="typescript">...</script> ブロック.
次の例では、新しいプロジェクトを作成する方法を示しますdefault Sapper template と入力スクリプトをサポートします.もちろん、手順は、テンプレートまたは既存のプロジェクトに基づいていないプロジェクトにも適用できます.

# Clone the repo and install dependencies, see https://sapper.svelte.dev/docs/#Getting_started
npx degit "sveltejs/sapper-template#rollup" sapper-with-ts-sample
npm i

少しテストを行うには、次のを追加しますsrc/routes/index.svelte :

<script lang="typescript">
    export let title: "string = \"Hello TypeScript\";"
    // VS Code will show you an "Unexpected token" error; this is okay at this point
</script>

置換

<title>Sapper project template</title>

with

<title>{title}</title>

インストール

npm i svelte-preprocess typescript --save-dev

新しいファイルを作るsvelte.config.js 次のコンテンツを含むルートフォルダで

// See https://github.com/kaisermann/svelte-preprocess#with-svelte-vs-code
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess({
        // ...svelte-preprocess options (optional)
    }),
    // ...other svelte options (optional)
};

また、設定ファイルtsconfig.json ルートフォルダとコピーアンドペーストで(必要に応じて)

{
    "include": ["src/**/*"],
    "exclude": ["node_modules/*"],
    "compilerOptions": {
        "target": "es2015",
        "module": "es2015",
        "types": ["svelte"]
    }
}

エディットrollup.config.js 3つの挿入を行います.

// ...
import autoPreprocess from "svelte-preprocess"; // add this

export default {
    client: {
        plugins: [
            svelte({
                preprocess: autoPreprocess(), // add this

    // ...

    server: {
        plugins: [
            svelte({
                preprocess: autoPreprocess(), // add this
                // ...
            }),
    // ...

再起動対コード(または使用するIDE).あなたの「予期しないトークン」エラーsrc/routes/index.svelte は消えてしまった.
ラン

npm run dev

訪問http://localhost:3000 あなたのブラウザで.
あなたの価値を変えてくださいtitle 変数src/routes/index.svelte ファイルを保存し、ブラウザでLIVE RELOADをテストします.
多分、あなたはすでにあなたが欲しかったすべてを得ました.あなたの代わりにclient.js/server.js そのタイプスクリプト対応で、次の手順があります.
もう2つの依存関係をインストールします.

npm i rollup-plugin-typescript2 @types/node --save-dev

適応するrollup.config.js (3行挿入)

// ...
import typescript from "rollup-plugin-typescript2"; // add

export default {
    client: {
        input: config.client.input().replace(/\.js$/, ".ts"), // edit here
        output: config.client.output(),
        plugins: [
            // ...
            commonjs(),
            typescript(), // add after commonjs()
    // ...
    server: {
        input: config.server.input().server.replace(/\.js$/, ".ts"), // edit here
        output: config.server.output(),
        plugins: [
            // ...
            commonjs(),
            typescript(), // add after commonjs()
        // ...

エディットtsconfig.json :

...
"types": ["svelte", "node", "@sapper"], // add the last two to the existing types
"typeRoots": ["typings"] // add line
...

新しいディレクトリを作る/typings/@sapper ルートフォルダと@sapper ファイルを作るindex.d.ts . ペースト

declare module '@sapper/app';
declare module '@sapper/server';
declare module '@sapper/service-worker';

最後にファイルのサフィックスを変更するclient.js and server.js に/src フォルダ.js to .ts . それは幸せです.