Creating a discord bot using TYPESCRIPT (Full Guide + Complete Handler)

hey guys in this video i'll be showing you guys how to create a discard bot using typescript if you get stuck or you just want a source code you can find the source code down in the description below so yeah without further ado let's just start this tutorial so first thing uh i have my terminal currently at document slash youtube and let's just create a new folder so we can do that by doing mkdir typescript bot all right so let's just go into that folder real quick you can just run npm init y to initialize our project all right and then if i open the code right now open it in visually code if i click on package json you can see that we have our package json all right so uh once this is done we need to install some dependencies so let's just quickly do that let's just run npm i discord.js dot env and glob and after that we're going to install some depth dependencies for typescript all right so npmi dash capital d we have at types uh glob at types node ts node ts node dev and lastly we have typescript because we are using typescript alright so once we are learning this we will be writing out our own scripts in package.json just go back to package.json and let's just write some scripts so in here you can just remove this uh we're going to write our first start script it's going to be ts node src slash index.ts psnode is a way to run type code without actually compiling it it's actually transpiling the code and then running it all right so uh we're gonna have our start dev so basically it's ts node dev same thing srg index.ts all right so the differences between ts node and ts node dev is ts node dev is run every time default changes so for example you save a file the process is going to be re-read okay next command next script we're going to have is the start prod script which stands for production so in this case we're just going to run node index index.js so all of the files in typescript that is located in source will be compiled into this folder i'll show you guys what i mean later on this video when i compile the code and then lastly we have our build and our watch script so tsc is our build script so this is how we compile typescript code into javascript and then lastly we have watch which is tsg.w same thing with nodemon it basically recompiles the code whenever that changes all right yeah that should be it for now uh let's just create a folder called src one thing we need to configure our ts config a json so let's just do just create a file called ts config.json and you can just paste in your preferred uh config all right and then in include section make sure to add environment the dwts i'll show you guys what i mean in a second because we're going to use environmental variables and if you want to get the source code just go to the description once again go to the description click on github and just search for the file and you can just copy it uh this ts computer json it's pretty basic all right so now let's just create a file called environment dots so in here we're gonna type out our own uh environments so let me just show you guys what i mean by that so if i do process dot emv dot as you can see here there is only an option tzat and for in typescript you can actually take advantage of this and you can add your own options in here so i'm going to show you guys how to do that right now so let's just head back to environment dot ts declare global we're going to check on the node.js namespace so node js like this and then we're gonna extend the process env interface so we can just do this okay so we're gonna have firstly our board token uh and then we're gonna have our guild id so this is gonna be the main guild id environment of the environment so we can know what environment we're currently in so we can either be in depth environment a production environment or we can have a debug environment all right and then we're just gonna have an empty export at the bottom to avoid any errors all right so now if i do process emv dot we can see that we have our own options now perfect all right so we're gonna start off by creating a client so let me just go to source folder create a new folder called structures so this is basically where we're writing out classes and then uh let me just create a file called client.ts oops uh what am i doing client dot yes all right okay first we're going to import client first quickly import client from discord.js and then we're just going to do export class extend the client extends client so client is a class and we're extending the class all right so now we can just type out our uh command structure and any relevant info so let me just create a new folder called typings make sure it is in make sure it is in the source folder and let's just create a command dot yes so this is where we type our types all right so we can just do uh import extended client all right and then uh we create a run options so let me show you guys what i mean by that so for a normal command we're gonna have a name in the command so name will be uh the command name all right we're gonna have a description okay you don't need to do this this is just me letting you visualize the command structure right so this description you can do any description and then we're gonna have our run function all right so our run function will look something like this if you watch my previous uh class commands video you see that i'm using objects instead of this let me show you guys a client interaction instead of this all right we can just do a client interaction like this okay this allows us to switch them so you can do interaction client and it will just work fine all right so this is our structure and let's just build this structure out the first thing i'm going to do is i'm just going to define the options in here so let me just do interface run options run options all right so in here we have our client extended client uh interaction will be command interaction and then uh we're gonna have arcs so arcs is gonna be command interaction option resolvable i mean resolver so uh it's equivalent to interaction the options all right so we can just use the arcs for that all right so next we're going to create our run function so we're going to write the types for this run function so we're just going to do type run function it goes to options run options so this is basically taking all of the run options so this is what we're writing right now and then we're going to return any all right so we don't know what it's going to return so let me just i'm just going to write any for now okay so lastly we're going to create our command type so we're going to create this whole thing so we're going to just do export type make sure there's export because we're going to use this in the other files so export time command type equals to a an object user permissions so this is where you can add your own stuff all right so before that i'm just going to make a union with chart input application command data so this is what discord expects you to give whenever you create a command so you can just do this all right so this includes the name let me just show you guys if i can see it uh all right as you can see here we have a description we have a type we have options okay if i go to the base you can see that we have name and default permission so it's basically giving us the basic things required to create a slash command so in here we can actually add our own types so we can just do something like user permissions uh user permissions uh permission resolvable an array of permission resolvable i mean and then we have our run run function okay let's say you also have a cooldown all right so you want to have a cool down you can just add the cooldown here uh number all right so this is how you do it but in this case i don't have a cooldown so i'm just going to remove that all right so yeah let's just go back to the client folder and uh we're just gonna do commands or can just do public commands i don't think that really matters we can just do commands and it's going to be public so commands is equals to a collection so this is the type let me just quickly import collection from discord.js collection all right the collection is going to have a key of a string and then the value will be a command type equals the new collection and then we're just going to call the constructor and we're going to use super so basically what super does is just uh it's basically accessing the constructor for the parent class so we extend it client that's why we're calling super so whenever i use constructor you need to use super if you are extending a class all right so we need to pass in options for now and we can just do intense uh 3 2 7 6 7 which stands for every single intent and then we can have a start function in our extended client so start function so this is how we can start our bot okay i'm going to create a function called uh register command let me just make the function asynchronous so register modules i mean register modules so when i already bought it started we're gonna log in the bot so we can just do this.login process dot emv dot uh bot token okay we lock in debug and we're also gonna register all the modules so basically what this function does it's just gonna register our commands you can publish our commands it's gonna uh register our events all right so we're just gonna call this function as well so this dot register modules all right so uh before that i'm just going to quickly grab our environmental variables so just go to your project create a file called.emv all right and then in here we're gonna have the same structure as the uh declaration files so we're gonna have our bot token our guild id and our and our environment all right so let me just quickly grab my bot token all right so if you don't know how to create a bot application uh you want to go to discord.com developers and you should see something like this click on new application and it's going to prompt you to enter a name just enter any name you want and then uh you see something like this and you want to head on to bot if you don't see this just click on edit bot just create a bot real quick and just scroll down and enable three of these intents all right once you've done this just click on copy and go back to your project so you can just do bot token oops once that okay so we're just going to paste in our bot token next we're going to paste in our guild id so this is going to be the main guild id so let me just quickly grab the guild id copy id go back to visual code and lastly we're going to be out environment uh it's not really important right now so i'm just going to make it in debug for now all right i'll talk more about this later on this video all right so we can start registering our commands so uh before that we actually need to do something so you're going to click import glock from glob and import promisify from youtube all right and we're just gonna do we're gonna make the glob a promise so we can just do glob promise it goes to promisify globe all right so uh now in register modules and create our module let me just close this because we're not going to use this for now all right so register modules you can just do a commands so we can know that this is where we register the commands and then first we're just gonna create a an empty array so slash commands equals to an array you can also write the type for this if i hover over this we can see that this type is currently any so we can write the type so we can just do uh this is gonna consist of application an array of application command data resolvable array perfect now we can have our file paths so command files equals to away glob promise their name and then we're gonna exit the directory all right so let me explain that real quick so we're currently in this structures we're gonna exit a directory which leads us to this source directory and we're gonna go into the commands directory so i'm just create a commands folder real quick all right so we're going to go into this directory right so commands and in our commands folder we're going to have subfolders like info and we're going to have a ping.js or ts i mean all right so in order to access these commands we can just make the category as any category and then in that category must either have dot ts or dot js files all right make sure there is no spaces in here or else it's just going to take that in account so this basically returns an array of file paths and we can also console.log that if you want so you can use the console.log command files to see that uh to visualize the the file paths all right so this returns a string array and then we can loop over that so we can just do uh command files not for each okay for each of the default off uh we're going to import it and then we're going to register the command all right so i'm just going to create a function to import the files so async import file it's going to require a file puff which is going to be a string and then here we're just going to return away import and then we're going to pass in default path and then we want to access the default export okay so we can do that by doing uh dot default perfect all right so now we can just do cons command equals to await this import file and we're going to pass in default path so this basically gives us the command so let's say we exported like an object with name of ping and then the run function okay it's going to be in here all right so oh this shouldn't be in index.js i meant to put this in a ping on ts but it doesn't really matter for now right so uh if i do command dot you can see here there is no options for me and if i hover over this it's just going to give us a type of any to add types all right we can just do a colon colon command type so this tells us that this is a command and now when i do command dot you see that we have the types now perfect all right so if there is no command the name we're just going to return so basically if the command doesn't have a name we're just going to ignore the command and if it does have the name we can just we're just going to do this.commands.set command the name as the key and then command sd command all right so this matches up with this so you can see your collection string command type this is a collection of string so command name is a string and command is a command type all right so just make sure it matches okay lastly we're going to push the slash commands so slash commands dot push uh command all right so now we have this flash commands array consists of all of the slash commands which needs to be published to discard all right so we're just going to create a separate function to publish commands let's just quickly do that async uh what what should i call this i should call this register uh commands okay so this is going to consist of an object of guild id oh before that we can actually write definitions for that as well so let me just remove that for now we're going to create a new file in typings called client.ts so this basically uh tells us what interfaces that is going to be used in client we can just write it in here so uh we want to write the options for this function so we can just name this interface uh register commands options all right so we're going to have a good id an optional good id so this if the person want to register a command the commands to a guild we can just do this or else it's going to register globally and then lastly we need our commands which is going to be application an array of application command data resolvable all right yeah this should be good all right so now we can just do options uh register command options and we can actually destructure this option so we can just do like commands and google id so this is how we can get access to commands and google id so now if we have a guild id it means that we only want to register the commands to a single guild or else if there is no google id it means that we want to register the commands globally all right so let me just do uh for the google id first so this.guilds.cache.get all right we're gonna get the guild id and then we're gonna set the commands uh commands like this all right and then we can just do a console.log saying that we registered to a guild so you can just do registering commands2 and you're going to pass in the guild id like this all right so if you want to register globally we can just do this.application uh command set commands and then we can just do console.log registering global commands that is all for the commands now let's move on to events for events we're going to create a new structure so event in here we're going to export a class so export class event and we're just going to use some generic magic so key extends uh key of client events all right so if you don't know what key is it's basically like uh interaction create message create of the uh event name so let me just open up the documentation for you to register visualize it so just go to js.org let me just quickly go to the client definition if i can find it and here are all the events all right so this is all of the keys that we expect okay you can also see it by going to your definition okay we can have api response uh cube member remove blah blah blah so everything with the blue right now is the key all right so in our function i mean in our class we can have a constructor okay the constructor consists of a uh event so this is gonna be the event name uh which is gonna be key all right and then we have a run function so we're just going to do a dot rx client event uh key and then it's just going to return any the so the reason that we're doing this is because let me just remove the semicolon we're actually getting the arguments needed so let me just go to the definition again all right so let's say uh we have uh ch application command create all right so it's just gonna give us command so this command is gonna be in args all right uh you'll be seeded you'll be able to see this later on this video now you can just head back to client and let's just continue creating our event handler so event just to indicate where event starts so same thing we can just copy this line all right uh and let's just change some things event files and then we're gonna change the commands to events let me just create a folder called events quickly new folder events and then let me just remove this because we don't have subfolders in our event and then we're just basically going to do every file in events that ends with ts or dot js all right so next thing we're just going to loop over the files so event files dot for each async for path once again we're just going to import the file so cons event is await import file all right so we're going to import default path once again this is any so you can just write our own types by doing event make sure it's coming from even and then we want to key off client events okay so now we can have our event type so i do event dot you can see that we have the types all right so we can just do uh this to on event.even so this is the key and then once it's on we can just run this callback function so even though run once again if this event is emitted it's just gonna run this callback function all right that should be it for the client definition now let's just create the board and study bot right so we can just import our extended client and we can just create a new client so export cons client the reason i'm exporting this is because we're going to use client in order of our files that's why i'm exporting it all right so we're just going to create a new extended client and then to start new bot we can just do client dot start one more thing in order to use environmental variables we need to require dot emv first and then use the config method and let's just start the bot all right to start your bot we can just run npm run start so you're going to use dts node for now npm run start to start the bot okay now we can see that we have a single command pts but unfortunately there is no command name so this command will not be registered so if you head on to this card you see that the bot is currently online and it's here and the body is online which is perfect so now we can continue creating our typescript panel all right let's just create a class for commands so let me just quickly do that command.ts let me just make this a singular oh my god what am i doing okay so come on and we're just gonna export uh a class so export class command and then we can have a constructor once again options or we can just call this command options and it's just gonna require the command type all right so it's coming from typing slash commands and then uh once you get that we're just going to do object assign this with command options perfect all right so let's just create our ready event so let's just go to events create file called ready.ts and in here we can just do export default new class i mean new event all right so our event name oops what am i doing event name is gonna be ready because we're accessing the ready event and then we're gonna have our client so we can just do uh console.log bot is online and let's just start the bot to see if this logs out ooh sorry we're doing empire on start all right as you can see here we can see that the bot is online and we know that this code is actually working so uh let me just quickly do something so we can just do npm run start colon dev to make it uh concurrently run so whenever you make a change it's just gonna rerun the file right so now let's just test creating a command so let me just go to uh commands ping.ts let's just create a simple ping command so we can just do that same thing export default new command okay and then command we can have our name which is gonna be a pink one description uh we can just do a shows client ping or something like this or we can just make a simple command like uh replies with pong all right we have our run function we're just gonna need interaction for now all right so if i remove this and i do command space i mean control space we can see that we get our options just click on interaction because i'm just gonna need interaction and we can just do interactional follow up uh interaction follow up content will be pong so let me just do pong all right so let me just go back to the client decoration and let's just see if we get the command so console.log command let me just remove this console all right so let me see if we get the command all right as is here we get our command object but unfortunately we can't use the command for now because we haven't created the interaction create event yet so we can just create that event right now so let me just create a new file for interaction create lts okay once again we're just going to export default new event coming from structure event this event is going to be named instruction create and then we can have interaction in here all right and if i do interaction dot you can see we can get all of the other complete and all of the options and then we can just do uh we can just indicate chart input commands aka uh it's the slash commands and then we can just do if interaction dot is command so this basically is a boolean to tell us whether this is a slash command so if it is we can just do a weight interaction but defer reply let's just make this function asynchronous so you can use a weight in here d for reply and then uh dot catch okay let's just remove the dot cash for now all right and we can just do cons command equals to client dot commands dot get interaction dot command name let's just quickly import the client so let me just do airport client so this client is coming from the index file this following here so now if i do client dot you can see that we can get all of the autocomplete all right so if there is no command we can just do return interaction so follow up uh we can just do you have used a non-existent command all right and then if the command exists we can just run the command so command.run it's going to take in an object so this is the run options and we're going to have the rx which is going to be interaction the options uh client oops why we're doing client and lastly interaction all right the rx is showing us an error so to fix this we can just cast a type we can just do s command interaction option resolver all right so now the error is gone perfect one more thing we can do is we can actually extend the interaction so if i do interaction dot member in the ping.ts file dot we can see that we only have limited options because it's not a guild member it's either a good member or a api interaction guild member to fix this we can just create we can just go to the command.ts in typings and we can create our own interaction so in here we can just do uh export extend interface extended interaction and we're gonna extend from command interaction all right and we're just gonna make the member a guild member all right so in here instead of interaction we're going to use extended interaction all right and then yeah that should be good to go so now if i do dot we can see that we get all of the options okay so you can see that interaction create is now treating an error so to fix this we can just make it we just cast a type to interaction so interaction as extended interaction right so now the arrow is gone perfect so let me just remove this and let's just try this out let's just try this command out so let me just go to discard slash ping that's going to reply punk so if i change this to a pong tree interaction of follow-up pong tree and let's just wait for it to restart and see here whenever i save the file it's just going to restart your bot and then we can just do slash ping okay we can get pong3 the last thing i want to touch on is basically compiling the code so let's just quickly compile your code by doing yarn uh npm run build let me just expand this okay so basically we just run mpl run build all right it's just going to use tse method and create a dist folder all right you can see that this is basically compiled code okay we can go to commands ping.js it's like really really messy i understand and to run this code okay we can just do npm run start prod it's going to run the bot or another way you can just run node this index.js and it should run the bot just fine so this is way faster compared to uh compared to using ts node and it's not advisable to use ts node if you're using a host so make sure to compile your code when using host like heroku or whatever it is this should conclude today's video on how to create a discord bot using typescript if any questions or you want to suggest a new video feel free to join the discord server the links will be in the description on that have a nice day see you next video bye [Music]

Channel: reconlx

Views: 3,372

Keywords:

Id: 4IxLBKPVyXE

Length: 33min 38sec (2018 seconds)

Published: Sat Nov 06 2021