typescript调试

vsc typescript 2种调试方式

2种方式

1. build-in 方式

`{  
    "compilerOptions": 
	    {
	    "target": "es5",
	    "module": "commonjs",
	    "outDir": "out",   ==>js输出目录
	    "sourceMap": true   ==> 生成map文件，vsc必须
	    } 
    }`

 a. 创建文件 tsconfig.json，定义好输出文件和开启生成map文件
 b. 调试途径，切换到要调试ts文件，选node.js,按F5,即可调试，脱离浏览器单纯学习typescript
 c. terminal下，tsc  aa.ts 会编译aa.ts到当前目录aa.js
 d. terminal下, 定义好tsconfig.json后，执行tsc不带参数会将目录下所有文件进行编译
 e.对于build-in方式可进一步定义tsconfig.json如下，而选择Launch build-in Node进行调试	 

 {
            "type": "node",
            "request": "launch",
            "name": "Launch build-in Node",
            "program": "${workspaceFolder}/greeter.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/out/**/*.js"]
        }

 2.  Edge and Chrome debugger方式，即调试客户端代码
 	 既然是客户端代码，就牵涉到浏览器，html, 以及javascript的调用，所以同样步骤
 	 a. 定义tsconfig.json
 	 b. 编写ts文件
 	 c. 编写html文件，需要调用ts生成的js文件
 	 d. 创建 launch.json已启动浏览器chrome or edge, 
 	 e. debug & run前需要先编译即ts生成js, 需要手工执行tsc, 而后执行debug就可以看到chrome的加载html,js可以调试ts了。

"configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "file:///${workspaceFolder}/helloweb.html",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch build-in Node",
            "program": "${workspaceFolder}/greeter.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/out/**/*.js"]
        }
    ]