🤖 Create your Discord bot by using TypeScript and decorators!
Tags: typescript, discord, tutorial, javascript
Published: 2021-08-25 13:18:15

Hello all, Today, I will demonstrate how to create a discord bot using typescript and manage it easily with [discordx](https://www.npmjs.com/package/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](https://github.com/oceanroleplay/discord.ts-example)**

```
git clone https://github.com/oceanroleplay/discord.ts-example
```
```
cd discord.ts-example
```

**Step 2: Install dependencies**
```
npm install
```  

**Step 3: Set bot token**
In case you don't have a bot token yet, you can get it from the [Discord developer portal](https://discord.com/developers/)

```
set BOT_TOKEN=<your bot token>
```

**Step 4: build your bot**
```
npm run build
```

**Step 5: Start your bot**
```
npm run start
```

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](https://www.npmjs.com/package/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

- [`@Discord`](https://oceanroleplay.github.io/discord.ts/docs/decorators/general/discord)
- [`@Guard`](https://oceanroleplay.github.io/discord.ts/docs/decorators/general/guard)
- [`@Guild`](https://oceanroleplay.github.io/discord.ts/docs/decorators/general/guild)
- [`@Bot`](https://oceanroleplay.github.io/discord.ts/docs/decorators/general/bot)
- [`@Permission`](https://oceanroleplay.github.io/discord.ts/docs/decorators/general/permission)
- [`@On`](https://oceanroleplay.github.io/discord.ts/docs/decorators/general/on)
- [`@Once`](https://oceanroleplay.github.io/discord.ts/docs/decorators/general/once)

### Commands

- [`@Slash`](https://oceanroleplay.github.io/discord.ts/docs/decorators/commands/slash)
- [`@SlashChoice`](https://oceanroleplay.github.io/discord.ts/docs/decorators/commands/slashchoice)
- [`@SlashGroup`](https://oceanroleplay.github.io/discord.ts/docs/decorators/commands/slashgroup)
- [`@SlashOption`](https://oceanroleplay.github.io/discord.ts/docs/decorators/commands/slashoption)
- [`@SimpleCommand`](https://oceanroleplay.github.io/discord.ts/docs/decorators/commands/simplecommand)
- [`@SimpleCommandOption`](https://oceanroleplay.github.io/discord.ts/docs/decorators/commands/simplecommandoption)

### GUI Interactions

- [`@ButtonComponent`](https://oceanroleplay.github.io/discord.ts/docs/decorators/gui/buttoncomponent)
- [`@SelectMenuComponent`](https://oceanroleplay.github.io/discord.ts/docs/decorators/gui/selectmenucomponent)
- [`@ContextMenu`](https://oceanroleplay.github.io/discord.ts/docs/decorators/gui/contextmenu)

___

## Project files
Here are the source files for the project and important configurations

### tsconfig.json
```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
  }
}
```

### package.json
```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"
  }
...
}
```
___

## Reference
* [discordx](https://www.npmjs.com/package/discordx)
* [starter project](https://github.com/oceanroleplay/discord.ts-example)
* [documentation](https://oceanroleplay.github.io/discord.ts/)
* [github](https://github.com/oceanroleplay/discord.ts)

## Need more help?
Join our [discord server](https://discord.gg/yHQY9fexH9)

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

__

## Screenshots

### [@Slash](https://oceanroleplay.github.io/discord.ts/docs/decorators/commands/slash)
![slash command](https://oceanroleplay.github.io/discord.ts/assets/images/choices-9f2ec7b1b456c6a16f7a9ffeffeb3f5c.png)

### [@ButtonComponent](https://oceanroleplay.github.io/discord.ts/docs/decorators/gui/buttoncomponent)
![buttons](https://oceanroleplay.github.io/discord.ts/assets/images/button-example-d5dad5e3ccdbe2cbdb1556cf89810d30.jpg)

### [@SelectMenuComponent](https://oceanroleplay.github.io/discord.ts/docs/decorators/gui/selectmenucomponent)
![Select Menu](https://oceanroleplay.github.io/discord.ts/assets/images/select-menu-example-0fe02ad4093a7ea140cade33a1074a62.jpg)

### [@ContextMenu](https://oceanroleplay.github.io/discord.ts/docs/decorators/gui/contextmenu)
![context menu](https://oceanroleplay.github.io/discord.ts/assets/images/user-context-1f212792cc743b6de5d322599e62228d.jpg)