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": {
  "dev": "nodemon",
  "build": "npm install && npx tsc",
  "start": "node ./dist/index.js",
  "local": "env-cmd -f .env.e2e npm run dev"
},

To run script type npm run build, make sure you have typescript configuration file tsconfig.json.

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