How to compile typescript using npm command?

Question

Well I just wanted to know is there any command which will directly compile the typescript code and get the output. Right now, what i am doing is,every time when i make changes

Answer 1

This is based on solution proposed by @ThomasThiebaud. I had to modify it a little to make sure the files are built in dist/ before nodemon tries to start the server.

"scripts": {
    "clean": "rimraf dist",
    "build": "tsc",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'",
    "start": "npm-run-all clean build --parallel watch:build watch:server --print-label"
  },

You still need to run npm start to start the whole thing.

Answer 2

You can launch the tsc command (typescript compiler) with --watch argument.

Here is an idea :

• Configure typescript using tsconfig.json file
• Run tsc --watch, so every time you change a .ts file, tsc will compile it and produce the output (let say you configured typescript to put the output in ./dist folder)
• Use nodemon to watch if files in ./dist have changed and if needed to relaunch the server.

Here are some scripts (to put in package.json) that can help you to do it (you will need to install the following modules npm install --save typescript nodemon npm-run-all rimraf)

"scripts": {
    "clean": "rimraf dist",
    "start": "npm-run-all clean --parallel watch:build watch:server --print-label",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'"
}

Then you just need to run npm start in a terminal

Answer 3

Here is my approach, let say that you keep all your typescript files in src folder and want outputted javascript files be generated in the ./dist folder.

{
    "name": "yourProjectName",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/index",
    "types": "./dist/index",
    "scripts": {
        "dev": "tsc --watch & nodemon dist"
    },
    "author": "Gh111",
    "license": "ISC",
    "devDependencies": {
        "yourdevDependencies": "^1.0.0"
    }
}

and typescript configuration file tsconfig.json

{
  "compilerOptions": {
    "target": "es5",       
    "module": "commonjs",  
    "outDir": "./dist",    
  },
  "include": ["./src/**/*"],
  "exclude": [
    "node_modules"
  ]
}

Okay, what is going on here

First of all we should create tsconfig.json and tell typescript to put compiled files into the ./dist folder and at the same time we should exclude node_module folder or whatever we want and include everything from ["./src/**/*"] directory.

After that in packages.json file we should specify path to our compiled index.js file

"main": "./dist/index"

and finally we tell tsc to --watch any typescript changes, and nodemon to watch inside ./dist directory and if something changes nodemon will restart the server.

"scripts": {
    "dev": "tsc --watch & nodemon dist"
 },

To run script type npm run dev