Collaborating with TypeScript, Utilizing Dependency Injection, and Creating Discord Bots

Utilizing types and testable code effectively is crucial for minimizing bugs, particularly as your codebase evolves. In the realm of JavaScript development, we can harness the power of TypeScript and the dependency injection (DI) design pattern to achieve this.

This TypeScript tutorial won’t delve into the fundamentals of TypeScript, except for the compilation aspect. Instead, we’ll focus on practical TypeScript best practices as we guide you through building a Discord bot from the ground up. We’ll integrate tests, implement DI, and craft a sample service. Our toolkit will comprise:

  • Node.js
  • TypeScript
  • Discord.js (a Discord API wrapper)
  • InversifyJS (a dependency injection framework)
  • Testing libraries: Mocha, Chai, and ts-mockito
  • Bonus: Mongoose and MongoDB (for crafting an integration test)

Setting Up Your Node.js Project

Let’s begin by creating a directory named typescript-bot. Navigate into it and initialize a Node.js project using:

1

npm init

Note: While yarn is also an option, we’ll stick with npm for conciseness.

An interactive wizard will guide you through setting up the package.json file. Feel free to press Enter for all prompts (or provide details if desired). Next, we’ll install our project’s dependencies and development dependencies (required solely for testing).

1
2

npm i --save typescript discord.js inversify dotenv @types/node reflect-metadata
npm i --save-dev chai mocha ts-mockito ts-node @types/chai @types/mocha

Now, modify the generated "scripts" section within your package.json to match the following:

1
2
3
4
5

"scripts": {
  "start": "node src/index.js",
  "watch": "tsc -p tsconfig.json -w",
  "test": "mocha -r ts-node/register \"tests/**/*.spec.ts\""
},

Note the double quotes surrounding tests/**/*.spec.ts; these are essential for recursive file searching. (Syntax might differ for Windows users.)

We’ll use the start script to launch our bot, the watch script for TypeScript code compilation, and test to execute our tests.

At this point, your package.json should resemble this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{
  "name": "typescript-bot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@types/node": "^11.9.4",
    "discord.js": "^11.4.2",
    "dotenv": "^6.2.0",
    "inversify": "^5.0.1",
    "reflect-metadata": "^0.1.13",
    "typescript": "^3.3.3"
  },
  "devDependencies": {
    "@types/chai": "^4.1.7",
    "@types/mocha": "^5.2.6",
    "chai": "^4.2.0",
    "mocha": "^5.2.0",
    "ts-mockito": "^2.3.1",
    "ts-node": "^8.0.3"
  },
  "scripts": {
    "start": "node src/index.js",
    "watch": "tsc -p tsconfig.json -w",
    "test": "mocha -r ts-node/register \"tests/**/*.spec.ts\""
  },
  "author": "",
  "license": "ISC"
}

Creating a New Application in the Discord Apps Dashboard

Interacting with the Discord API necessitates a token. To obtain one, we’ll register an app on the Discord Developer Dashboard. Create a Discord account if you haven’t already and navigate to https://discordapp.com/developers/applications/. Click the New Application button:

Discord's "New Application" button.

Assign a name to your application and click Create. Proceed to Bot → Add Bot to finalize this step. Before moving on, let’s add the bot to a server, but keep this page open—we’ll need to copy a token shortly.

Add Your Discord Bot to Your Server

Testing our bot requires a Discord server. Use an existing one or create a new one. Locate your bot’s CLIENT_ID (on the General Information tab) and incorporate it into this special authorization URL:

https://discordapp.com/oauth2/authorize?client_id=<CLIENT_ID>&scope=bot

Opening this URL in your browser will present a form where you can select the server to add your bot to.

Standard Discord welcome message in response to our bot joining the server.

Upon adding the bot, you should see a confirmation message similar to the one above.

Creating the .env File

We’ll use the dotenv package to securely store our token. Retrieve the token from the Discord Application Dashboard (Bot → Click to Reveal Token):

The "Click to Reveal Token" link in Discord's Bot section.

Create a .env file and paste your token into it:

1

TOKEN=paste.the.token.here

For Git users, add this file to your .gitignore to prevent token exposure. Additionally, create a .env.example file to indicate that TOKEN requires definition:

1

TOKEN=

Compiling TypeScript

Compile your TypeScript code using the npm run watch command. Alternatively, if you’re using an IDE like PHPStorm, leverage its file watcher (via its TypeScript plugin) for automatic compilation. Let’s test our setup by creating src/index.ts with the following content:

1

console.log('Hello')

Also, create a tsconfig.json file as shown below. InversifyJS relies on experimentalDecorators, emitDecoratorMetadata, es6, and reflect-metadata:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es2016",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "types": [
      // add node as an option
      "node",
      "reflect-metadata"
    ],
    "typeRoots": [
      // add path to @types
      "node_modules/@types"
    ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "resolveJsonModule": true
  },
  "exclude": [
    "node_modules"
  ]
}

A functioning file watcher should generate src/index.js, and executing npm start should yield:

1
2

> node src/index.js
Hello

Creating a Bot Class

Time to leverage TypeScript’s type system. Create src/bot.ts with the following code:

1
2
3
4
5
6
7
8

import {Client, Message} from "discord.js";
export class Bot {
  public listen(): Promise<string> {
    let client = new Client();
    client.on('message', (message: Message) => {});
    return client.login('token should be here');
  }
}

We need a token! Should we hardcode it or fetch it directly from the environment?

Neither. Instead, let’s prioritize maintainability, extensibility, and testability. We’ll inject the token using our chosen DI framework, InversifyJS. Additionally, notice the hardcoded Client dependency—we’ll inject this as well.

Configuring the Dependency Injection Container

A dependency injection container acts as a registry for object instantiation logic. We define dependencies for our classes, and the DI container handles their resolution.

Following InversifyJS’s recommendation, let’s create inversify.config.ts and add our container:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import "reflect-metadata";
import {Container} from "inversify";
import {TYPES} from "./types";
import {Bot} from "./bot";
import {Client} from "discord.js";

let container = new Container();

container.bind<Bot>(TYPES.Bot).to(Bot).inSingletonScope();
container.bind<Client>(TYPES.Client).toConstantValue(new Client());
container.bind<string>(TYPES.Token).toConstantValue(process.env.TOKEN);

export default container;

Furthermore, the InversifyJS docs recommend by creating a types.ts file. Within this file, we’ll enumerate each type we intend to use alongside its associated Symbol. While this might seem cumbersome, it ensures we avoid naming collisions as our application scales. Each Symbol acts as a unique identifier, even if their description parameters match (these parameters serve debugging purposes).

1
2
3
4
5

export const TYPES = {
  Bot: Symbol("Bot"),
  Client: Symbol("Client"),
  Token: Symbol("Token"),
};

Without Symbols, consider what happens during a naming conflict:

1
2
3
4

Error: Ambiguous match found for serviceIdentifier: MessageResponder
Registered bindings:
 MessageResponder
 MessageResponder

Resolving which MessageResponder to use becomes notably more challenging, especially as our DI container expands. Symbols elegantly address this concern, eliminating the need for contrived string literals when dealing with identically named classes.

Using the Container in the Discord Bot App

Let’s modify our Bot class to leverage the container. This involves incorporating @injectable and @inject() annotations. Here’s the updated Bot class:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import {Client, Message} from "discord.js";
import {inject, injectable} from "inversify";
import {TYPES} from "./types";
import {MessageResponder} from "./services/message-responder";

@injectable()
export class Bot {
  private client: Client;
  private readonly token: string;

  constructor(
    @inject(TYPES.Client) client: Client,
    @inject(TYPES.Token) token: string
  ) {
    this.client = client;
    this.token = token;
  }

  public listen(): Promise < string > {
    this.client.on('message', (message: Message) => {
      console.log("Message received! Contents: ", message.content);
    });

    return this.client.login(this.token);
  }
}

Finally, let’s instantiate our bot within index.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

require('dotenv').config(); // Recommended way of loading dotenv
import container from "./inversify.config";
import {TYPES} from "./types";
import {Bot} from "./bot";
let bot = container.get<Bot>(TYPES.Bot);
bot.listen().then(() => {
  console.log('Logged in!')
}).catch((error) => {
  console.log('Oh no! ', error)
});

Start your bot and ensure it’s added to your server. Typing a message in the server channel should now log the message content to your console:

1
2
3
4

> node src/index.js

Logged in!
Message received! Contents:  Test

With that, we have our foundation: TypeScript types and a dependency injection container powering our bot.

Implementing Business Logic

Let’s focus on the core of this article: crafting a testable codebase. In essence, our code should adhere to best practices (like SOLID), avoid dependency hiding and static methods, refrain from introducing side effects during execution, and be easily mockable.

For simplicity, our bot will have a single purpose: scanning incoming messages for the word “ping.” Upon detection, it will respond with “pong!” using a Discord bot command.

To illustrate custom object injection into the Bot object and facilitate unit testing, we’ll create two classes: PingFinder and MessageResponder. MessageResponder will be injected into the Bot class, and PingFinder into MessageResponder.

Here’s the code for src/services/ping-finder.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import {injectable} from "inversify";

@injectable()
export class PingFinder {

  private regexp = 'ping';

  public isPing(stringToSearch: string): boolean {
    return stringToSearch.search(this.regexp) >= 0;
  }
}

Next, we’ll inject this class into src/services/message-responder.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import {Message} from "discord.js";
import {PingFinder} from "./ping-finder";
import {inject, injectable} from "inversify";
import {TYPES} from "../types";

@injectable()
export class MessageResponder {
  private pingFinder: PingFinder;

  constructor(
    @inject(TYPES.PingFinder) pingFinder: PingFinder
  ) {
    this.pingFinder = pingFinder;
  }

  handle(message: Message): Promise<Message | Message[]> {
    if (this.pingFinder.isPing(message.content)) {
      return message.reply('pong!');
    }

    return Promise.reject();
  }
}

Lastly, let’s modify our Bot class to utilize the MessageResponder class:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import {Client, Message} from "discord.js";
import {inject, injectable} from "inversify";
import {TYPES} from "./types";
import {MessageResponder} from "./services/message-responder";

@injectable()
export class Bot {
  private client: Client;
  private readonly token: string;
  private messageResponder: MessageResponder;

  constructor(
    @inject(TYPES.Client) client: Client,
    @inject(TYPES.Token) token: string,
    @inject(TYPES.MessageResponder) messageResponder: MessageResponder) {
    this.client = client;
    this.token = token;
    this.messageResponder = messageResponder;
  }

  public listen(): Promise<string> {
    this.client.on('message', (message: Message) => {
      if (message.author.bot) {
        console.log('Ignoring bot message!')
        return;
      }

      console.log("Message received! Contents: ", message.content);

      this.messageResponder.handle(message).then(() => {
        console.log("Response sent!");
      }).catch(() => {
        console.log("Response not sent.")
      })
    });

    return this.client.login(this.token);
  }
}

In its current state, the application won’t run due to missing definitions for MessageResponder and PingFinder. Add the following to inversify.config.ts:

1
2

container.bind<MessageResponder>(TYPES.MessageResponder).to(MessageResponder).inSingletonScope();
container.bind<PingFinder>(TYPES.PingFinder).to(PingFinder).inSingletonScope();

Also, include the corresponding type symbols in types.ts:

1
2

MessageResponder: Symbol("MessageResponder"),
PingFinder: Symbol("PingFinder"),

After restarting, your bot should now respond to messages containing “ping”:

The bot responding to a message containing the word "ping."

Here’s how it appears in the logs:

1
2
3
4
5
6
7
8

> node src/index.js

Logged in!
Message received! Contents:  some message
Response not sent.
Message received! Contents:  message with ping
Ignoring bot message!
Response sent!

Creating Unit Tests

With our dependencies properly injected, writing unit tests becomes straightforward. We’ll use Chai and ts-mockito; however, numerous other test runners and mocking libraries are available.

While ts-mockito’s mocking syntax might seem verbose, it’s also highly readable. Let’s set up the MessageResponder service and inject the mocked PingFinder:

1
2
3
4

let mockedPingFinderClass = mock(PingFinder);
let mockedPingFinderInstance = instance(mockedPingFinderClass);

let service = new MessageResponder(mockedPingFinderInstance);

With our mocks in place, we can define the expected outcome of isPing() calls and verify calls to reply(). The key is that we control the result of isPing() (true or false) within our unit tests. The actual message content becomes irrelevant, so we simply use "Non-empty string".

1
2
3

when(mockedPingFinderClass.isPing("Non-empty string")).thenReturn(true);
await service.handle(mockedMessageInstance)
verify(mockedMessageClass.reply('pong!')).once();

Here’s an example of how our test suite could be structured:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import "reflect-metadata";
import 'mocha';
import {expect} from 'chai';
import {PingFinder} from "../../../src/services/ping-finder";
import {MessageResponder} from "../../../src/services/message-responder";
import {instance, mock, verify, when} from "ts-mockito";
import {Message} from "discord.js";

describe('MessageResponder', () => {
  let mockedPingFinderClass: PingFinder;
  let mockedPingFinderInstance: PingFinder;
  let mockedMessageClass: Message;
  let mockedMessageInstance: Message;

  let service: MessageResponder;

  beforeEach(() => {
    mockedPingFinderClass = mock(PingFinder);
    mockedPingFinderInstance = instance(mockedPingFinderClass);
    mockedMessageClass = mock(Message);
    mockedMessageInstance = instance(mockedMessageClass);
    setMessageContents();

    service = new MessageResponder(mockedPingFinderInstance);
  })

  it('should reply', async () => {
    whenIsPingThenReturn(true);

    await service.handle(mockedMessageInstance);

    verify(mockedMessageClass.reply('pong!')).once();
  })

  it('should not reply', async () => {
    whenIsPingThenReturn(false);

    await service.handle(mockedMessageInstance).then(() => {
      // Successful promise is unexpected, so we fail the test
      expect.fail('Unexpected promise');
    }).catch(() => {
	 // Rejected promise is expected, so nothing happens here
    });

    verify(mockedMessageClass.reply('pong!')).never();
  })

  function setMessageContents() {
    mockedMessageInstance.content = "Non-empty string";
  }

  function whenIsPingThenReturn(result: boolean) {
    when(mockedPingFinderClass.isPing("Non-empty string")).thenReturn(result);
  }
});

Tests for PingFinder are trivial since there are no dependencies to mock. Here’s a sample test case:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

describe('PingFinder', () => {
  let service: PingFinder;
  beforeEach(() => {
    service = new PingFinder();
  })

  it('should find "ping" in the string', () => {
    expect(service.isPing("ping")).to.be.true
  })
});

Creating Integration Tests

Besides unit tests, we can write integration tests. The primary difference lies in using real dependencies instead of mocks. However, certain dependencies, like external API connections, shouldn’t be part of integration tests. In these cases, we can create mocks and rebind them within our container, ensuring the mock is injected instead. Here’s an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import container from "../../inversify.config";
import {TYPES} from "../../src/types";
// ...

describe('Bot', () => {
  let discordMock: Client;
  let discordInstance: Client;
  let bot: Bot;

  beforeEach(() => {
    discordMock = mock(Client);
    discordInstance = instance(discordMock);
    container.rebind<Client>(TYPES.Client)
      .toConstantValue(discordInstance);
    bot = container.get<Bot>(TYPES.Bot);
  });

  // Test cases here

});

This concludes our Discord bot tutorial. You’ve successfully built a clean and well-structured application, embracing TypeScript and DI from the outset! This TypeScript dependency injection pattern can be applied to any project you undertake.

TypeScript and Dependency Injection: Not Just for Discord Bot Development

Whether you’re working on front-end or back-end code, incorporating the object-oriented paradigms of TypeScript into your JavaScript projects is immensely beneficial. Types alone help prevent numerous bugs. Combining TypeScript with dependency injection further encourages object-oriented best practices within JavaScript-based development.

While language limitations might make it less seamless than in statically typed languages, one thing’s certain: TypeScript, unit tests, and dependency injection empower you to write more readable, loosely coupled, and maintainable code—regardless of the application you’re building.

Licensed under CC BY-NC-SA 4.0