外部TypeScriptファイル対応
前回のSvelteファイル内のTypeScript対応に加え外部TypeScriptファイルに記述できるように設定する。
ここまでの作業
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の再起動が必要