DEV Community

Cover image for Setup Simple Workflow To Write Node TypeScript Application In Live Reload (Nodemon, ts-node)
Max Kovalevsky
Max Kovalevsky

Posted on • Updated on • Originally published at byte.ski

Setup Simple Workflow To Write Node TypeScript Application In Live Reload (Nodemon, ts-node)

This post is part of series and book about TypeScript. It will guide you from scratch to writing full TypeScript applications on Back End and Front End. The series is available as PDF eBook for free to everyone.

TypeScript Book (PDF)

In this post, we will learn how to set up a Node project with TypeScript. It is not based on any framework or library like Fastify, Express, Nest, etc. Let's say you wanna build just a command-line application by using TypeScript and Node.

First of all, you need to install TypeScript on your computer. Install it by npm or Yarn globally.

npm i -g typescript
Enter fullscreen mode Exit fullscreen mode

I'm sure you already installed Node on your computer but maybe you need to update your version. If so, check out the post about How To Install or Update Node by Using nvm (Node Version Manager).

Okay, now let's create a project's folder with name whatever you want (I name it as node-ts-setup-example). Open this folder in Terminal and your editor (I use Visual Studio Code).

Initialize the project by npm command:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Our project as an example will be simple - it is a command-line app that asks users to type their name in the Terminal and then prints greetings with this name.

Let's create a first file of the project - main.ts. Just put there very basic TypeScript code like this:

import { createInterface } from "readline";
import { promisify } from "util";

const rlInterface = createInterface({
  input: process.stdin,
  output: process.stdout,
});

const question = promisify(rlInterface.question).bind(rlInterface);

function greeting(name: unknown) {
  console.log(`Hello, ${name}!`);
}

async function main() {
  try {
    const name = await question("Type your name: ");

    greeting(name);

    rlInterface.close();
  } catch (e) {
    console.error(e);
  }
}

main();
Enter fullscreen mode Exit fullscreen mode

Now let's try to compile this file by using the TypeScript compiler:

tsc main.ts
Enter fullscreen mode Exit fullscreen mode

As you may have noticed TypeScript tells us that we need to install Type Declaration for modules of Node that we use - readline and util. If you are not familiar with Type Declarations check out the post What Are Type Declaration Files In TypeScript?. For now, let's just install these Type Declarations by npm:

npm install --save-dev @types/node
Enter fullscreen mode Exit fullscreen mode

Try to compile main.ts again:

tsc main.ts
Enter fullscreen mode Exit fullscreen mode

Great! The file was successfully compiled. Let's run it by Node and type our name to see greetings:

node main.js
Enter fullscreen mode Exit fullscreen mode

Awesome. But what if we need to change our code a bit? When we change that we need to compile this file again and run it by Node. It would be great if our code will be automatically compiled and executed after changing. We can automate the process by running TypeScript compiler in watch mode:

tsc main.ts -w
Enter fullscreen mode Exit fullscreen mode

So now TypeScript compiler automatically compiles main.ts into JavaScript code. But what about executing this? Well, TypeScript can't execute the code, only compile it.

We can set up the project to automate our development process. Let's start with TypeScript configuration. We need to create TypeScript configuration file in our project. We can use a special command that generates a configuration file with default settings:

tsc --init
Enter fullscreen mode Exit fullscreen mode

It generated the file tsconfig.json. If you open this file you will see there are many options and parameters. I will write about it more in the next posts. All we need to do is focus on parameters outDir and rootDir. Uncomment these options in the tsconfig.json.

outDir is the path to folder where will be compiled from TypeScript to JavaScript code.

rootDir is the path to folder where are our TypeScript source code of the app. In our case - file main.ts.

Specify the options with values:

{
    ...
    "outDir": "./dist",
    "rootDir": "./src",
    ...
}
Enter fullscreen mode Exit fullscreen mode

Also we need to uncomment parameter moduleResolution with value node:

"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
Enter fullscreen mode Exit fullscreen mode

Create folder /src and move main.ts there.

Alright. We configured TypeScript for our project. Now we have to configure Node to execute our code in watch mode.

We need to install a few dev dependencies - ts-node and nodemon:

npm i -D ts-node nodemon
Enter fullscreen mode Exit fullscreen mode

ts-node is a tool that executes code that is written in TypeScript as if it is written in JavaScript. I mean, you can perceive this as running Node but for TypeScript files. You can also use ts-node as a REPL to execute the code without files.

nodemon is a tool that restarts your Node application when some file changes. It really helps in developing because you don't need to re-run Node if you change code in your application.

Now let's specify section scripts in package.json file:

{
    ...
    "scripts": {
        "dev": "nodemon -w src src/main.ts",
        "start": "node dist/main.js",
        "build": "tsc -p ."
    },
    ...
}
Enter fullscreen mode Exit fullscreen mode

To run dev server use this command:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Now if we change our code in main.ts it automatically re-compiles and re-run Node to execute the code.

Do you like the material? Please, subscribe to my email newsletter to stay up to date.

subscribe

Top comments (0)