typescript 如何在vscode里调试

原创

mob64ca12ebb57f 2024-10-10 05:51:29 ©著作权

文章标签 typescript json 服务器 文章分类 TypeScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ebb57f的原创作品，请联系作者获取转载授权，否则将追究法律责任

TypeScript 如何在 VSCode 里调试

在日常开发中，调试是一个不可或缺的环节。尤其对于使用 TypeScript 的项目，借助 Visual Studio Code（VSCode）进行调试能够极大提高开发效率。本方案将详细介绍如何在 VSCode 中调试 TypeScript 应用，以便读者快速上手。

项目背景

我们将构建一个简单的 TypeScript 项目，项目将包括一个 HTTP 服务器，此服务器能够接受请求并返回 JSON 响应。我们会使用 express 框架来构建这个服务器，并在 VSCode 中进行调试。

准备工作

1. 安装 Node.js 和 TypeScript

首先，确保你的系统上安装了 Node.js。可以通过 [Node.js 官方网站]( 下载并安装。接着，在你的终端中全局安装 TypeScript：

npm install -g typescript

2. 创建项目

在终端中新建一个文件夹并进入该文件夹：

mkdir typescript-debug-example
cd typescript-debug-example

然后通过 npm 初始化项目：

npm init -y

接着安装 express 和 ts-node。

npm install express
npm install -D typescript @types/express ts-node

3. 配置 TypeScript

创建 tsconfig.json 文件并编辑如下内容：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

4. 编写代码

在 src 文件夹中创建 app.ts 文件，并添加以下代码：

import express from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.json({ message: 'Hello, World!' });
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

VSCode 调试配置

在 VSCode 中点击左侧的调试图标（或按 Ctrl + Shift + D），然后点击“创建一个 launch.json 文件”。

选择 Node.js 作为环境，然后替换生成的配置，如下所示：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/src/app.ts",
      "runtimeArgs": [
        "-r",
        "ts-node/register"
      ],
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ],
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

此时，你可以通过在想要调试的代码行上设置断点，然后点击调试按钮运行项目来进行调试。

项目计划

在项目开始之前，建议制作一个计划。以下是项目的甘特图，展示了不同阶段的时间安排：

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 准备阶段
    安装 Node.js               :a1, 2023-10-01, 1d
    安装 TypeScript            :after a1  , 1d
    section 开发阶段
    编写 Express 服务器代码  :a2, 2023-10-03, 2d
    调试配置 VSCode           :after a2  , 1d

旅行图

在开发过程中，掌握调试的流程至关重要。以下是调试过程的旅行图：

journey
    title TypeScript VSCode 调试流程
    section 准备
      安装 Node.js       : 5: 安装完成
      安装 TypeScript    : 5: 安装完成
    section 开发
      编写代码           : 4: 代码编写完成
    section 调试
      设置断点           : 5: 断点设置成功
      启动调试           : 5: 调试开始
      监控变量           : 5: 监控变量成功