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:
- Habitual imports, without
require
orimport * as Smth from 'smth'
, justimport Smth from 'smth'
- Demon for server restarting
- 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
- Add to
tsconfig.json
"compilerOptions": {
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
}
- npm script for running server:
"scripts" : {
"dev": "TS_NODE_PROJECT='./tsconfig.json' ts-node src/index.ts"
}
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"
}
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"
}
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"
}
Recap
Necessary fields in tsconfig.jsoon
:
{
"compilerOptions": {
"module": "commonjs",
"rootDir": "src",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"noImplicitAny": true,
},
"include": ["src/"],
"exclude": ["node_modules"]
}
}
npm script:
"scripts" : {
"dev": "TS_NODE_PROJECT='./tsconfig.json' ts-node-dev --inspect --respawn ./src src/index.ts"
}
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)
Ah, nice! This will save some time during setup. thanks!