本文将全面讲解如何在 vscode 中完成 typescript 的环境配置与调试流程，助力开发者快速搭建高效开发环境，适用于个人学习、教学实践及实际项目开发等多种场景，显著提升 typescript 项目的编写与排错效率。
1、 首先确认系统已安装 Node.js，并通过 npm 全局安装 ts-node 工具，具体操作步骤如下图所示。
2、 启动 VSCode，使用“文件 → 打开文件夹”打开一个空白目录；随后在该目录下新建 src 文件夹，并在其中创建两个 .ts 源文件，整体目录结构参考下图。
3、 点击 VSCode 左侧活动栏中的“运行和调试”图标（虫子形状），在顶部选择“显示所有自动检测到的运行/调试配置”，再点击“添加配置”按钮以初始化调试环境。
4、 在弹出的环境列表中，选择 “Node.js” 作为调试目标，如下图所示。
5、 此时项目根路径将自动生成 .vscode 隐藏文件夹，其中包含关键的 launch.json 调试配置文件，其默认内容结构如下图所示。
6、 在资源管理器中任意空白区域右键，选择“在集成终端中打开”，即可快速启动 VSCode 内置终端。
7、 在终端中执行指定初始化命令（如 npm init -y 和 npm install --save-dev typescript @types/node），为项目安装必要依赖。
8、 执行完毕后，项目根目录将生成 node_modules 文件夹与 package.json 文件，完整结构如下图所示。
9、 在项目根目录手动新建一个 tsconfig.json 文件，用于定义 TypeScript 编译选项。
10分钟内自己学会PHP其中，第1篇为入门篇，主要包括了解PHP、PHP开发环境搭建、PHP开发基础、PHP流程控制语句、函数、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、日期和时间等内容；第2篇为提高篇，主要包括MySQL数据库设计、PHP操作MySQL数据库、Cookie和Session、图形图像处理技术、文件和目录处理技术、面向对象、PDO数据库抽象层、程序调试与错误处理、A
10、 { 11、 "compilerOptions": { 12、 "target": "ES2020", 13、 "module": "commonjs", 14、 "lib": ["es2020", "dom"], 15、 "strict": true, 16、 "skipLibCheck": true, 17、 "forceConsistentCasingInFileNames": true, 18、 "outDir": "./dist", 19、 "rootDir": "./src", 20、 "esModuleInterop": true, 21、 "resolveJsonModule": true 22、 }, 23、 "include": ["src/*/"], 24、 "exclude": ["node_modules"] 25、 }
26、 配置完成后效果如下图所示：
27、 打开 .vscode/launch.json 文件，根据 TypeScript 运行需求修改配置项，确保支持源码级调试。
28、 {
29、 "version": "0.2.0",
30、 "configurations": [
31、 {
32、 "type": "pwa-node",
33、 "request": "launch",
34、 "name": "Launch Program",
35、 "skipFiles": ["
44、 修改后的配置效果如下图所示：
45、 在任意 .ts 文件中，点击代码行号左侧空白区域设置断点，出现红色圆点即表示断点已成功激活，可用于控制程序执行节奏。
46、 切换至左侧“运行和调试”面板，点击绿色三角形“开始调试”按钮，即可启动带断点的 TypeScript 程序。
47、 当程序运行至断点位置时将自动暂停，顶部工具栏显示调试控制按钮（继续、单步跳过、单步步入等），界面如下图所示。
48、 在调试过程中，可于“监视”面板中添加表达式或变量名称，实时观察其值的变化过程，操作方式如下图所示。
49、 此外，在代码编辑区将鼠标悬停于任一变量或表达式上方，VSCode 将即时显示其当前求值结果，交互体验简洁高效。
