【VSCode】使用ts-node 调试TypeScript代码

TypeScript的类型校验使我们可以写出更加健壮和可维护的前端代码。怎样在VSCode中debug ts代码呢？只需要如下几个简单步骤的配置。

1. 安装ts-node和最新版的typescript

npm install -g ts-node
npm install typescript@latest

2. 配置launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "ts-node Debugger",
            "type": "node",
            "request": "launch",
            "args": [
              "${workspaceRoot}/tmp.ts" // 入口文件
            ],
            "runtimeArgs": [
              "--nolazy",
              "-r",
              "ts-node/register"
            ],
            "sourceMaps": true, 
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeExecutable": "/Users/yyy/.nvm/versions/node/v12.14.1/bin/node"
          }
    ]
}

1）需要将args配置成需要debug的入口文件 比如，我这里debug的文件是根目录下的tmp.js

所以添加如下配置：

 "args": [
              "${workspaceRoot}/tmp.ts" // 入口文件
            ],

2）runtimeExecutable：填node的安装目录，mac中可以用where 命令查找安装路径。

3. 在tsconfig.json中开启sourceMap("sourceMap": true)。本例中配置如下：

{
	"compileOnSave": false,
	"compilerOptions": {
		"strict": true,
		"noEmit": true,
		"declaration": true,
		"moduleResolution": "node",
		"esModuleInterop": true,
		"sourceMap": true
	},
	"include": ["src/*.ts", "test/*.ts"]
}

然后就可以愉快地debug了～