Building a Discord Bot with TypeScript: A Step-by-Step Template

7 min read 23-10-2024

Building a Discord Bot with TypeScript: A Step-by-Step Template

Building a Discord bot can be a thrilling project, especially for those who enjoy programming and wish to enhance their coding skills. One of the most popular programming languages for creating Discord bots is TypeScript, a superset of JavaScript that adds strong typing and other features, making it easier to manage larger projects. In this comprehensive guide, we will walk you through the process of building a Discord bot using TypeScript, ensuring you have all the tools and knowledge you need to create an effective and efficient bot.

Understanding Discord Bots and TypeScript

Before diving into the coding aspects, it's essential to understand what Discord bots are and why TypeScript is a favorable choice for this task.

What is a Discord Bot?

A Discord bot is a tool that can automate tasks on a Discord server. These bots can perform various functions such as moderating chats, playing music, sending notifications, and even managing server administration. They help enhance user experience, making communities more engaging and interactive.

Why Choose TypeScript?

TypeScript offers several advantages that make it an ideal choice for building Discord bots:

Strong Typing: TypeScript's static type system helps catch errors at compile-time, reducing runtime errors. This feature is particularly beneficial for larger applications, such as Discord bots that may evolve over time.
Improved Readability: With explicit types and interfaces, TypeScript code tends to be more readable and maintainable compared to vanilla JavaScript.
Modern Features: TypeScript supports the latest JavaScript features, enabling developers to use async/await, destructuring, and other modern syntactic sugar without compatibility issues.

Prerequisites

Before we begin, make sure you have:

Node.js installed on your machine (preferably version 14 or above).
A basic understanding of JavaScript and TypeScript.
A Discord account to create your bot.

Setting Up Your Development Environment

Step 1: Creating a New Discord Application

Visit the Discord Developer Portal: Go to the Discord Developer Portal.
Create a New Application: Click on "New Application," give your app a name, and click "Create."
Create a Bot: Navigate to the "Bot" tab on the left sidebar and click "Add Bot." Confirm that you want to create the bot.

Step 2: Get Your Bot Token

After creating your bot, you will see a section called "Token." Click on "Copy" to save your bot token securely. This token is essential as it will allow you to authenticate your bot with Discord.

Step 3: Setting Up Your Project Directory

Create a New Directory: Open your terminal and create a new directory for your bot:
```
mkdir discord-bot
cd discord-bot
```
Initialize a New Node.js Project: Use the following command to create a package.json file:
```
npm init -y
```
Install TypeScript and Discord.js: Run the following command to install TypeScript and the Discord.js library:
```
npm install typescript discord.js @types/node
```

Step 4: Setting Up TypeScript

Initialize TypeScript: Create a tsconfig.json file:
```
npx tsc --init
```

Modify the tsconfig.json: Ensure your tsconfig.json contains the following settings to properly support Node.js and ES modules:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Step 5: Creating Your Bot File

Create a src Folder: In your project directory, create a new folder named src. This folder will contain all your TypeScript code.
Create a Main File: Create a new file named index.ts inside the src folder:
```
mkdir src
touch src/index.ts
```

Building Your First Bot

Step 6: Setting Up Your Bot Code

In your index.ts file, add the following code to create a simple bot that responds to commands:

import { Client, GatewayIntentBits } from 'discord.js';

const client = new Client({
    intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.MessageContent],
});

const TOKEN = 'YOUR_BOT_TOKEN';

client.once('ready', () => {
    console.log(`Logged in as ${client.user?.tag}`);
});

client.on('messageCreate', (message) => {
    if (message.content.startsWith('!hello')) {
        message.channel.send('Hello there!');
    }
});

client.login(TOKEN);

Step 7: Replace Your Bot Token

In the above code, replace YOUR_BOT_TOKEN with the token you copied from the Discord Developer Portal.

Step 8: Compiling and Running Your Bot

Compile TypeScript to JavaScript: In your terminal, run:
```
npx tsc
```
Run Your Bot: Execute the compiled JavaScript code with Node.js:
```
node dist/index.js
```

If everything is set up correctly, your bot should log in to Discord, and you’ll see a message like "Logged in as YourBotName#1234" in your terminal. You can now invite your bot to a Discord server and test it out by sending the command !hello in a text channel.

Enhancing Your Bot with More Features

Now that we have the foundation of our Discord bot, let’s explore how to add more features and functionalities.

Step 9: Command Handling

Managing commands is crucial for building a scalable bot. Instead of having all command logic in a single event, we can set up a command handler.

Create a Commands Directory: Inside your src folder, create another folder named commands.
```
mkdir src/commands
```
Create a Command File: Create a file named hello.ts inside the commands folder:
```
touch src/commands/hello.ts
```

Add Command Logic: In hello.ts, add the following code:

import { CommandInteraction } from 'discord.js';

export const data = {
    name: 'hello',
    description: 'Replies with Hello!',
};

export async function execute(interaction: CommandInteraction) {
    await interaction.reply('Hello there!');
}

Modify the Command Handler: In index.ts, update the code to handle commands dynamically:

import { Client, GatewayIntentBits, Events } from 'discord.js';
import { data as helloCommand, execute as executeHello } from './commands/hello';

const client = new Client({
    intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages, GatewayIntentBits.MessageContent],
});

const TOKEN = 'YOUR_BOT_TOKEN';

const commands = [helloCommand];

client.on(Events.InteractionCreate, async (interaction) => {
    if (!interaction.isCommand()) return;

    const command = commands.find(cmd => cmd.name === interaction.commandName);
    if (command) {
        await command.execute(interaction);
    }
});

client.login(TOKEN);

Step 10: Adding More Commands

You can extend your bot by adding more command files in the commands folder, each following a similar structure. Remember to register them in the commands array within your index.ts.

Using Discord's Slash Commands

In addition to message-based commands, Discord also supports slash commands. These commands provide a user-friendly way for users to interact with your bot.

Step 11: Registering Slash Commands

Set Up Command Registration: Create a new file named deploy-commands.ts in the src folder:
```
touch src/deploy-commands.ts
```

Add Command Registration Logic: Populate deploy-commands.ts with the following code:

import { REST } from 'discord.js';
import { Routes } from 'discord-api-types/v9';
import { data as helloCommand } from './commands/hello';

const TOKEN = 'YOUR_BOT_TOKEN';
const GUILD_ID = 'YOUR_GUILD_ID'; // Replace with your server's ID
const clientId = 'YOUR_CLIENT_ID'; // Replace with your bot's client ID

const commands = [helloCommand];

const rest = new REST({ version: '9' }).setToken(TOKEN);

(async () => {
    try {
        console.log('Started refreshing application (/) commands.');

        await rest.put(Routes.applicationGuildCommands(clientId, GUILD_ID), {
            body: commands,
        });

        console.log('Successfully reloaded application (/) commands.');
    } catch (error) {
        console.error(error);
    }
})();

Run the Command Registration: Execute the command registration script:
```
npx ts-node src/deploy-commands.ts
```

Now, when you invite your bot to your server, it will have access to the slash command /hello.

Utilizing Event Handlers

Discord bots can respond to various events, such as message creation, reactions, or even user joins. Creating dedicated event handlers can help organize your code.

Step 12: Creating Event Handlers

Create an Events Directory: Inside the src folder, create a folder named events:
```
mkdir src/events
```
Create an Event File: Create a file named messageCreate.ts inside the events folder:
```
touch src/events/messageCreate.ts
```

Add Event Logic: Populate messageCreate.ts with:

import { Events, Message } from 'discord.js';

export const name = Events.MessageCreate;

export async function execute(message: Message) {
    if (message.content === '!ping') {
        await message.channel.send('Pong!');
    }
}

Register the Event in index.ts: In index.ts, update your event registration:

import { Client, GatewayIntentBits, Events } from 'discord.js';
import { execute as executeMessageCreate } from './events/messageCreate';

client.on(Events.MessageCreate, executeMessageCreate);

Conclusion

Building a Discord bot with TypeScript is not only a valuable learning experience but also a way to create tools that enhance your community’s interaction and engagement. Throughout this guide, we walked through the essentials, from setting up a development environment to creating commands and event handlers.

As we built our bot, we utilized TypeScript's strengths to create a more robust and maintainable codebase. By following this step-by-step template, you can expand your bot's capabilities and customize it according to your needs.

Next Steps

Now that you have a foundational understanding of building a Discord bot, consider exploring advanced features such as:

Database integration for persistent storage
Using third-party APIs to fetch external data
Implementing more sophisticated command structures or events

The possibilities are endless!

FAQs

1. Can I run my Discord bot for free? Yes, you can run your bot for free, especially during the development phase. However, deploying it on a live server may incur costs if you choose premium hosting solutions.

2. How do I invite my bot to a Discord server? You can generate an invite link from the Discord Developer Portal under the "OAuth2" tab by selecting the necessary scopes and permissions.

3. Can I add music playback functionality to my bot? Yes, you can use libraries like @discordjs/voice to enable audio playback features in your Discord bot.

4. Is it necessary to use TypeScript for Discord bots? No, it's not necessary. Many developers use plain JavaScript; however, TypeScript offers advantages in terms of code maintainability and error reduction.

5. What if my bot crashes? You should implement error handling to manage unexpected behaviors. Additionally, tools like PM2 can help keep your bot running 24/7 by restarting it if it crashes.