随着 TypeScript 和 Node.js 的不断发展，越来越多的前端开发者开始使用 TypeScript 来编写 Node.js 应用程序，因为 TypeScript 提供了更好的类型安全性和集成开发环境支持。但是，在调试 TypeScript 应用程序时会遇到一些挑战。本文将探讨如何在 Node.js 中使用 TypeScript 进行调试，并提供一些实用的技巧和示例代码。
安装 TypeScript 和 Node.js
在开始之前，我们需要安装最新版本的 Node.js 和 TypeScript，可以使用包管理工具来完成。
确定您已经安装了Node.js和npm，请打开命令行并运行以下命令来安装 TypeScript：
--- ------- -- ----------
创建 TypeScript 项目
首先，我们需要创建一个 TypeScript 应用程序。让我们从创建一个简单的项目开始，例如一个 hello world 的程序。
- 创建文件夹，并使用命令行进入文件夹。
----- ---------------------- -- ----------------------
- 创建
package.json文件。
--- ---- --
- 安装 TypeScript 和相关的包。
--- ------- ------ ---------- -----------
- 在项目根目录下创建一个名为
index.ts的文件，并添加以下代码。
------------------- --------------
- 使用命令行编译 TypeScript 程序。
---
tsc 命令将编译 TypeScript 文件，并生成一个对应的 JavaScript 文件。在这种情况下，它将生成一个名为 index.js 的文件。
- 运行 Node.js 应用程序。
---- --------
输出结果应该包含以下内容：
------ -----------
调试 TypeScript 应用程序
在开始调试 TypeScript 应用程序之前，我们需要了解如何使用 source maps 将 TypeScript 的代码映射到它所生成的 JavaScript 代码。 source maps 是一种技术，它允许调试器将 JavaScript 代码映射回原始 TypeScript 代码。
要启用 source maps，请确保在 tsconfig.json 文件中将生成类型设置为 “sourceMap”。
-
------------------ -
--------- -----------
------------------ -----
--------- ------
------------ ----
--
---------- ------------
---------- ----------------
-接下来，我们可以使用 Node.js 调试器在 VSCode 或 WebStorm 中对 TypeScript 应用程序进行调试。
使用 VSCode 进行调试
在这里，我们将使用 VSCode 进行调试。让我们开始：
- 在 VSCode 中打开 TypeScript 项目。
---- -
- 在
launch.json文件中创建一个新的调试配置。
在控制台中 input Ctrl + Shift + D，然后单击 gear 图标以配置调试器。
在 launch.json 文件中添加以下代码：
-
---------- --------
----------------- -
-
------- -------
------- ------ ------------
---------- ---------
-------------- ------------ ----- --------------------
------- --------------------------------
------------- -----
------ ---------------------
----------- -----------
-
-
-在这个例子中，我们将使用 ts-node/register 作为运行时参数。
- 在文件中添加断点，然后开始调试
在 index.ts 文件的行号左侧单击即可添加断点。
按 F5 开始调试应用程序。
现在，您应该看到 VSCode 中的调试器已经启动，应用程序也已经停止在添加的断点位置。
在这种情况下，我们可以通过单击 step over 按钮从一行到另一行执行代码，或者通过 watch 窗口查看当前变量的值。
TypeScript 调试技巧
在调试 TypeScript 应用程序时，有一些技巧和工具可以提高您的效率。下面列出了一些实用的技巧：
1. 断点
VSCode 允许您添加断点以暂停执行代码。 在调试过程中，您可以单步执行代码，并在每个断点处检查变量的值。单击“F9”以在当前行上设置断点。可以在控制台中按“Ctrl + Shift + D”，然后单击齿轮图标来访问调试器设置。
2. 监视变量
您可以在调试器中监视任何变量的值，即使您没有任何断点。要监视一个变量，请打开 watch 窗口，右键单击变量并选择“添加到监视”。监视变量将在其值更改时更新。
3. 条件断点
条件断点在满足特定条件时暂停代码执行。 创建一个条件断点是很容易的。 单击要添加条件断点的行号，在弹出的上下文菜单中选择Add Conditional Breakpoint。 可以指定在继续以前，程序需要满足的任何条件。
4. 控制台日志
通过在代码中添加 console.log() 输出，可以简单地查找程序中的错误。在 VSCode 中启用控制台输出的最简单方法是打开 launch.json 文件，并启用 console 栏，例如：
-
---------- --------
----------------- -
-
------- -------
------- ------ ------------
---------- ---------
-------------- ------------ ----- --------------------
------- --------------------------------
------------- -----
------ ---------------------
----------- ------------
---------- --------------------
-
-
-5. SourceMap Explorer
SourceMap Explorer 是一个帮助 TypeScript 开发者映射和理解正在生成的 JavaScript 代码的工具。 它生成一个内存映像，帮助您理解哪些代码来自哪个 TypeScript 文件。 可以使用以下方法安装：
--- ------- -------------------
通过运行以下命令，可以生成您的代码的可视化图表示形式：
--- ------------------- --------
结论
在本文中，我们了解了如何在 Node.js 中使用 TypeScript 进行调试。我们还探讨了一些实用的技巧和工具，使您能够更有效地调试 TypeScript 应用程序。 总之，TypeScript 的出现为 Node.js 的开发带来了优势，尤其是对于更大的项目。 它提供了可读性更好的代码和更好的开发工具支持，使开发更加方便。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fcf56a4471362601751276