DEV Community

Cover image for Convenient development with ts-node on server-side
GF
GF

Posted on

Convenient development with ts-node on server-side

This article is a description of some difficulties I met while was configuring a small project for development ts-node server. The main aim of that article is sharing my experience in solving a few problems I met and make the solving process simpler for people who want to solve the same problems in the ts-node development process.

Why is ts-node? I have been using typescript for only one year but firstly was annoyed by it. A little while later, when I had become more familiar with it, I loved this language and in some cases typescript is indispensable. It is necessary to spend more time on development but it will pay off when you have to support code, especially when you doing something involves changes in much code in different places in codebase.

So, below three features I want to have while development:

  1. Habitual imports, without require or import * as Smth from 'smth', just import Smth from 'smth'
  2. Demon for server restarting
  3. Ability to set --inspect flag for debugging in chrome console

Imports configuring

The first item doesn't look like an intricate task, does it? However, I have spent some time reaching that aim. In all examples I managed to find in the web, imports like require or import * as Smth from 'smth' was used. In fact, it isn't a problem, but I want to be more concise and finally, I used to use ES6 imports. For using ES6 imports I did the next:

Files structure I used:

├── src
│   └── index.ts
└── .tsconfig.json
Enter fullscreen mode Exit fullscreen mode
  • Add to tsconfig.json
   "compilerOptions": {
      "module": "commonjs",
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
   }
Enter fullscreen mode Exit fullscreen mode
  • npm script for running server:
      "scripts" : {
          "dev": "TS_NODE_PROJECT='./tsconfig.json' ts-node src/index.ts"
      }
Enter fullscreen mode Exit fullscreen mode

Demon

While developing with node.js I usually prefer to use nodemon package. In a few examples, I saw ts-node projects with it. However, as far as I understood, nodemon uses previously compiled code. I.e. ts-node watches for files, compile files into a directory pointed as a source to nodemon. I don't want to use that way because I want to make ts-node making all work.

I wrote npm script below and actually it works, but...

      "scripts" : {
          "dev": "TS_NODE_PROJECT='./tsconfig.json' nodemon -r ts-node/register ./src/index.ts"
      }
Enter fullscreen mode Exit fullscreen mode

But if you add "noImplicitAny": true, to your tsconfig.json it won't work.
(As far as I understand because of nodemon can't have deal with types, but I can mistake)

Moreover, even if you don't add this rule the --inspect flag won't work.

Let's go further and take the ts-node-dev package. It allows to reach what I want with the next npm script:

      "scripts" : {
          "dev": "TS_NODE_PROJECT='./tsconfig.json' ts-node-dev --respawn ./src src/index.ts"
      }
Enter fullscreen mode Exit fullscreen mode

Cool! I have habitual imports and demon without intermediate compilation!

Debugging

Now it is very simple, just add the --inspect flag:

      "scripts" : {
          "dev": "TS_NODE_PROJECT='./tsconfig.json' ts-node-dev  --inspect --respawn ./src src/index.ts"
      }
Enter fullscreen mode Exit fullscreen mode

Recap

Necessary fields in tsconfig.jsoon:

{
    "compilerOptions": {
    "module": "commonjs",
    "rootDir": "src",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
  },
    "include": ["src/"],
    "exclude": ["node_modules"]
  }
}
Enter fullscreen mode Exit fullscreen mode

npm script:

      "scripts" : {
          "dev": "TS_NODE_PROJECT='./tsconfig.json' ts-node-dev  --inspect --respawn ./src src/index.ts"
      }
Enter fullscreen mode Exit fullscreen mode

That's it! Now it is possible to work with typescript on the server-side in a convenient way.
I hope this guide will be helpful for someone and will let avoid wasting time because I have spent several hours to discover all of that.

Top comments (1)

Collapse
 
chrisachard profile image
Chris Achard

Ah, nice! This will save some time during setup. thanks!