vscode中Typescript的运行和调试环境配置教程

Typescript是JavaScript的超集，因此在vscode中运行和调试Typescript实际是先通过运行vscode的配置好的脚本任务先进行静态编译把Typescript转换成Javascript ES6或者ES5规范后再进一步用Node环境来运行和调试Javascript代码。

准备环境： 在已有NodeJS运行环境下，用npm管理安装Typescript环境、

npm i -g typescript

创建tsconfig.json，此文件作为typescript的配置文件

{
    "compilerOptions": {
        "module": "CommonJS",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "target": "ES6",
        "sourceMap": true,
        // outDir 为输出路径，这里指输出到与tsconfig.json同目录下的路径，即输出为./out/*.ts
        "outDir": "out",
        "charset": "utf-8",
    },
    "compileOnSave": true,
    // inlcude作为包含ts文件的路径，这里指与tsconfig.json同目录下src文件夹下所有ts文件
    "include": [
        "src/**/*"
    ],
    // "files": [
    //     "src/play_ground.ts"
    // ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

之后配置vscode脚本子任务 创建task.json，并加入如下代码创建一个基于typescript.json运行静态编译的子任务。

{
  "version": "2.0.0",
  "tasks": [
    //需要加入的部分
    {
    	"type": "typescript",
        // 其中tsconfig的路径为${cwd}/typescript/tsconfig.json,${cwd}(current workfolder directory)为当前vscode项目的路径。
    	"tsconfig": "typescript/tsconfig.json",
    	"problemMatcher": [
    		"$tsc"
    	],
    	"group": {
    		"kind": "build",
    		"isDefault": true
    	},
        // 任务的标签
    	"label": "tsconfig build"
    },
  ]
}

之后需要在launch.json下加入调试的配置信息

{
  "version": "0.2.0",
  "configurations": [
    //需要加入的配置信息
    {
      "type": "node",
      "request": "launch",
      "name": "Node(TypeScript)",
      //当前文件夹/不带后缀名的文件.ts
      "program": "${fileDirname}/${fileBasenameNoExtension}.ts",
      "cwd": "${workspaceFolder}",
      //在调试运行前执行的任务
      "preLaunchTask": "tsconfig build",
      //编译完成后关联的source code，即根据source maps定位到编译完成的JavaScript代码
      "outFiles": ["${workspaceFolder}/typescript/out/**/*.js"]
    },
  ]
}

之后选择debugger配置，愉快F5进入调试程序。