SvelteKit + tsyringeでDIをやってみた

手順

SvelteKitのプロジェクトがある前提で進めていきます。

SvelteKit

tsyringe

インストール

tsyringeとreflect-metadataをインストールします。
下記コマンドで入ります。

npm install --save tsyringe reflect-metadata

configの設定

tsconfig.jsonに下記2行を追加してあげます。

{
	// ...
	"compilerOptions": {
        "experimentalDecorators": true,
		"emitDecoratorMetadata": true,
		// ...
	}
}

構成

関係ないファイルは省いて、src配下をこのような構成で進めます。

src
├── lib
│   ├── fuga.ts
│   └── hoge.ts
└── routes
    ├── +page.svelte
    └── +page.ts

Inject対象のクラス

HogeのコンストラクタでFugaをInjectしています。

src/lib/hoge.ts

import { inject, injectable } from "tsyringe";
import type { IFuga } from "./fuga";

@injectable()
export default class Hoge {
    constructor(
        @inject('Fuga') readonly fuga: IFuga
    ) {}

    execute(): void {
        this.fuga.showMessage();
    }
}

src/lib/fuga.ts

import { injectable } from "tsyringe";

export interface IFuga {
    showMessage(): void
}

@injectable()
export default class Fuga implements IFuga {
    showMessage(): void {
        console.log('Hello, Fuga!');
    }
}

containerへの登録

+page.tsの中でcontainerへの登録を行います。
ここでreflect-metadataのimportも行う点に注意。

src/routes/+page.ts

import 'reflect-metadata';
import Fuga from '$lib/fuga';
import { container } from "tsyringe";
import Hoge from "../lib/hoge";

container.register('Hoge', { useClass: Hoge });
container.register('Fuga', { useClass: Fuga });

利用してみる

registerをした名前でresolveを行うことで依存解決をしたHogeのインスタンスにアクセスしている。

src/routes/+page.svelte

<script lang='ts'>
    import { container } from "tsyringe";
    import Hoge from "../lib/hoge";
  
    const hoge: Hoge = container.resolve<Hoge>('Hoge');

    function handleButtonClick() {
        hoge.execute();
    }
</script>
  
<button on:click={handleButtonClick}>Hello!</button>

実行結果