TypeScript 是一种静态类型的编程语言，它可以编译成 JavaScript，并且具有类型检查和面向对象的特性。由于 TypeScript 的特殊性，有时候在编写的程序中会出现一些错误和问题，这时候我们需要进行调试来找出问题所在和解决它们。本文将分享一些关于如何调试 TypeScript 编写的程序的技巧和经验。
使用调试器
当我们需要调试 JavaScript 代码时，我们通常会使用浏览器的开发者工具或者 Node.js 的调试器。对于 TypeScript 代码，我们可以使用 VSCode 或者 WebStorm 这类 IDE 自带的调试器，也可以使用 Node.js 的调试器。
使用 VSCode 调试器
在使用 VSCode 调试器时，我们需要在项目中设置一些配置，如下所示：
-- -------------------- ---- -------
-
---------- --------
----------------- -
-
------- -------
---------- ---------
------- ------ ---------
------------ -
---------------------
--
---------- ----------------------------------
----------- ------------------------------------
------------- -----
------ --------------------
-
-
-在上面的配置文件中，我们可以看到 program 属性和 outFiles 属性，这些属性可以帮助 VSCode 在调试 TypeScript 代码时找到对应的 JavaScript 代码文件。我们需要设置 program 属性为我们 TypeScript 代码的入口文件，同时设置 outFiles 属性为 TypeScript 编译后生成的 JavaScript 代码所在的目录。
使用 Node.js 调试器
使用 Node.js 调试器调试 TypeScript 代码与调试 JavaScript 代码基本相同。我们需要在启动 Node.js 应用程序时添加一些调试参数，如下所示：
node --inspect-brk dist/index.js
上面的命令会启动一个 Node.js 服务，并使其暂停（即停止在代码的第一行）以等待调试器连接。之后，我们可以在 Chrome 浏览器中访问 chrome://inspect 页面，连接我们刚刚启动的 Node.js 服务，然后就可以开始调试 TypeScript 代码了。
使用 VSCode 的调试工具
除了使用调试器之外，我们还可以使用 VSCode 内置的调试工具来调试 TypeScript 代码。
设置断点
在调试 TypeScript 代码时，我们可以在代码中设置断点来帮助我们调试。在 VSCode 中，我们可以使用鼠标单击代码行的左侧来设置断点。我们还可以在 VSCode 的侧边栏中，打开调试器面板并点击“断点列表”来查看当前设置的断点。
查看变量的值
当程序停止在断点处时，我们可以查看变量的值来了解程序的当前状态。我们可以使用 VSCode 中的“向下展开”按钮展开变量并查看其值。我们还可以将鼠标浮动在变量名上来查看其值。
控制程序的执行
当程序停止在断点处时，我们可以使用调试工具中的控制按钮来控制程序的执行。这些按钮包括“继续”、“单步执行”、“逐过程执行”等。
总结
通过使用调试器和调试工具，我们可以轻松地调试 TypeScript 编写的程序。在调试过程中，我们需要了解如何设置断点、查看变量的值以及控制程序的执行。这些技巧可以帮助我们快速找出程序中的问题并进行修复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647da0dd968c7c53b086d186