typescript from scratch to enabling debugging using visual studio code and webstorm

Using IDE visual studio code, or webstorm!! (or whatever you wants)

mkdir typescript_hello
cd typescript_hello

To make a initial tsconfig.json

tsc --init /* message TS6071: Successfully created a tsconfig.json file. */

using visual studio in the command line.

code ./

opening tsconfig.json, you should aware that many properties within there.
However, most important properties is “target”, “sourceMap” and “lib”.

Here are my samples. (after tsc –init, I edited it.)

	"compilerOptions": {
		"module": "commonjs",
		"target": "es5",
		"sourceMap": true,
		"lib": ["es6", "dom"]
	"exclude": [

During development, it’s more convenient auto reload using tsc watch mode.
So, 1. install lightweight http server first, 2. using tsc -w option.

sudo npm install -g lite-server

Opening another command line to activate watch mode.

tsc -w ./*.ts --sourceMap --pretty  --lib es6 --target es5

Now, add first typescript file and html file.
so my root director should be

typescript_hello -- index.html
                 -- index.ts
                 -- tsconfig.json


<!doctype html>

<html lang="en">
  <meta charset="utf-8">

  <meta name="description" content="">
  <meta name="author" content="">


  <script src="./index.js"></script>


var hello = 'hello';

console.log('a'); /* this line is for enabling debugging session test */

if you’ve done “tsc -w ./*.ts –sourceMap –pretty –lib es6 –target es5” before,
root directory should be

typescript_hello -- index.html
                 -- index.js
                 -- index.js.map
                 -- index.ts
                 -- tsconfig.json

debugging in visual studio code

above figure. #3 should have changed like below.

"program": "${workspaceRoot}/index.js",

and, now your breakpoint should working well.
See “DEBUG CONSOLE” in visual studio code.,

it took too long time to write this post. I maybe revise this post including webstorm debugging near future.