Svelte + Sapper + TypeScript (2)

外部TypeScriptファイル対応

前回のSvelteファイル内のTypeScript対応に加え外部TypeScriptファイルに記述できるように設定する。

ここまでの作業

www.axon.jp

TypeScript環境のパッケージをインストール

$ yarn add -D @rollup/plugin-typescript

ルートにtsconfig.jsonを作成

./tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*","src/node_modules"],
  "exclude": ["node_modules/*","__sapper__/*","public/*"],  
  "compilerOptions": {
    "types": ["svelte", "node", "@sapper"],
    "typeRoots": ["typings"],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true
  }
}

rollup.config.jsを修正

./rollup.config.js clientとserverのplugins/svelteの後にtypescriptを追加

...
import typescript from '@rollup/plugin-typescript'; // 追加
...
const production = mode === "production"; // 追加
...
export default {
  client: {
    ...
    plugins: [
      svelte({
        ...
      }),
      typescript({sourceMap: !production}), // 追加
      ...
    ],
  },
  ...
  server: {
    ...
    plugins: [
      svelte({
        ...
      }),
      typescript({sourceMap: !production}), // 追加
      ...
    ],
  },
}

typingsにsapperを追加

$ mkdir -p typings/@sapper

typings/@sapper/index.d.ts

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

client.js,server.jsファイルをtsファイルに変更

拡張子をjsからtsに変更

$ mv src/client.js src/client.ts
$ mv src/server.js src/server.ts

rollup.config.jsを編集

  client: {
    // input: config.client.input(),
    input: config.client.input().replace(/\.js$/, '.ts'), // 編集
  ...
  },
  server: {
    // input: config.server.input(),
    input: config.server.input().server.replace(/\.js$/, '.ts'), // 編集
  ...
  },

server.ts内で必要な定義をインストール

$ yarn add @types/polka @types/compression

server.tsのエラーを修正

src/server.ts

  // .listen(PORT, err => {
  .listen(PORT, (err: any) => {

サンプルコード

src/models/common.tsを作成

export const title:string = "TypeScript File";

src/routes/index.svelteを編集

<script lang="ts">
  import {title} from '../models/common';
</script
...
<h1>Great success!</h1>
<div>{title}</div>

注意：tsファイル新規作成時はnodeの再起動が必要