搭建JavaScript和TypeScript开发调试环境

wr2023-11-30 15:49

参考链接：搭建JavaScript和TypeScript开发调试环境_javascript开发环境搭建-CSDN博客

调试TypeScript

Node.js是不能直接运行TypeScript脚本的，我们使用Node.js运行TypeScript脚本一般采用如下方法：使用TypeScript官方提供的tcs工具将TypeScript脚本转化为JavaScript，然后再使用Node.js运行js脚本，大致流程如下：

css 复制代码

tcs --outFile index.js index.ts
node index.js

而Node.js的扩展模块ts-node可以简化上述操作（其内部也是使用的tcs和node），将上面二步操作合二为一：

复制代码

ts-node index.ts

所以，我们这里采用ts-node模块来作为TypeScript脚本的运行时环境。

由于我们采用了ts-node工具来运行TypeScript脚本，Visual Studio Code没有内置该工具的调试配置，所以我们需要在luanch.json中自定义一个适用于ts-node的调试环境配置。

注意：如果需要自定义配置，那么工程文件必须在一个单独的目录中，并使用Visual Studio Code打开这个目录（对着目录点右键选择使用Visual Studio Code打开即可）

大致步骤如下：

新建项目目录（假设叫TSDemo）

使用Visual Studio Code打开该目录，并在"查看"菜单中选择打开"终端"（之所以在Visual Studio Code中打开终端，纯属是为了方便，因为在Visual Studio Code中打开终端，终端会自动切换到项目当前目录，且不用多个窗口之间切换）。

在终端中依此执行如下命令：

csharp 复制代码

# 生成package.json文件
npm init -y

# 安装typescript
npm install typescript -S

 # 安装ts-node
 npm install ts-node -S

luanch.json的路径为项目目录\.vscode\luanch.json，按照下图依次点击左侧工具栏"运行"->"创建launch.json文件"：

打开自动生成的luanch.json文件，在configurations节添加如下配置：

bash 复制代码

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",
            "args": [
                "${relativeFile}"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

打开需要调试的TypeScript文件，快捷键F5开始调试。