搭建JavaScript和TypeScript开发调试环境

参考链接:搭建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开始调试。

相关推荐
元拓数智11 分钟前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front15 分钟前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
天一生水water1 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节
无风听海1 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
冰夏之夜影1 小时前
【科普】Edge出问题后如何恢复出厂设置
前端·edge
葱头的故事2 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
Mintopia2 小时前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia3 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia3 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心3 小时前
CSS 样式用法大全
前端·css·1024程序员节