如何在 VSCode 中调试 Nodejs、TypeScript 代码

祝你有美好的一天😃！

大家好！祝大家有美好的一天！

我在项目中使用TypeScript已经快两年了。刚开始在VSCode中使用TypeScript时遇到的一个问题是如何调试它。没错，TypeScript编译后会生成普通的JavaScript代码，我们可以调试输出的JavaScript代码，但我不想这么做。而且输出的JavaScript代码虽然比较老，但也不是那么老，这取决于你的配置。所以，我想向你展示如何在VSCode中调试TypeScript代码。

另外我想提一下，TypeScript是目前最流行的编程语言之一。可以看看这些链接。

JS 现状 - JavaScript 风格
Stack Overflow 调查 - 2019
RedMonk - 大多数编程语言 - 2020 年 1 月

那么，让我们开始编码吧。

首先，你需要在电脑上安装Node.js和VSCode ，以及TypeScript。链接如下。

Node.js
VSCode

要安装TypeScript ，请在​​安装Nodejs后运行此命令。

npm i -g typescript

全局安装TypeScript后，从桌面运行这些命令。

 md typescript-debug && cd typescript-debug && code .

基本上，这意味着我们正在创建一个名为typescript-debug的目录（ md ） ，并将当前目录（cd）桌面更改为typescript-debug，然后使用（code .）命令在typescript-debug目录中打开VSCode 。

在目录中，运行这些命令。

 npm init --y && tsc --init

这些命令的含义是初始化一个 Node 项目并使用默认配置（npm init --y）并且我们将在这个项目中使用 TypeScript（tsc --init）。

最后，（请耐心等待）我们将使用这些命令安装express和express模块的类型定义。

  npm i -P express && npm i -D @types/express

npm i是npm install的别名。-P表示该包是我们项目中的一个依赖项， -D表示该包是我们项目中的一个开发依赖项。

我们的package.json文件。

{
  "name": "typescript-debug",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {},
  "scripts": {
    "start": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

我们的tsconfig.json文件。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "ES2015",
      "DOM"
    ],
    "sourceMap": true,
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "noEmitOnError": true,
    "watch": true
  },
  "exclude": [
    "node_modules"
  ]
}

好的，我将解释tsconfig.json配置中最重要的部分。

exclude - 我们不想编译的文件或目录。在这个例子中，我们不想将node_modules文件夹中的 typescript 文件编译为 javascript。

目标——我们的 javascript 输出代码的目标版本。

lib - 这是我们将在 TypeScript 代码和编译中使用的辅助库的列表。

sourceMap - 一个布尔值，指示我们是否需要为每个 TypeScript 文件提供一个源映射文件。

outDir——我们的 javascript 输出代码的路径或文件夹名称。

rootDir——我们的 TypeScript 文件的根目录。

strict - 一个布尔值，指示我们是否希望在 TypeScript 代码中进行严格检查。

esModuleInterop - 这个选项需要更多解释。所以我只举个例子。这是一个布尔值。

如果我们将其设置为false。我们的导入语句将会像这样。

import * as express from 'express';

如果我们将其设置为true。我们的导入语句将会像这样。

import express from 'express';

欲了解更多详细信息，请阅读此文。

noEmitOnError - 一个布尔值，指示如果类型检查中发生错误，
将不会发出或编译 javascript 代码。

watch - 一个布尔值，表示编译器是否以监视模式运行。如果rootDir 目录下有任何文件发生更改，编译器就会自动编译新文件。

.vscode文件夹中的launch.json文件。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/app.ts",
            "sourceMaps": true,
            "trace": "all",
            "outFiles": [
                "${workspaceFolder}/build/**/*.js"
            ]
        }
    ]
}

最后，src文件夹中的app.ts文件。

import express, { Request, Response } from 'express';

const app: express.Application = express();
const port: number = 3000;


app.get('/', (req: Request, res: Response) => {
    res.send('Hello World');
});


app.get('/:name', (req: Request, res: Response) => {
    res.send(`Hello ${req.param('name', 'Mark')}`);
});


app.listen(port, () => {
    console.log(`Server listening at port: ${port}`);
});

启动调试服务器之前，请在app.ts文件的任意位置设置断点，然后运行​​npm start命令启动TypeScript 编译服务器。之后，按F5键打开浏览器，访问http://localhost:3000或http://localhost:3000/anna。如果服务器正常运行并且通过了断点，那么很好；但如果没有，那么可能是你的配置出了问题，请按照上述说明重新检查你遗漏的内容。

顺便说一句，我还没提到调试 TypeScript 代码最重要的工具——Source Maps。我们生产环境中的大多数代码（JS/CSS）都会被合并和压缩，这样可以显著减少资源文件的大小，并减少生产环境中的文件数量，从而提升网站的加载速度。但是，在压缩后的代码中进行调试非常困难，抱歉，“困难”这个词用得比较委婉，实际上根本不可能。这时，Source Maps就派上用场了。简单来说，Source Maps是一个将压缩/转换后的源代码映射到原始源代码的文件。这对我们开发人员来说非常有帮助，因为我们可以使用原始代码来调试压缩后的代码。Source Maps真的非常棒。

感谢大家阅读这篇文章。

祝你有美好的一天😃！