DEV Community

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

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

10 2

🤖 Create your Discord bot by using TypeScript and decorators!

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay