How to compile typescript using npm command?

Question

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 in the file I have to re-run the command in order to compile it

npm start

This starts the browser and then I have to stop the execution using Ctrl + C and then I have to run the file using the npm command

node filename

to see the output.

So what I want to know is, is there any npm command which will compile the .ts file and see the changes which I have made in the file while I run the file using the

node filename

command

Answer 1

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 2

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 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

Answer 4

Compiling TypeScript

tsc filename.ts | node filename.js (for windows user).

tsc filename.ts && node filename.js (for Mac user).

Answer 5

 "scripts": {
    "build": "tsc -b"
}