第11章：测试与调试

调试 TypeScript 应用的技巧

调试是开发过程中不可或缺的一部分，TypeScript 提供了多种工具和技术来帮助开发者高效地定位和解决问题。以下是一些实用的调试技巧：

1. 使用 Source Maps

TypeScript 代码最终会被编译为 JavaScript，为了在调试时直接映射到原始 TypeScript 代码，需要启用 Source Maps：

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true
  }
}
  • 作用：在浏览器或 Node.js 调试工具中直接显示 TypeScript 源码。
  • 调试工具支持：Chrome DevTools、VS Code 调试器等均可识别 Source Maps。

2. VS Code 集成调试

VS Code 内置了对 TypeScript 调试的支持：

  1. 创建调试配置文件（.vscode/launch.json）：
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TS",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true
    }
  ]
}
  1. 通过断点、变量监视和调用栈分析问题。

3. 浏览器调试技巧

  • Chrome DevTools：
    • 确保生成的 .js 和 .map 文件与源码同步。
    • 使用 debugger 语句触发断点。
  • React/Vue 项目：结合框架开发者工具（如 React DevTools）检查组件状态与类型。

4. Node.js 调试

  • 使用 --inspect 参数启动应用：
    node --inspect dist/index.js
  • 通过 Chrome 访问 chrome://inspect 附加调试器。

5. 日志与断言

  • 结构化日志：使用 console 的增强工具（如 console.table 打印对象）。
  • 类型断言调试：临时使用 as any 隔离类型问题，但需谨慎。

6. 常见问题排查

  • 类型错误：通过 @ts-ignore 临时忽略错误（仅用于调试）。
  • 运行时错误：检查编译后的代码是否符合预期（如 strictNullChecks 的影响）。

7. 工具推荐

  • VS Code 插件：
    • TSLint（已弃用，可迁移到 ESLint）。
    • Error Lens：实时显示行内错误。
  • 第三方工具：
    • ndb：增强的 Node.js 调试器。

通过结合这些技巧，可以显著提升 TypeScript 应用的调试效率，快速定位类型或逻辑问题。

Last Updated::