#1 Command & Event Handler | discord.js typescript tutorials

hey guys welcome back to another video on the discord jet series so in today's video i'll be showing you guys how to make a typescript bot so yeah it's pretty simple but um it's pretty time consuming so first thing uh i have my um typescript bottle here so let me just do a npm init dashboard so you can just initiate the project okay you can use the uh vs code terminal i'm just going to use the external terminal because it's more easier okay and then we're going to install two depth dependencies which is npm i install d um we're going to install typescript and also we're going to install um ts node so ts node allows you to uh use to use uh use it like node but for typescript so you don't need to compile it and use it okay so let's just install that okay in the meanwhile we're going to create ts config.json just config um yes config the json okay and then um we're gonna create an object okay now i'm just gonna paste this preset over here okay feel free to pause the video if you want to copy it down so uh we're not gonna compile it anywhere actually because this is not actually necessary but i'm just going to put it there just for yeah okay so once that's done uh we're going to create a source folder okay let me see if it's installed okay and then we can install uh some more dependencies we'll install um discord.js mongoose so for the people that are confused why i mean why am i using this code.js because actually typescript is actually javascript but it has type annotations so um you can type record and get less errors which makes a faster production time so yeah it's actually just javascript there's no such thing as discard.ts so um yeah i hope this covers the theory okay so um once you have that done we can start by creating a client so just create a folder called client and we're going to create a folder called commands and then events and then uh interfaces once one of the best features of typescript is allows uh interfaces and then we're gonna get a config json and also lastly index.ts okay so first you wanna go to package.json and change the main directory to ts src slash index.ts make sure it's that okay and then in the script section we're going to change a script we're going to change it to start and then uh we're gonna make it using ts note dev oh we need to install one more dependency so mpmi dash d ts node dev just install that and then we'll get another death dependency okay so this is called uh ts node def dash dash respond and then um that's the transpile only uh that's just pull dot src index dot ts okay so this is start command so we can just run npm run start to start it so we don't need to quite don't need to type this whole thing so it acts like nodemon but yeah alright oh shoot um i accidentally clicked on overwrite so let me just install that and let's just close this right now so here okay so um we're going to head on to client and we're going to create inverse ts so we're just going to extend the client for now and then we're going to go to interfaces and create some interfaces so let's just import uh from discord js okay so we're gonna import client so this is basically like uh cons something equals uh required it's the same thing but we're just gonna use imports because it's better okay and then um we're gonna do class extended client extends and then client and then we're gonna make class and then we're gonna do export default and then extended client okay so um and then we can head on to the interfaces and you can create some interfaces so interfaces um we're gonna create a command oops why am i what do i click there command.ts and we're going to create a event.yes and then another one called config.ts and lastly index.ts so we can export all at once so we don't need to require different files for uh so yeah uh first we're gonna do commands.ts okay we're gonna import client from dot slash under slash client just do this okay by default it's gonna search for index.ts so you don't need to um five minutes already okay so you don't need to do in client slash in lts because it's already defaulted to index so you're gonna import discord you're gonna take in message okay because it's a command that's why you need message and then we're gonna do interface run we're gonna make an interface so this gives you intellisense so you don't need to do uh the param thing that i used to do on every single command in my javascript videos so you can just do this client and a message and then lastly arcs will be a string so just passing string low caps so make sure it's all located because it's typescript so yeah and then we're gonna export interface export interface command you can name will be string so if you want an option to be optional just do this like for example let's just do description okay if you want this to be optional just add a question mark behind it and then you won't show any errors okay so usage uh we don't need usage actually license okay we're gonna cover elias's today also in today's video we're just it's gonna be a array of string and then lastly will be run and you're going to pass in the run interface perfect so now let's head on to config.ts and let's just export uh export interface interface config and token will be a string so this is the um basically this is the schema for config.json so you can get intellisense on the json string oops string and then prefix will be also a string okay and then lastly we're gonna go to events events and then uh you can import client same thing and import client from uh dot dot slash client and then we're gonna import client events from discord.js from discord.js and then we're going to import client events which is also an interface so you're going to x uh interface run okay and then a client will be a client and then r dot r so you're going to spread the args and then uh any any uh object and then i'm gonna export interface event so you can export the interface name will be key off client events and then uh run will be run the run interface so let me just drink some water okay so yeah this is the um interfaces so the reason i created index.ts is because we can just export everything um command you can export command like this okay and then you can export uh from event and you can export event so you can just require a single file to access all these interfaces that's the reason i created um this index.ts file so let me just export all these okay perfect so now we can continue with our extended client okay and then let me just go to our extended client and then in here uh the first thing we're gonna we're gonna take in some more uh stuff from node modules here we're gonna take a collection because we're going to take in message embed okay actually we don't need a message but you're just going to take client collection and then we're going to import uh from mongoose we're going to take in connect and then um we're going to import path we're going to use path fighting from path um we're going to import from fs reducing we're gonna use reader sync and then uh we're gonna import the interfaces by doing import from dot slash interfaces oops dot slash interfaces and then you're gonna take in the command as you can see here it allows me to um import all these from a file sorting different files for it and then we can just import config json from uh dot slash config slash conflict rejection okay so um let me just go to configuration and add some stuff in it so you're gonna put an object in it and then token and we're just gonna put in our token in here so we have all this saved in here so we can just copy this and then next will be prefix okay prefix i'll just make my prefix ts and exclamation mark because it sounds more it's easy and then um lastly it's gonna be um what's this uri just copy this uri so in here you can just put in your mongoose connection string if you notice that i'll link a video down in the description you can check it out it's how to connect to your database so we're going to use this in the later videos if this video does well so yeah um let me just copy my mongoose connection string okay make sure not to share this to anyone i'm just going to regenerate this later so this is my ip scope so you can't really use my connection string so yeah so once that's done i'm going to close this we don't need all of these anymore okay so now we're just gonna focus on here so con public commands and then it's a uh equals new collection and then public events equals new collection and then uh public config equals a config json and then public aliases equals new collection okay so now i'm just gonna explain intelligence on this let me just make this conflict so it takes in conflict okay so for commands uh we can actually do this call collection and then the lower than uh more than symbol okay so this has two parameters the key value and also the type the type of the key and the time of the value so for the type of key it's going to be the string and then the value will be um command so we're just going to do this same thing over here collection the type of the key will be string and then the type of the collection will be a event that config config eliases is the same thing string command oops command string command collection what am i even doing collection okay so yeah this is the uh publix and then we'll make a function to initiate the project using init okay and then we're gonna login into um this login we're going to log into the discord client there's the config.token you can see here there's intellisense and then we're going to connect to mongoose by doing connect this dot config dot uri comma use a unified topology true uh use find and modify true use new york also true okay so what's that's done uh we can start by we're gonna use some comma so i'm just gonna use i'm just gonna do this so i'm just gonna make a comment to tell that this is command section so first we're going to define command path so we're going to use path the join your name so your name is equals to a client and we're going to exit a directory so we're going to go to source directory and then we're going to enter into commands so this is this is the commands directory okay and now you can do reader sync command path dot for each of the directory there okay this is actually the same command handler with the first video that i've ever made in this channel but it's in that script so yeah i'll show you guys how to do this the commands equals reader sync reader sync whatever i'll call it and then we're going to use some template intros and command path command path and then after i exit the dollar sign thing and then do slash and then there okay and then we're gonna filter files filter the files that only ends with typescript so filter file and then follow the ends with dot ts okay so once that's done uh we're gonna use a4 uh loop to check over every single file so for cons file of commands okay for each file okay and then we need a required command um we can do this by doing cons equals require points command because require then use the template shows again and then command path path slash and then uh dear and then slash file okay and then um this the commands the set um command dot name command okay and then um we're going to check if there's license if there's a license we're going to set it into the um collection command question mark analysis dot length okay and it's not equal to zero we're gonna do command the license the for each oh my god commando analyzes the for each for each license we're gonna set it to this this aliases the set um elias and then comment and command so you're just gonna when we get it you're just gonna run it so yeah um next we're gonna do events so it's almost the same but we're just going to do something different a little bit different so events let me just do that and then cons event path equals path to join the same thing so let me just copy this and then change commands to events make sure it's capitals because uh i have made all these file capitals folders i mean okay and then um creator sync event path same thing and then dot for each but we're gonna take in straight away default uh we're not gonna use we're not going to use our folders in the events so cons event um equals away import we import and then um event path slash file okay and then this the events dot set uh event dot name comma event anyway we can actually console the event so we can see if it's loaded okay and then lastly this dot on so basically this client on the same thing event.name comma at the event dot run dot bind no this okay so this is basically the extended client so we can start by using this already so um let me just go to index.ts so let me just show you it's actually like three lines i think or maybe two lines so import um a client from dot slash client okay and then we just do a new client dot internet that's all we need to do for index or ts um because all the code is in client already okay perfect so um let's just go to commands and let's just create a simple command so i will show you guys how to create this command so i'm just going to call this um guild and let me just call this um testing of ts okay okay actually we can just make it ping command a simple ping command ping.ts okay so the first thing you want to do when you're creating command is importing the interface itself by doing um import from uh slash interfaces to just do this and then in here in writing command okay and then after that this is the export cons command command okay once that's done uh you get intellisense for name and then you use i'm just gonna call this ping uh run using client message arcs okay um so if you see here let me just explain about the interface again so i'm gonna pull my commands interface over here okay and if i make my description it's uh not optional so if i save this you throw an error saying that our description is missing in type so we need if you don't want if you want something optional just put a question mark behind it and then i will be gone okay so the another fun thing about elias is so let's say a lysis and you forgot to make it an array because licenses are erased so if we're going to make it an array you just put a string in it so like hello you can see it shows an error so this is the uh good parts about typescript it allows you to detect this kind of error so if you change this to n uh an array it removes the error let me just put a comma here okay perfect so um let me just test this out and we're just gonna do message.channel send um message.channel.send as you can see here it gives intellisense channel as you can see here um it gives you entirely sense so you don't need to do on the parameters thing that i've done every single video so message the channel ascend and then uh you can do is do tablet trolls client dot web socket the ping ping okay so this is simple command and now let's head on to events and let me just show you how to create a simple event so the the first event i'm going to create a video is going to create two events so first being ready the ts second will be a message yes okay so for radio ts first uh we're just gonna do the same thing like commands we're gonna import the events this time interfaces okay we import events okay and then export cons event event okay it shows error because i don't have name or run so you can add name and then we can choose a lot of events over here let me just put in ready and a run uh will be a client okay so normally um we have um the only the uh the only parameters is only one parameter or two so now we can if let's say i'll show you guys in messages later okay i'll not waste my time explaining this console.log um client.user.tag is online so let me just show you guys an example in message.ts uh what the freak is that um import we're gonna do the same thing import from interfaces interfaces so for now we're gonna uh we're gonna need events event and also command okay and then we're gonna import message from discord.js okay and then um to do the event just gonna do the same thing export cons event event name message and then um run uh client message will be message okay so what i mean by that is normally uh where we do client uh normally we do client let me just zoom in so you can see it actually client.on uh message let me just um client.on normally you do this on and a message and then um async message so there's only one parameter which is message but now for each of your events there is a an additional which is client so you can access client like that so client and then your arguments over here the the normal parameters so yeah this is how you do it and then uh we're gonna do the basic um um command handler which is if message the author not bought or it's not a guild so it's not a guild or if message.content dot starts with if it's not starts with client or config the prefix okay and then we're just gonna return okay so we're gonna define arcs now cons equals message dot content okay and then uh dot slice um client.config or prefix.length dot trim and then dot split we use regex we're gonna split every single space we're doing this okay and then cons command it goes rx arcs.shift or to lowercase and then um we can if there is no command return so if there is no parameters um cons command you define command right now because client commands not get command or client license align the light or your search dot get command and then we can just do command the run if command and then command command s command and then dot run client message arcs i hope this doesn't confuse you it's actually really easy so as we're just gonna take in uh we're gonna uh inherit the properties from the command interface and then we can just use the dot run okay so um that should be it so let me just open the terminal okay to start the project all we need to do is npm run start let me see if there's any error i think that will be it okay [Music] ts note dive what's going on okay so i forgot to put my file name um so the file will be follow the um dot slash src index yes i don't know why they are wait so long okay so let me just start that up again npm run start okay let's just wait for it okay so um as you can see here this um arrow over here it's actually just a warning i've searched that up i switched up the threats it's a harmless warning uh it will be removed for i don't know when but yeah let's just ignore this okay as you can see here this is uh they are logging the events so actually you can just remove the logs because we know it actually works right now so let's go to index ts and then this is remove all the console.logs just remove this okay and then if you save the file you'll automatically restart so yeah as you can see you're restarting and then youtube tutorials is now online so if i go to my uh bot here okay and if i run a command so let me see what is the command again ping okay ts ping you say one for for ping because my my face totally but if i use my elixirs now tsp as you can see here it's actually the same wonderful for pink so yeah you can use uh commands and uh license so this should conclude today's video on the typescript series so this is the part one series of this series so if you like this video make sure to leave a like and let me know down in the comments down comment section down below okay if you face any errors feel free to join the support server links will be in description because we can't really help you guys in the comments section because we i have a team in recon dev that will help you okay and then lastly if you like this uh make sure to hit uh make sure to hit the subscribe button you really have to channel out once again uh if you want to see part two on the typescript series make sure to leave a like and leave a comment down below saying that you want to watch it okay um yeah that should conclude to this video i already have a nice day see you next video bye

Channel: reconlx

Views: 10,400

Keywords:

Id: mUCYXZ4Gx7E

Length: 30min 28sec (1828 seconds)

Published: Sat Feb 20 2021