And make it easier to maintain them while creating fewer bugs

Freek Mencke

Apr 27 · 5 min read

Ever since I first discovered TypeScript, I use it for all my JavaScript applications. There are just so many advantages to using TypeScript that you’re going to need a compelling argument to get me to write anything in Vanilla JavaScript.

In this article, I’m going to show you how to set up a simple development environment for writing a Node.js application in TypeScript.

Let me start by saying that there probably are a thousand or more different ways you can create Node.js applications in TypeScript. I’m just going to show the way I like to do it myself.

If you don’t feel like reading this entire article, you can find my starter project here: https://github.com/toxsickcoder/node-typescript-starter. It contains some extra features that we’re not going to discuss in this article.

Package.json

Like I said before, there are a lot of different ways you can do this. I like to use Webpack for my TypeScript projects. But first things first. Let’s start by creating a package.json.

You can generate a package.json by using the npm init command or you can copy paste the code below and change it.

Let’s begin with a simple Webpack configuration for a JavaScript Node.js project. After I’ve completed the basic setup, I’ll add TypeScript.

The application

As mentioned before, we are going to start with a JavaScript application, and later we’ll convert this into TypeScript. Let’s create a src/ directory with a main.js and information-logger.js file with some Node.js functionality:

This basic script will log some application and system information to the console. I can see the following output after running node main.js .

{ application: { name: 'node-typescript', version: '0.0.1' } }
{ system: { platform: 'linux', cpus: 8 } }

Webpack

The first thing we need to do before we can use Webpack is to install the necessary dependencies. Don’t forget to use the -D flag since they are devDependencies.

npm i -D webpack webpack-cli

You might have noticed that I didn’t install webpack-dev-server. That’s because we are creating a Node.js application. Later I’m going to use nodemon which serves the same purpose.

webpack.config.js

The next step is to create a webpack.config.js file where we will tell Webpack exactly how it should process our code.

As you can see, not much is needed to start with Webpack. The only two options that are required are entry and target. We declare our entry point using the entry field, and we tell Webpack we’re working in Node.js with the target field.

We can use the mode field to tell Webpack that it should focus on compilation speed (development), or obfuscation and minification (production). To aid with debugging, we use the devtool field to indicate that we want source maps if we run in development. This way, if there is an error, we can easily find the place it occurred in our code.

To use Webpack, we’re going to create a few npm commands:

We can now build our application by running either command. It will create a directory dist/ with the output file main.js inside. We could specify a different name using the output configuration in the webpack.config.js.

Our project should look like this now:

dist/
  main.js
node_modules/
src/
  information_logger.js
  main.js
package-lock.json
package.json
webpack.config.js

nodemon

You might have noticed that after running a start command, Webpack stops after building the application. It does not watch the file changes we make. And since we are working with Node.js, we cannot use the webpack-dev-server.

Luckily we can use nodemon to solve this problem. It is a tool that’s built specifically for this purpose: restarting Node.js applications during development.

Let’s start by installing the nodemon-webpack-plugin. Don’t forget the -D flag since it’s a devDependency.

npm i -D nodemon-webpack-plugin

Let’s create a new nodemon flag and add the plugin to our webpack.config.js.

When we pass the nodemon flag along, we will set the Webpack watch config, and we will add the nodemon plugin. The Webpack watch config will rebuild the application when we change a file. The nodemon plugin will restart the application when the rebuild finishes.

We’ll also need to update our npm commands. I also created some build commands, without the nodemon flag.

There we go, a basic Webpack setup for Node.js application. The next step is adding TypeScript!

TypeScript

And now, the moment we’ve all been waiting for, let’s add TypeScript! Let’s start by installing the dependencies we need.

Since this is a Node.js project, we also need to install the associated typings. I’m working on the LTS version of Node.js, which is 10. That’s why I’m installing version ^10.0.0 of the typings.

npm i -D typescript ts-loader @types/node@^10.0.0

ts-loader

We’re going to use the ts-loader Webpack plugin to compile our TypeScript. To do that, we have to tell Webpack to process TypeScript files with the ts-loader plugin.

We need to change our entry file extension to .ts and tell webpack it has to resolve .ts files as well (Webpack only works with .js files by default).

tsconfig.json

If we try to run our application now, it will crash. We are still missing a tsconfig.json file. So let’s create one.

I prefer strict tsconfig files, as you can see above. You do not have to do this. I also like to set my target high (esnext or es2018) because Node.js has excellent support for new JavaScript features.

The application

We still need to change the extension of the JavaScript files from .js to .ts. Let’s do that and try to run the project.

After running the project, we can immediately see we made a “mistake” in the test application we created. We shouldn’t destructure our package.json name field because it already exists on the global scope. By doing this, we would overwrite it. So let’s make some changes to the files.

If you followed everything, this is how our project structure should look:

dist/
  main.js
node_modules/
src/
  information-logger.ts
  main.ts
package-lock.json
package.json
tsconfig.json
webpack.config.js

And we’re ready to write Node.js applications in TypeScript!

Final note

I’m sure there are thousands of different ways to write Node.js applications in TypeScript. This is by no means the way you should do it, it is a way you can do it.

Next steps could be adding TSLint integration, adding a Dockerfile, setting up a CI pipeline… The world is your oyster.

I also wrote a follow-up article on how to write readable and maintainable code in TypeScript:

My first article here. I would love some constructive feedback. Thanks for reading!