vs code 调试typescript

首先我们知道，运行typescript一般是先将ts代码，编码成JavaScript代码，然后再运行JavaScript代码。

那么，使用vs code直接调试的流程也是依照这个。

1. 确保已安装npm

2. 安装typescript 编译环境，任选都行

npm install typescript // 安装到当前目录
npm install typescript --global  // 安装到全局地址</pre>

或是

npm install -g typescript   // 安装到全局地址

// C:\Users\xxxxx\AppData\Roaming\npm\tsc

// C:\Users\xxxxx\AppData\Roaming\npm\tsserver

3. 在自己的工作目录下，运行tsc --init

会生成对应的tsconfig.json文件。

tsconfig.json是对应的编码成JavaScript时的一系列的配置，

最关键的一点是 “"sourceMap": true, ”

{

   "compilerOptions": {
       "target": "es5",
       "noImplicitAny": false,
       "module": "commonjs",
       "removeComments": true,
       "sourceMap": true,
       "outDir": "Golang/TypeScript/"
    }

    //"include":[
    //     "ts"
    // ],

    //"exclude": [
    //     "js"
    // ]

}

• target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。

• noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。

• module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。

• removeComments：编译生成的JavaScript文件是否移除注释。

• sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。

• outDir：编译输出JavaScript文件存放的文件夹。

• include、exclude：编译时需要包含/剔除的文件夹

4. 在.vscode目录下配置ts to js的tasks.json配置

{
// 有关 tasks.json 格式的文档，请参见
    // https://go.microsoft.com/fwlink/?LinkId=733558
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Test1",
            "type":"shell",
            "command": "tsc",

            //-p 指定目录；-w watch,检测文件改变自动编译
            "args": ["-p", ".","-w"],
            "presentation":
            {
                "reveal": "always",
            },
            "problemMatcher": [
                "$tsc"
            ]
        }
    ],
    "cwd": "${workspaceRoot}",
}

4. 配置当前工程目录下的.vscode/launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/dist/test1.js",
            "args": [
                "${relativeFile}"
            ],
            "cwd": "${workspaceRoot}",// 当前工作目录，current working dir
            "protocol": "inspector"
        }
    ]
}

程序启动入口类 ：
"program": "${workspaceRoot}/dist/test1.js",

5. 运行vs code 终端->运行生成任务

image.png
构建：则执行一次tsc，将ts文件生成出js
监视：任务一直挂起执行，每当ts文件有修改，自动执行ts生成js。
所以我们一般选择监视。
要关闭任务，则终端->终止任务选择刚才启动的tsc监视

同时在自己指定的输出目录会生成对应的.js文件和.js.map文件

6. 最后，F5，启动程序即可。

image.png