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

You should read about task runners or just add `tsc app.ts` to `npm start` of `package.json` — Heartbit, Jan 25 '17 at 14:17

ThomasThiebaud · Accepted Answer · 2017-02-01T07:37:17.190

66

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

edited Feb 01 '17 at 07:37

answered Jan 25 '17 at 14:47

ThomasThiebaud

11,331
6
54
77

6

This doesn't work for me, because `nodemon` is trying to start the server before `watch:build` task has finished. I get an error from nodemon saying: `Cannot find module '.../dist/index.js` – demisx Sep 14 '17 at 17:22
2

You may need to add nodemon, npm-run-all, and rimraf to packages.json `npm i rimraf npm-run-all nodemon --save-dev` – stevenspiel Mar 15 '20 at 02:16
3

`tsc` is the typescript compiler. It comes when you install typescript with `npm install typescript`. You can also use it with `npx tsc`. You can find more information [here](https://www.typescriptlang.org/docs/handbook/compiler-options.html) – ThomasThiebaud Dec 05 '20 at 16:35

score 14 · Answer 2 · answered Sep 14 '17 at 17:28

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.

score 10 · Answer 3 · answered Jul 10 '18 at 22:11

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

score 1 · Answer 4 · answered Dec 17 '21 at 13:25

1

Compiling TypeScript

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

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

answered Dec 17 '21 at 13:25

Jaydeep Sutradhar

11
1

How to compile typescript using npm command?

4 Answers4

Linked