Objective: In this article, you will know the dependency injection concept.
Pre-requisite Before completing this article, you should have already installed all pre-requisite tooling including. Visual Studio Code, Node Package Manager (NPM), Node.
Add app.ts file into any folder
Just going to create a very simple application
- Create an export class MainPage then we’ll just create a new instance of MainPage.
export class MainPage {
}
var page = new MainPage();
2. Now want to create a constructor. And in this constructor we’re going to simply get a list of items.
export class MainPage {
constructor(){
var items = ['Apple', 'Mango', 'Miew'];
console.log('[Item shows]' + items );
}
}
var page = new MainPage();
3. Open this in our command prompt and simply run the TypeScript compiler using app.ts.
tsc app.ts
Then create a app.js file into this folder.
4. Run this as a node application, so node app.js.
node app.js
Then showing look like this. Output: [Item shows]Apple,Mango,Miew
5. Create an ItemService class
export class ItemService {
public getItems(): string[]{
return ['Apple', 'Mango', 'Miew']
}
}
6. update MainPage class
export class MainPage {
public items: string[];
constructor(private _itemService: ItemService){
this.items = _itemService.getItems();;
console.log('[Item shows]' + this.items );
}
}
7. TypeScript compile this again
tsc app.ts
8. Run the application again
node app.js
There’s no functional change in application, but we changed the way the application is structured.
Now we want to create our own logger class. We can go in, export class logger, and in here we’ll just create a method called log message.
We know we need our title and we need our message
9. Create a Logger class
export class Logger {
public logMessage(title: string, message: any){
console.log('[' + title + ']' + message);
}
}
10. Update Mainpage class
export class MainPage {
public items: string[];
constructor(private _logger : Logger, private _itemService: ItemService){
this.items = _itemService.getItems();;
_logger.logMessage('Items shows ', this.items)
// console.log('[Item shows] ' + this.items );
}
}
11. TypeScript, compile this again. Run the application again
tsc app.ts then node app.js
So we haven’t changed the functionality application, we just restructured it so it’s a little bit easier to understand what’s our dependencies.
We separated everything out into unit to work. Make it a little bit easier to manage this application but we can still go a step further.
12. We can start implementing interfaces, so we can say implements the ILogger interface here
export interface ILogger {
logMessage(title: string, message: any);
}
Also update Logger class
export class Logger implements ILogger {
public logMessage(title: string, message: any){
console.log('[' + title + ']' + message);
}
}
13. Also we can start implementing interfaces, so we can say implements the IItemService interface here
export interface IItemService {
getItems(): string[]
}
Also update ItemService class
export class ItemService implements IItemService{
public getItems(): string[]{
return ['Apple', 'Mango', 'Miew']
}
}
14. Also update MainPage class
export class MainPage {
public items: string[];
constructor(private _logger : ILogger, private _itemService: IItemService){
this.items = _itemService.getItems();;
_logger.logMessage('Items shows ', this.items)
// console.log('[Item shows] ' + this.items );
}
}
So now we are not directly dependent on these implementations or logger items service, we’re only depending on anything that implements the interface.
15. So again tsc app.ts, node app.js
tsc app.ts then node app.js
Functionality still has not changed.
So if I want to create a new item service, so Apple Mango Miew, I might wanna say, alt item service.
16. We don’t have to change the MainPage class. We don’t have to change the interface. The only difference here is we pass in the alt item service
export class AltItemService implements IItemService{
public getItems(): string[]{
return ['Panda', 'Fox', 'Dog']
}
}
var page = new MainPage( new Logger(), new AltItemService());
So again tsc app.ts, node app.js
tsc app.ts then node app.js
And we see that we have now used a new item service without changing our main page application. So using the dependency injection, we can make our application structure a lot more sophisticated, a lot more easier to use for developers who can understand the different components of our application.