{"id":7516,"date":"2019-11-03T20:56:22","date_gmt":"2019-11-03T20:56:22","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7516"},"modified":"2019-11-03T20:56:22","modified_gmt":"2019-11-03T20:56:22","slug":"inversify","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/inversify\/","title":{"rendered":"inversify"},"content":{"rendered":"

I wanted to use an IoC pattern\/library in a project I was working on (a node server application where I would slot in the specific implementations of the data and services at runtime).<\/p>\n

I cam across inversify, there may be other IoC’s for TypeScript, but this is the one I looked into and worked a treat for me.<\/p>\n

\r\nyarn add inversify reflect-metadata\r\n<\/pre>\n
You will need to enable experimentalDecorators<\/em> and emitDecoratorMetadata<\/em> within the tsconfig.json file.<\/p>\n
\r\n"experimentalDecorators": true,        \r\n"emitDecoratorMetadata": true, \r\n<\/pre>\n
as per the invertsify documentation, we should also have the following tsconfig.json properties set<\/p>\n
\r\n"target": "es5",\r\n"lib": ["es6"],\r\n"types": ["reflect-metadata"],\r\n"module": "commonjs",\r\n"moduleResolution": "node",\r\n<\/pre>\n
As is usual in C# (at least), the best way to work with IoC is to define an interface for our abstraction and then an implementation. However for inverisfy we also define a Symbol for the interfaces. So let’s assume we’re going to have a Service<\/em> interface along with RestService<\/em> and WebsocketService<\/em>.<\/p>\n
First create your Service.ts file and here’s a simple example<\/p>\n
\r\ninterface Service {\r\n  call(data: string): void;\r\n};\r\n\r\nexport default Service;\r\n<\/pre>\n
Now let’s create a couple of implementations, RestService.ts<\/p>\n
\r\nimport "reflect-metadata";\r\nimport Service from ".\/Service";\r\nimport { injectable } from "inversify";\r\n\r\n@injectable()\r\nclass RestService implements Service {\r\n  call(data: string): void {\r\n    console.log("RestService called");\r\n  }\r\n}\r\n\r\nexport default RestService;\r\n<\/pre>\n
As you can see, we decorate the class with @injectable as this class may be injected into another class.<\/p>\n
Here’s our WebsocketService.ts<\/p>\n
\r\nimport "reflect-metadata";\r\nimport Service from ".\/Service";\r\nimport { injectable } from "inversify";\r\n\r\n@injectable()\r\nclass WebsocketService implements Service {\r\n  call(data: string): void {\r\n    console.log("WebsocketService called");\r\n  }\r\n}\r\n\r\nexport default WebsocketService;\r\n<\/pre>\n
Within the types.ts (below) we create the symbols (keys\/identifiers) for use with our types.<\/p>\n
\r\nconst Types = {\r\n  Service: Symbol.for("Service"),\r\n  Application: Symbol.for("Application")\r\n};\r\n\r\nexport default Types;\r\n<\/pre>\n
Here’s an Application interface Application.ts<\/p>\n
\r\ninterface Application {   \r\n  run(): void;\r\n}\r\n\r\nexport default Application;\r\n<\/pre>\n
MyApplication.ts<\/p>\n
\r\nimport "reflect-metadata";\r\nimport { inject, injectable } from "inversify";\r\nimport Application from ".\/Application";\r\nimport Types from ".\/types";\r\nimport Service from ".\/Service";\r\n\r\n@injectable()\r\nclass MyApplication implements Application {\r\n  private readonly service: Service;\r\n\r\n  constructor(@inject(Types.Service) service) {\r\n    this.service = service;\r\n  }\r\n\r\n  run(): void {        \r\n    this.service.call("");\r\n  }\r\n}\r\n\r\nexport default MyApplication; \r\n<\/pre>\n
In the above you can see we’re injecting (via the @inject decorator on the constructor) a type of symbol type Service<\/em>. Hence this is where the server implementation will be injected into.<\/p>\n
To supply inversify with the implementations for various types, we create the file inversify.config.ts<\/em>. In the example file below we bind the symbol type\/identifier with an implementation. <\/p>\n
\r\nimport { Container } from "inversify";\r\nimport Service from ".\/Service";\r\nimport RestService from ".\/RestService";\r\nimport Types from ".\/types";\r\nimport WebsocketService from ".\/WebsocketService";\r\nimport Application from ".\/Application";\r\nimport MyApplication from ".\/MyApplication";\r\n\r\nconst container = new Container();\r\n\r\n\/\/container.bind<Service>(Types.Service).to(RestService);\r\ncontainer.bind<Service>(Types.Service).to(WebsocketService);\r\ncontainer.bind<Application>(Types.Application).to(MyApplication);\r\n\r\nexport default container;\r\n<\/pre>\n
Finally, here’s an example implementation of the index.ts<\/p>\n
\r\nimport container from ".\/inversify.config";\r\nimport Application from ".\/Application";\r\nimport Types from ".\/types";\r\n\r\nconst application = container.get<Application>(Types.Application);\r\napplication.run();\r\n<\/pre>\n
There’s more to inversify than just the code listed above, such as you can have multiple Service implementations and use named bindings to receive the one you want and more.<\/p>\n","protected":false},"excerpt":{"rendered":"
I wanted to use an IoC pattern\/library in a project I was working on (a node server application where I would slot in the specific implementations of the data and services at runtime). I cam across inversify, there may be other IoC’s for TypeScript, but this is the one I looked into and worked a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[270,219,46],"tags":[],"class_list":["post-7516","post","type-post","status-publish","format-standard","hentry","category-inversify","category-ioc-2","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7516"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7516\/revisions"}],"predecessor-version":[{"id":7597,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7516\/revisions\/7597"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}