TypeScript 代码调试：开发者的工具与技巧

TypeScript 代码调试：将 Bug 变成任务

您是否曾花一个小时寻找一个错误，结果发现只是变量名中的简单拼写错误？或者您是否曾暗自觉得 console.log 是您唯一使用的工具？欢迎加入这个俱乐部。调试不仅仅是“抓 Bug”，更是一门理解代码实际运行原理的艺术。

TypeScript 为这个过程增添了独特的魅力。一方面，静态类型在编译阶段就剔除了一整类错误。另一方面，当代码编译成 JavaScript 后，实时调试变得更加困难：您用 TS 编写代码，但在浏览器中看到的是编译后的 JS。如何在这个迷宫中不迷失方向？

今天，我将向您展示我自己使用的真实 TypeScript 代码调试技巧。没有废话——只有实用的工具、示例和能为您节省时间和精力的窍门。

为什么 TypeScript 调试与 JavaScript 调试不同？

TypeScript 的核心特点是转译。您编写带有类型、泛型和接口的代码，而浏览器或 Node.js 接收的是纯 JavaScript。这意味着调试时，您看到的是编译后的代码，它可能与原始代码大相径庭：变量名可能被修改，泛型被擦除，接口完全消失。

解决方案——Source Maps。这是原始 TS 代码与编译后 JS 代码之间的映射文件。没有它们，TypeScript 调试就变成了盲猜。

配置 Source Maps：迈向透明的第一步

为了让浏览器或调试器知道 JS 的哪一行对应 TS 的哪一行，您需要在 tsconfig.json 中启用 source maps 生成：

{\n  "compilerOptions": {\n    "sourceMap": true,\n    "outDir": "./dist",\n    "target": "ES2020",\n    "module": "commonjs"\n  },\n  "include": ["src/**/*"]\n}

现在，编译时每个 JS 文件旁边都会生成一个 .map 文件。浏览器（Chrome、Firefox）会自动加载它，您就可以直接在 TypeScript 代码中设置断点。

重要提示： 在生产环境中，最好禁用 source maps 或使用隐藏的端点，以免向用户暴露源代码。通过环境变量进行配置：

// tsconfig.prod.json\n{\n  "extends": "./tsconfig.json",\n  "compilerOptions": {\n    "sourceMap": false\n  }\n}

TypeScript 调试工具：您的武器库

1. VS Code —— 内置调试器

Visual Studio Code 可以说是调试 TypeScript 的最佳环境。内置调试器能够读取 source maps，并直接在 .ts 文件中设置断点。以下是最小化的 launch.json 配置：

{\n  "version": "0.2.0",\n  "configurations": [\n    {\n      "type": "node",\n      "request": "launch",\n      "name": "通过 ts-node 调试 TS",\n      "runtimeArgs": ["-r", "ts-node/register"],\n      "args": ["${workspaceFolder}/src/index.ts"],\n      "sourceMaps": true,\n      "cwd": "${workspaceFolder}",\n      "protocol": "inspector"\n    }\n  ]\n}

现在您可以按 F5 直接进入调试器。在行号左侧设置红色圆点——即使您调试的是带有泛型和装饰器的 TypeScript 代码，它们也会生效。

小窍门： 在代码中直接使用 debugger; —— 这相当于设置断点，但无需使用鼠标。

2. Chrome DevTools —— 前端调试

对于基于 TypeScript 的前端项目（React、Angular、Vue），Chrome DevTools 是必备工具。打开 Sources 选项卡，在 webpack:// 或 src 文件夹中找到您的文件——如果 source maps 配置正确，您将看到原始的 TypeScript 代码。

实用功能：

\n
• 条件断点