TypeScript在vscode中断点调试

1.配置所需的环境

1. node 版本
2. yarn global add typescript (安装支持ts模块)
3. yarn global add ts-node (安装编译ts模块，ts模块可以帮助我们无需手动编译成js，可以直接在vscode中调试)

2.构造项目

1. npm init 项目名称(创建项目)
2. tsc --init (初始化tsc项目)
3. 在执行第二步后，会生成一个 tsconfig.json ，各个参数的解释如下:
   {
   “compileOnSave”: false,
   “compilerOptions”: {
   “outDir”: “./dist/out-tsc”,//输出目录
   “baseUrl”: “src”,
   “sourceMap”: true,//把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
   “removeComments”: true,//编译 js 的时候，删除掉注释
   “declaration”: false,
   “moduleResolution”: “node”,//模块的解析
   “emitDecoratorMetadata”: true,//给源码里的装饰器声明加上设计类型元数据。查看issue #2577了解更多信息。
   “experimentalDecorators”: true,//启用实验性的ES装饰器。
   “target”: “es5”,//编译目标平台
   //exclude：不包含的编译目录
   //noImplicitAny：true/false；为 false 时，如果编译器无法根据变量的使用来判断类型时，将用 any 类型代替。为 true 时，进行强类型检查，会报错
   “typeRoots”: [
   “node_modules/@types”
   ],
   “lib”: [//添加需要的解析的语法，否则TS会检测出错。
   “es2016”,
   “dom”
   ]
   }
   }
4. 我项目的tsconfig.json配置如下:
   {
   “compilerOptions”: {
   “module”: “commonjs”,
   “target”: “es6”,
   “noImplicitAny”: true,
   “outDir”: “./dist”,
   “sourceMap”: false
   },
   “include”: [
   “src/**/*”
   ]
   }
   5.vscode的启动程序 launch.json配置如下:
   {
   “configurations”: [
   {
   “name”: “启动程序”,
   “type”: “node”,
   “request”: “launch”,
   “args”: [
   “$relativeFile"],"cwd":"${workspaceRoot}”,
   “protocol”: “inspector”,
   “runtimeArgs”: [
   “-r”,
   “ts-node/register”
   ]
   }
   ]
   }
5. 选择任何一个ts文件 直接运行，效果如下:
6. 编译项目
   注意，ts想在生产环境中运行，是需要编译成js的,在当前目录下使用tsc命令即可编译生成js

3.实用的几个小功能

1. 请注意vscode已内置集成校验ts的语法，不需要安装其他校验了

2. 选择合适在typescript插件，比如导入之类的，如下
   

3. 如果想调用npm的第三方模块该怎么做呢？很简单
   比如安装 js-yaml 以前我们是 yarn add js-yaml
   现在改为 yarn add @types/js-yaml 即可(如果安装时,@type找不到该模块，则可以使用require引用，也可以)
   另外在打包成js时,你仍需要安装 js-yaml 在你的依赖里面
   若在node环境中，想调用如fs等模块，你需要安装 yarn add @types/node 即可

4. js项目迁移至ts,使用一个常见的批量修改后缀名的工具，批量修改.js为.ts即可

5. 关于tsconfig.json中sourceMap的文件功能
   source map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等元信息数据文件，一般这种文件和min.js主文件放在同一个目录下。 比如压缩后原变量是map，压缩后通过变量替换规则可能会被替换成a，这时source map文件会记录下这个mapping的信息，这样的好处就是说，在调试的时候，如果有一些JS报错，那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试，这样会给我们带来很大的方便！

4.本次项目的git地址如下:
https://github.com/williamDazhangyu/tsexampleByDebug.git