A simple introduction to IOC in Typescript with InversifyJS

If we want to build a large-scale application, it’s efficient to use OOPs concepts because it gives us scalability and a properly well-defined architecture. If we are in a javascript environment, typescript is the best way to go. Though typescript supports OOPs, it does not support IOC ( Inversion of Control ) out of the box, which we need for a good SOLID design.

But there is a good library to implement IOC in our typescript application. In this tutorial, we will learn the basics of InversifyJS and build a simple application to demonstrate the concepts.

Pre-request:

This is tutorial is meant for people who have a good understanding of OOP concepts and Typescript. Below are links that are a good place to start.

OOPS concept with Java – https://www.guru99.com/java-oops-class-objects.html

Typescript tutorial – https://www.typescripttutorial.net

Let’s start coding.

Sample application:

In this section, we will build a simple node application that displays a user’s name and age.

Application setup:

create a folder and type the below commands to initialize both npm and typescript.

npm init -y // to initialise npm

npx tsc --init // to initialise typescript

And now we can install the dependencies.

npm install inversify reflect-metadata --save

Folder structure:

• company.ts: this file contains our code to display the user’s name and age.
• interface.ts: all the interfaces used in our application will be in this file.
• types.ts: the constants that we use in our program will be in this file.
• inversify.config.ts: this file contains mapping configurations, that enable Dependency injection in our application. ( More on this later )
• index.ts: this is the entry file, where we will call the method to display the name and age of a user.

tsconfig.json:

This file should include the following configurations for InversifyJS to work.

interface.ts:

• This file contains two interfaces UserInerface and CompanyInteface.
• UserInerface has getName and getAge methods for getting the name and age of a user(employee) respectively.
• CompanyInteface has getEmployee method, which prints name and age in the console.

types.ts:

This file contains all the constants for our application.

We will map these constants with the classes ( more on this later ).

company.ts:

• Here we have two classes Company and Employee implementation UserInerface and CompanyInteface respectively.
• @injectable() is a decorator, this is a way of telling the compiler that we want to inject this class as a dependency.
• @inject(USER) employee:UserInerface means that we are injecting employee variable of type UserInerface.
• Now, we can use all the methods from UserInerface inside the Company class.

But wait! we did not create an object or any reference to the Employee class from the Company class then how will it call getName and getAge methods from the Employee class?

Well, The magic happens in this line @inject(USER). In the next section, we will connect USER to the Employee class, So that whenever we inject a variable with @inject(USER), the compiler knows to create a reference to the Employee class.

inversely.config.ts:

Here, we bind the USER and COMPANY interface to Employee and Company classes respectively.

Note: Every class that you create should be configured in this file.

index.ts:

• In this file, we get the container object from the inversify.config.ts file.
• container.get(COMPANY) the method will get the company class and resolve all its dependencies(In this case it’s the Employee class).
• Now, we can use the method from the company class company.getEmployee().

Note: reflect-metadata is a dependency of InversifyJS and must be imported once in the root file.

Running the application:

To run the application, type the following commands in the terminal.

npx tsc

The above command will compile the typescript code and create a build folder.

node ./build/index.js

This command will run the file index.js inside the build folder.

Result:

After running the above commands, you should see “John 25” as the output in the terminal.

Conclusion:

Frameworks like Angular and NestJS come out of the box with all OOPS concepts but, if we want a custom solution or want to understand how things work under the hood, InversifyJS is a great library to get your hands dirty.

Happy coding.

Git repo: https://github.com/kishork2120/inversify-tutorial

Check out my tutorial to implement a full-fledged video chat application