搭建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开始调试。

相关推荐
excel3 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着3 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友5 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_7 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23337 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin7 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js