TypeScriptのDI、その壱：InversifyJS

2021年9月9日 • ☕️ 4 min read

.net coreを経験した自分がOOPならDI（dependency injection）を使わなければならない執念があります。TypeScriptは。net coreと同じMicrosoftの出身で、各ライブラリを使って、TypeScriptのDIを体験したいと思います。第1回はまず名前を読むだけでかっこいいと感じるInversifyJSを使ってみようと。

※ DI（dependency inject依存性注入）の説明は割愛します。必要があればwikipediaをご覧ください。

シリーズ一覧

目的

C# .netと同じように、interfaceでconstructorのDIが望ましいです。具体的なやり方と理由は最後のその5で説明します。

InversifyJS

Javascriptのcontainerも考慮しているDI開拓者とも言えるでしょう。https://github.com/inversify/InversifyJS

実装方法

InversifyJSのドキュメントの通り行えば難しくないです。

まずinterfaceと実装部分を定義し、実装部分にdecoratorを使ってDIできるclassを明記します。

ProjectService.ts

Copy

import { injectable } from 'inversify';

export interface IProjectService {
  getProject(id: string): Promise<Project>;
}

@injectable()export default class ProjectService implements IProjectService {
  async getProject(id: string): Promise<Project> {
    console.log(`getProject: ${id}`);
    return new Project(id, `project_name_${id}`);
  }
}

TypeScriptのinterfaceはC#と違って、reflectionでinterfaceからpropertiesなどを取れないため、interfaceでinjectできるように、bindingはtoken形式で行わなければいけません。まずtokenを定義しましょう。

types.ts

Copy

export const TYPES = {
  EmployeeService: Symbol.for('EmployeeService'),
  ProjectService: Symbol.for('ProjectService'),
}

そして、inject先のclassのconstructorにDIします。

簡単にいうと、ここのtoken(TYPES.EmployeeService → Symbol)はキーとして、containerから実装classを特定し、instance化しています。

EmployeeService.ts

Copy

import { inject, injectable } from 'inversify';
import { IProjectService } from './ProjectService';

export interface IEmployeeService {
  getEmployee(id: number): Promise<Employee>;
}

// 他のclassにinjectできるようにProjectServiceと同じように`@injectable()`を追加する
@injectable()export default class EmployeeService implements IEmployeeService {
  public constructor(
    // `@inject(TYPES.ProjectService)`はtoken形式で`IProjectService`の実装classをinjectする
    @inject(TYPES.ProjectService) private _projectService: IProjectService,  ) {}

  async getEmployee(id: number): Promise<Employee> {
    console.log(`getEmployee: ${id}`);

    // inject成功!!使える!!
    const project = await this._projectService.getProject(`proj_id_${id + 1}`);

    return new Employee(
      id,
      `dummy_name_${id}`,
      project,
    );
  }
}

interfaceと実装classのbindingを行います。

ステップ3でinjectしたIProjectServiceはinterfaceで、どの実装classを指しているか指示する必要があります。

inversify.config.js

Copy

import { Container } from 'inversify';
import EmployeeService, { IEmployeeService } from './services/EmployeeService';
import ProjectService, { IProjectService } from './services/ProjectService';

const container = new Container();
// `IEmployeeService`と`EmployeeService`のbindingを行い、`token`(キー)は`TYPES.EmployeeService`となる
container.bind<IEmployeeService>(TYPES.EmployeeService).to(EmployeeService).inSingletonScope();container.bind<IProjectService>(TYPES.ProjectService).to(ProjectService).inSingletonScope();
export { container };

トップclassにinversify.config.jsをimportすれば完了となります。

※結果を確認するためにcontainerからEmployeeServiceととってきています。必須ステップではありません。

app.ts

Copy

// metadataとるためのpolyfill
import 'reflect-metadata';// inversifyのbindingを行う設定をimportする。※. `container`は結果確認するためimportしている。```import './inversify.config';```だけでOK
import { container } from './inversify.config';import { IEmployeeService } from './services/EmployeeService';

const employeeService = container.get<IEmployeeService>(TYPES.EmployeeService);

async function main() {
  const employee = await employeeService.getEmployee(12);
  console.log(JSON.stringify(employee, null, 2));
}

void main();

感想

TypeScriptであっても、interfaceがcompile時消えるし、reflectでinterfaceからpropertyを取ることが現時点できないため、明記的にtokenを定義しなければいけないのがちょっと面倒ですね。同じ理由でnamespace単位のbindingができず、手動で1つづつやらなきゃいけないのもあれなんですね。仕方ない。Javascriptには本物のclassが存在しないからなのです。他のライブラリも同じ問題を抱えています。

ただ、inversifyjsは普通なDIライブラリとして十分使えると思います。

サンプルプロジェクト。

https://github.com/thundermiracle/di-typescript/tree/master/projects/inversifyjs