How to Setup Node.js with TypeScript in 2023

every few months I find myself setting up a node.js project with typescript and every time I do that my configuration seems to be different which is very annoying I could just switch over to dino or maybe try a harakiri ritual but that's not always an option in this video we'll set up node.js version 18 with typescript and look at a couple of other cool tricks along the way the first step is to initialize a node project by running npm net flag y to give us a package Json from there I'm creating an index.js file then inside this file I want to import a package the traditional way to do that node is with common JS using this require function however most developers today prefer es modules using the import export syntax so let's go ahead and convert our code to an es import now if we open up the terminal and try to run this code you'll notice we get an error telling us that we can't use an es module unless we first go into our package Json and change the type to module this tells node to use es modules instead of require and now our code works perfectly that's cool but this video is about typescript so let's go ahead and install soul type script now and you'll want to make sure you have a version greater than 4.7 in addition in the package Json we'll add a script that runs that typescript compiler to build the application or convert the typescript code into JavaScript code now before we configure it I'm going to organize things by creating a source directory and add our index TS file to it when using node built-ins you might get an error that says it cannot find the corresponding type declarations in which case you'll want to install the types for node and the error should magically disappear the next thing we'll do is create a tsconfig.json file to configure the behavior of the typescript compiler for now I'm going to paste in a config that I've used in past projects and let me explain what all these things mean module defines the module system for the program common JS would be ideal for a program that users require but we're going to change that to node next this is a relatively new Option that's designed to work with a package Json that has the type set to module after that we have module resolution which determines how typescript will find code that you import let's also go ahead and change that that to node next now the target is the flavor of JavaScript that your code will compile to yes 2020 should be fine if you're deploying to a modern version of node but you can go all the way back to ES3 if you prefer we then have the source map option set to True which Maps the compile JavaScript code back to typescript which can help us out with debugging and then finally we have the out directory which is where the final JavaScript code will be compiled that's it for compiler options the last thing we need to do is tell typescript where to find our code with the include option pointing to the source directory that takes care of the config now let's pull up the terminal and run npm run build that runs the typescript compiler to generate this disk folder that contains the Javascript file that we can actually run on node.js we now have typescript running in node.js but there is one important thing you should know here let's imagine we have a helper.ts file that exports some code if we try to then import it in the index file you'll notice we get an error saying that it needs an explicit file extension when using node next we need to use the dot JS extension when importing files local to our project this is not the case when importing packages from node modules so just be aware of this weird caveat the reason that's like this is because we can also use common JS modules side by side in the project if we create a file called helper.cts we can use the common JS module export syntax inside of it then back inside the index file we can import that code using the CJs file extension so basically the node next option gives us much better interop between common JS and esm and with that we have a good starting point for node.js and typescript there are tons of other options in the typescript config but hopefully you never have to touch them although I am working on a full typescript course that will take a deep dive into all this after typescript 5 is released early next year thanks for watching and I will see you in the next one

Channel: Beyond Fireship

Views: 332,119

Keywords:

Id: H91aqUHn8sE

Length: 3min 45sec (225 seconds)

Published: Tue Nov 29 2022