How to use TypeScript with your Discord Bot (and why)

let's take a look at this code it seems as if there's nothing wrong with it it's a basic message event listener which just logs to the console with the nickname of the person who sent this message so let's go ahead and test this code out on Discord I'm going to type the message and back in our code we do get our result as expected now JavaScript seems to suggest that our code is perfect so we're just trusting it but there is a slight problem here let's try to DM our bot with the same message now something interesting happens our bot basically crashes if we read the error we realize oh the member property in our code can also be null when a person is sending a message through a DM so we can go back to our code and we can say if not message dot member then we can just go ahead and return and from here everything is fine and our bot will not crash but that's where the problem is we had to first run our Code test the bot by sending a message and even then it all seemed perfectly fine it was until we sent a DM to the bot that we realized there's a bug when using JavaScript we usually don't give second thoughts to something like this and that's where typescript really helps let's take a look at the same code but in typescript I'll add this console log statement here and we're already seeing something's wrong with our code if we hover over it it's going to say message dot member is possibly no and that's correct we saw this earlier when we tried to send a direct message to the Bots but the gray great thing about typescript is you can catch so many bugs like these before you even have to test your application to fix this we can do the same thing as we did with our JavaScript code and we can say if not message dot member then return and now typescript is all happy this is one of the main reasons why developers use typescript and if you're not already using it I think you should I should warn you though in some cases typescript can introduce its own set of complexities for me that's worth it but you may have a different opinion on this so let's see how we can set up a discord.js project with typescript now I've started off with a blank vs code project I just have a DOT EnV file and I'm storing my bot token in here so let's go ahead and set up npm in this directory we can go ahead and say npm init hyphen Y and we should get a package.json file with all the basic stuff now let's go ahead and install all the dependencies that we need we're first going to start with a global dependency this one is going to be typescript so let's say npm install and use the G flag for Global and typescripts now since I'm on Mac I'm going to have to put sudo in front but if you're on Windows this should work like so so after typescript is installed globally what we can do is we can go ahead and install discord.js and Dot EnV for this project right here so I'm going to say npm install discord.js and Dot EnV now we also need some Dev dependencies which is going to make development so much easier so I'm going to say npm install and hyphen capital D and this is going to install it as a Dev dependency and we're going to install TSX and we're going to be using this to run our typescript files during development and we also need types slash node so hit enter and wait for it to install now once this is installed let's go ahead and configure our package.json so the first thing that we want to change here is the main property I'm going to set this to dist slash index.js and the disk folder is basically where our transpiled typescript code is going to go next let's go ahead and update our scripts so I'm going to change test to Dev and I'm going to change the value for this to TSX watch source index.ts so let's go ahead and create our source folder and inside this we're going to have a typescript file called index.ts now I'm just going to add a console log statement over here saying hello world and save it for now and we'll come back to it later now let's go ahead and add another script and this one is going to be build and we're going to be running this script every time we want to transfile our typescript code down to JavaScript for this we're going to be using TSC and you get access to this command when you install typescript as a global dependency finally let's go ahead and set the start script which is going to start the bot from the dist folder so we're going to say node Dot and when we say dot it's basically going to refer to this Main and that's really all we need in our package.json so let's go ahead and save this and close out of this file now we need to go ahead and configure our typescript settings there's actually two ways you can go about this so the first way is by generating the file using TSC init and this will create a tsconfig.json file over here but there's a lot of configuration that you have to do so if you're not comfortable with these settings I actually have some settings which I recommend I'm going to have this linked Down Below in the description so I'm going to go ahead and paste my ts config like so and I'm quickly going to go over what these settings mean so Target is basically our Target JavaScript code I'm going to set this to es2022 but if you have an older version of node.js you might have to set this to an older version module common JS but if you're using esm feel free to change this module resolution is going to be node strict is true no implicit any is also going to be true which means we have to manually specify when we're setting the type any declaration is going to be false because we don't really need that skip lib check is going to be true so it's not going to go through our node modules we also have strict null checks set to true and resolve Json module also set to True with this we can import Json files like we do in our JavaScript finally we have include and exclude these are pretty self-explanatory we want typescript to include all the files within the source folder and exclude node modules oh and I completely forgot we have to set outdoor to this this is basically going to specify where typescript is going to put all the transpiled code in this case we wanted to create a dist folder if one does not already exist and put all the JavaScript files in that folder so that's our typescript configuration we can go ahead and close out of it now let's go ahead and test our typescript code so we have a basic console log here and let's go ahead and test our Dev script so I'm going to say npm run Dev and as you can see it says hello world and since we're watching this file we can go ahead and duplicate this a bunch of times and this is going to change in real time so that's awesome I can go ahead and remove this now let's go ahead and test our build command so I'm going to say npm run build and this is going to create a new folder called dist with an index.js file and we just have a console log here just like we do in our typescript file finally the npm Run start command is just going to run this Javascript file so hitting enter is going to run node Dot and we get hello world as expected now let's go ahead and set up our Discord bot as I mentioned earlier I have my token in the dot EnV file so let's go ahead and import dot EMV now in typescript even if you are using common JS you have to use the import export syntax of esm so you're going to do something like import dot EnV config and if we want to import something from discord.js it's going to be like imports from discord.js and from discord.js we're going to go ahead and import client now let's go ahead and Define our client object so I'm going to say const client equals to a new instance of the client class we can pass in an object and you can already see the beauty of typescript it's telling us that well we're missing some properties and as it says intense is missing so let's go ahead and set intense and this is going to be an array of all the intents in this case our intent is going to be guilt Guild messages Guild members and maybe message content of course you can set this to whatever you want it to be now let's go ahead and set up our ready event listener so I'm going to say client dot on and the name of the event is ready and once again you can see typescript telling us that our code is not complete it expects another argument which is going to be a callback function and in this we have access to the client object so we can go ahead and console log C dot user dot username is online finally we can go ahead and log into our bot using client Dot Login process.env dot token so we can save this file and let's try to run our Dev script so I'm going to say npm run Dev and after some time in the terminal we're gonna see not under control is online and our bot is going to run as if we're just running it using node however you don't want to run typescript code directly during production because that may have a performance impact so what you want to do is transpile it down to JavaScript as we did before so let's say npm run build and let's keep an eye on this index.js so I'm going to say npm run build and now you can see that we have some code that looks a little bit messy but this is basically the transpiled code you don't have to worry about this because typescript handles it all for you all you have to do is just run this code so we can test it out by saying npm Run start and as you can see it runs perfectly just as we expect it to so that's how you set up a discord.js project with typescript let me know what you want to see next thanks for watching and I'll see you in the next one

Channel: Under Ctrl

Views: 6,508

Keywords:

Id: L7i53iYwlZU

Length: 9min 32sec (572 seconds)

Published: Fri Sep 22 2023