TypeScript DI

Since it’s been such a long time since I’ve done anything fun, technical or exciting on my personal website, I thought that it would be nice to consider looking at implementing a relatively simplistic IOC solution in TypeScript. I decided to use the more Java oriented approach, whereby I’m using property & class decorators to mark classes that can be injected & so on.

I’d like to clarify that this is by no means perfection. This is just an illustration of how you could implement your own IOC solution where you’re not relying on any third party code, etc. Not to mention, that my solution is so simplistic, it’s almost amusing.

So let’s start with the basics, let’s start by defining some types that we know we’re going to need, for instance, I’ve created a constructor type & a dependency type. By all means, feel free to change the names if you so desire, but you can get an idea of the intention here:

Now that we’ve got the boring stuff out of the way, we can look to implement the container, which is essentially the main bulk of the code base really. But even so, you can see just how simplistic this really is, it’s essentially just exposing a singleton implementation whereby you can get & set dependencies, there’s not much more to it than that.

But the question still remains, granted, we have a simple setup so far, but how do we now go about hooking it all up? How can se create some decorators? Well, thankfully, that’s also relatively simple as it turns out:

This is just a nice little property decorator, so we don’t have to do anything manually ourselves, we can just decorate some property within some class to specify the need to inject the dependency. But now we also need to define some other decorators, how does our container register dependencies at this point in time? – Well, it doesn’t, but with the following decorators, that’ll soon change.

Here we have the injectable decorator where it tells the container that we can setup a given class or implementation for dependency injection. But what about singletons? We like singletons when we need ’em right?

It’s pretty much the exact same code, the only major difference being that we pass in a boolean value to the container set method. That’s pretty much it.

It’s that simple, now we can look at hooking it all up & actually making use of some dependency injection, like so.

Now that we’ve got all of that hooked up, it might be worth including the fact that you may need to tinker with the configuration within the tsconfig.json file, for instance, when writing my own decorators, I like to ensure that I’ve set both the experimental decorators & emit decorator meta data properties to true, just because I can. I have historically found that this has helped.

Granted, I know I’ve been MIA for some time, but I hope that this silly little tutorial has been fun! I hope to get more time back in the coming months, I would like to work more on some personal projects. For instance, I’m very tempted to have a shot at creating my own game engine using three.js, not for any real world application, but purely to tinker, experiment & learn. Maybe I’ll have a shot at creating some back end service, so that it’s capable of multiplayer.