DEV Community

Cover image for 🤖 Create your Discord bot by using TypeScript and decorators!
Samar Meena
Samar Meena

Posted on • Updated on • Originally published at oceanroleplay.github.io

🤖 Create your Discord bot by using TypeScript and decorators!

#typescript #discord #tutorial #javascript

Hello all, Today, I will demonstrate how to create a discord bot using typescript and manage it easily with discordx.

I will show you the fastest way to setup your bot in this post, then in a subsequent post I will show you how to set it all up from scratch.

before we start, I assume you have some familiarity with discord bots, typescript decorators, and node.js.

Let's start

Step 1: Clone starter bot

git clone https://github.com/oceanroleplay/discord.ts-example
Enter fullscreen mode Exit fullscreen mode 
cd discord.ts-example
Enter fullscreen mode Exit fullscreen mode

Step 2: Install dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Step 3: Set bot token
In case you don't have a bot token yet, you can get it from the Discord developer portal

set BOT_TOKEN=<your bot token>
Enter fullscreen mode Exit fullscreen mode

Step 4: build your bot

npm run build
Enter fullscreen mode Exit fullscreen mode

Step 5: Start your bot

npm run start
Enter fullscreen mode Exit fullscreen mode

And you're done, everything has been done for you! 🚀

What's behind?

Steps above seem straight forward, let's discuss in depth.

we are using package called discordx to create the bot with decorators.

📔Decorators

There is a whole system that allows you to implement complex slash/simple commands and handle interactions like button, select menu, contextmenu etc.

General

Commands

GUI Interactions

Project files

Here are the source files for the project and important configurations

tsconfig.json 

{
  "compilerOptions": {
    "target": "ES2021",
    "module": "commonjs",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true
    "esModuleInterop": true,

    /* Experimental Options */
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true ,

    /* Advanced Options */
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}
Enter fullscreen mode Exit fullscreen mode

package.json 

{
  "name": "discord.ts-example",
  "version": "1.0.0",
  "description": "",
  "main": "build/client.js",
  "scripts": {
    "build": "tsc",
    "start": "node build/client.js",
    ...
  },
  ...
  "dependencies": {
    "discord.js": "^13.1.0",
    "discordx": "^5.7.0",
    "reflect-metadata": "^0.1.13"
  }
...
}
Enter fullscreen mode Exit fullscreen mode

Reference

Need more help?

Join our discord server

Thank you

If there are any mistakes, I apologize, thank you for reading my first post.

__

Screenshots

@Slash

slash command

@ButtonComponent

buttons

@SelectMenuComponent

Select Menu

@ContextMenu

context menu

Top comments (0)

Read next

zoltanf profile image

Astro vs Next.js

Zoltan Fehervari -

keshavkhatri profile image

Working with Dates and Times in JavaScript

Keshav Khatri -

amyroy profile image

‍How much does it cost to start a business online

amyroy -

fabrikapp profile image

How to Use Typed Routes in Next.js

Fabrikapp -