## 概述

在一台新的 Windows 电脑搭建常规的前端开发环境大致包含以下几个步骤：

1. 下载并安装需要的软件：
   1. IDE (VS Code, IntelliJ IDEA, 微信开发者工具等)；
   2. 开发可能需要的工具（Git, Chrome, Postman, Docker, Nginx, Charles 等）；
2. 完成这些软件的配置，达到能够直接使用的程度：
   1. 软件本身的快捷键、使用配置；
   2. 软件内部的插件安装和配置；
3. 为了便于使用或者能直接在命令行工具执行某些命令，可能需要自行配置相关软件的环境变量：
   1. 将命令可执行文件的所在目录（一般为某个软件的安装目录），添加到环境变量的`PATH`中；
   2. 为部分软件增加特定的环境变量，并在`PATH`中使用（如`JAVA_HOME`, `PNPM_HOME`）。

下面将介绍常用的一些前端软件/工具，由于开发模式、开发环境的不同，需要安装和配置的工具也不同，这里只介绍比较常用的一些软件和工具。

## IDE

### VS Code

[官方下载页面](https://code.visualstudio.com/Download)

#### 安装

进入页面后，**点击相应平台**即可下载最新版，如果需要下载旧版本的安装包，可以将页面滚动到底部，找到位于底部栏上方的小字：**Get previous versions**

![下载 VS Code](https://cdn.cesarlai.com/images/1694877791269_ad61bac7413de661.png!blogbanner)

通过官方的链接进行下载时，由于服务器在国外，在不能科学上网的环境下进行下载，有时候下载速度会非常慢，甚至会下载失败。
为了能快速下载，可以使用安装包在国内的镜像地址：`vscode.cdn.azure.cn`
在点击官网的下载按钮进行下载时，会跳转到这样的地址：
`https://az764295.vo.msecnd.net/stable/8b617bd08fd9e3fc94d14adb8d358b56e3f72314/VSCodeUserSetup-x64-1.82.0.exe`
只需要将官方的`az764295.vo.msecnd.net`域名换成`vscode.cdn.azure.cn`，再粘贴到浏览器进行下载即可。
下载完成后，只需要按照安装程序的流程进行安装即可。

#### 推荐插件

安装完成后，我们可以安装开发需要用到的 VS Code 插件，这里推荐几款常用的插件：

- GitLens - 能够在代码中看到每一行的提交时间
- Volar - Vue 开发插件
- ESLint - 为 VS Code 提供 ESLint 功能
- Prettier - 为 VS Code 提供基于 Prettier 的代码格式化功能
- Docker - 便于在 VS Code 中管理 Docker
- Markdown All in One - Markdown 写作插件
- markdownlint - 为 Markdown 提供语法校验功能
- Material Icon Theme - 为各类文件提供扁平化的图标

#### 注意事项

需要注意的是，如果 VS Code 和 Node 环境都配置完成，在`cmd`运行`node`命令没有问题，但在 VS Code 无法运行`node`命令，会报错`'node' 命令无法运行`。

解决办法：
右键点击 VS Code ，选择属性，点击安全 > 兼容性，勾选**以管理员身份运行此程序**。

![VS Code 属性设置](https://cdn.cesarlai.com/images/1694877791455_594e3da9d2d52da0.png!blogbanner)

### 微信开发者工具

[官方下载页面](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

进入页面后，选择对应的平台下载安装包，根据提示安装完成后，即可使用。

## 语言环境

### Node

[官方下载页面](https://nodejs.org/en/download)

如果没有使用多版本 Node 的需求，可以直接进入官方的下载页面，选择需要的版本进行下载，下载时建议选择安装程序，会自动安装以及配置 Node 环境变量。

如果有使用多版本 Node 的需求（需要开发多个项目，每个项目使用的 Node 版本不一致，特别是跨了大版本），建议使用 NVM 对 Node 进行安装和管理。

### NVM

[NVM Windows GitHub 发行版下载地址](https://github.com/coreybutler/nvm-windows/releases)
NVM 是一个 Node 多版本管理工具，能够下载不同的 Node 版本，并能为不同的版本增加便于自己记忆的别名，便于我们快速切换和使用不同版本的 Node 环境。

![NVM 产物](https://cdn.cesarlai.com/images/1694877791328_177ee04419f40841.png!blogbanner)

点击上方的下载地址，可以看到所有的发行版，每个发行版下方都会有产物列表，提供了不同平台的不同形式的产物。这里比较推荐使用 nvm-setup.exe，这是一个安装程序，会自动安装软件并配置环境变量，安装完成后无需进行其他配置。

NVM 的基本实现思路是，在其安装目录下存放所有下载的 Node 版本产物，并为当前使用的 Node 版本的目录设置**快捷方式**，并放置在一个固定的目录，一般为`C:\Program Files\nodejs`，这个目录会单独配置在名为`NVM_SYMLINK`的环境变量中。

![NVM 安装目录](https://cdn.cesarlai.com/images/1694877791536_41a6a93e98bb571f.png!blogbanner)

![当前应用 Node 版本的安装目录快捷方式](https://cdn.cesarlai.com/images/1694877791220_788296606de30d7b.png!blogbanner)

由于在命令行工具使用的`node`命令来自于环境变量中配置的 Node 的安装目录（也就是上方的`NVM_SYMLINK`），因此这个环境变量对应的快捷方式指向哪个版本的 `Node`, `node`命令就是哪个版本。
除此之外，NVM 的安装目录也配置在`NVM_HOME`这个环境变量中，因此在完成 NVM 的安装和配置后，可以检查一下环境变量是否配置正确。

![NVM 环境变量配置](https://cdn.cesarlai.com/images/1694877791271_ae505249f8ec9961.png!blogbanner)

### NRM

nrm 是一个 Node 注册表管理工具，允许你随时切换到特定的 Node 注册表（例如 npm 官方注册表、淘宝注册表等）并进行 npm 包的安装和上传。
这个工具不需要下载安装包，只需要在安装完 Node 后，执行以下命令安装即可。

```shell
# 全局安装 nrm
npm install --global nrm

# 查看当前添加的所有注册表，* 表示当前正在使用该注册表
nrm ls
#   npm -------- https://registry.npmjs.org/
#   yarn ------- https://registry.yarnpkg.com/
#   cnpm ------- http://r.cnpmjs.org/
# * taobao ----- https://registry.npmmirror.com/

# 使用淘宝注册表
nrm use taobao
```

### Python

[官方下载页面](https://www.python.org/downloads/)

许多前端项目使用了`sass`语法去实现样式，而早期的`sass`项目，大部分都使用了`node-sass`作为`sass`的编译工具，这个工具在`Windows`的版本内部使用了`node-gyp`，而`node-gyp`依赖了`Python`和`Windows`平台的`Windows Build Tool`。
因此如果需要使用`node-sass`，就需要安装上述的程序（建议安装`Python 2.6.x/2.7.x`）。

这里有两种方式进行安装：

1. `Windows`平台中每个版本的`Node`都内置了`install_tools.bat`脚本用于安装`Python`和`Windows Build Tool`，因此只需要进入某个版本的`Node`安装目录并执行该脚本即可**（推荐）**；
2. 分别安装`Python`和`Windows Build Tool`，`Python`可点击上面的官方下载页面进行安装，`Windows Build Tool`可以使用 [windows-build-tools](https://github.com/felixrieseberg/windows-build-tools) 进行安装。

安装完需要检查一下环境变量中是否包含`PYTHON_HOME`，以及`PATH`变量中，是否包含`Python`的安装目录（无论是直接写入完整地址还是引用自定义的环境变量）。

## 浏览器

### Chrome

[Chrome 官方下载地址](https://www.google.cn/chrome/index.html)

虽然开发前端项目用什么浏览器都可以，但是 Chrome 相较于其他浏览器，具有以下优势：

1. 性能优化的较好，开启较多的页面都不会卡顿；
2. 提供了多种分析工具，便于开发时调试代码、分析代码的执行流程和性能表现；
3. 拥有丰富的插件生态。

下面推荐一些开发常用的 Chrome 插件：

- **React Developer Tools** - React 开发工具
- **Redux DevTools** - Redux 开发工具
- **Vue.js devtools** - Vue 开发工具
- **Allow CORS: Access-Control-Allow-Origin** - 浏览器跨域调试插件
- **Monica** - 在浏览器使用微软 Monica
- **ChatGPT for Google** - 在浏览器使用 ChatGPT
- **JSON Formatter** - JSON 格式化插件
- **Markdown Nice** - Markdown 在线编辑插件

## 开发工具

### Git

[Git 官方下载地址](https://git-scm.com/downloads)

### Postman

[Postman 官方下载地址](https://www.postman.com/downloads/)

> Postman 需要登录才能使用，如果是使用 Google 账号登录，需要科学上网。

## 容器化/网关

### Docker

[Docker 官方下载地址](https://www.docker.com/)

下载完安装程序并按流程进行安装后，还需要执行以下步骤：

1. Docker Desktop 在 Windows 下使用需要依赖`.NET Framework`和`Hyper-V`，可以在 **Windows 功能**上启用相关功能：

![Hyper-V 缺失](https://cdn.cesarlai.com/images/1694877791579_17d5eb8e7e25cafe.png!blogbanner)

![配置 Hyper-V](https://cdn.cesarlai.com/images/1694877791240_316624e3769038ea.png!blogbanner)

2. Windows 下的`Docker`依赖`WSL`，如果 WSL 的版本较低，需要执行命令进行更新：

![WSL 版本较低](https://cdn.cesarlai.com/images/1694877791250_a577ec79f1afd6c3.png!blogbanner)

```shell
wsl --update
```

![更新 WSL 版本](https://cdn.cesarlai.com/images/1694877791249_383bf60c8c4437aa.png!blogbanner)

### Nginx

[Nginx 官方下载地址](http://nginx.org/en/download.html)

选择对应版本进行下载，下载压缩包后需要解压，解压后将文件夹移动到存放的目录，最后将 Nginx 的安装目录添加到环境变量。

## 抓包

抓包是一个在移动端开发（小程序、APP）中，比较常见的调试/排查问题的手段，通过抓包软件去拦截请求，从而了解客户端的请求细节。

### Charles

[Charles 官方下载地址](https://www.charlesproxy.com/download/)


搭建开发环境-Windows

## 前言

目前 TypeScript 已广泛应用于前端的各类项目中，其类型声明以及编码、编译阶段的类型推断，帮助了开发者在运行应用之前理清数据流转过程中的类型兼容性和逻辑正确性。

除此之外，越是大型的项目，项目的分层程度以及项目结构的复杂度就越高，在这个场景下，使用传统的相对路径来导入模块即繁琐又费时，从整体的代码来看也不够简洁。而 TypeScript 的 [Path Mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) 配置解决了这类问题。

```json
{
  "compilerOptions": {
    // 将 tsconfig.json 所在的目录作为根目录
    // 下面配置的路径别名，都是根目录的相对路径
    "baseUrl": ".",
    // 路径别名配置
    "paths": {
      "@commands/*": [
        "commands/*"
      ],
      "@actions/*": [
        "actions/*"
      ],
      "@libs/*": [
        "libs/*"
      ]
    }
  }
}
```

在实际开发中，由于 TypeScript 的 Path Mapping 依赖于打包工具（webpack, rollup等）的实现，因此在不同打包环境下使用这一特性，除了配置 tsconfig.json 之外，还需要进行相对应的其他配置。下面就针对几个主流的打包工具，分享 Path Mapping 的配置流程。

## 在不同场景下编译 TypeScript

### 使用 tsc 编译

[tsc CLI](https://www.typescriptlang.org/docs/handbook/compiler-options.html) 是 TypeScript 官方提供的编译工具，可在 tsconfig.json 文件配置完成后，通过执行 tsc 的相关命令，将当前项目的 TypeScript 代码直接编译成特定模块（CommonJS, ES5+, AMD, UMD, System等）的特定语法代码（ES5+）。一般在开发命令行工具、Node Server 等在 Node 环境运行的项目时，可以直接使用 tsc CLI 编译项目。

```bash
# 默认使用当前目录下的 tsconfig.json 编译项目
tsc
# 使用指定的配置文件编译项目
tsc -p tsconfig.prod.json
```

遗憾的是，通过官方的 tsc CLI 对项目进行编译，配置的路径别名会原封不动地输出到编译产物中，并没有转换成真正的相对路径。

!["源代码"](https://cdn.cesarlai.com/images/1662989823360_945357cd.png!blogbanner)

!["编译后的代码"](https://cdn.cesarlai.com/images/1662989770779_945357cd.png!blogbanner)

若此时执行代码，代码会报错，原因是**找不到路径别名指定的模块**。

`Error: Cannot find module '@commands'`

针对这个问题，推荐两个不同思路的解决方案：

[**tsc-alias**](https://github.com/justkey007/tsc-alias)
通过执行 `tsc-alias` 命令，根据 tsconfig.json 的配置，把编译产物中所有使用到的路径别名，替换为相对应的相对路径。

```bash
tsc && tsc-alias
```

[**tsconfig-paths**](https://github.com/dividab/tsconfig-paths)
在代码运行时，根据 tsconfig.json 的配置，解析导入模块的路径。

```bash
ts-node -r tsconfig-paths/register -P tsconfig.json
```

### 使用 webpack 编译

[webpack](https://webpack.js.org/) 是一个现代 JS 程序打包器，能够将应用中的不同资源作为不同的模块进行处理。无论是 Web 项目还是 Node 项目，都可以使用 webpack 进行打包。

当然，webpack 也支持 TypeScript，目前 webpack 常见的编译 TypeScript 方式有两种：

- [ts-loader](https://github.com/TypeStrong/ts-loader)
- [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)

由于 webpack 存在独立于 TypeScript 之外的路径别名机制，无论使用哪一种方式配置 TypeScript 解析规则，为了让 tsconfig.json 配置的路径别名，能在打包后生效，需要在 webpack 重新配置一遍。

```javascript
const CONTEXT_PATH = path.resolve(__dirname, '../')
const ENTRY_PATH = path.resolve(CONTEXT_PATH, 'src')
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  context: CONTEXT_PATH,
  target: 'web',
  resolve: {
    // 配置代码中的路径别名
    // 配置完成后，@/utils 等价于 src 下的 utils 目录
    alias: {
      '@': ENTRY_PATH
    },
    // ...
  },
  // ...
}

```

在这种情况下，
tsconfig.json 配置的路径别名作用：

1. 开发阶段路径别名配置生效，并能通过 TS 编译器的语法检查；
1. 开发阶段导入模块时，编辑器的智能提示生效；

webpack 配置的别名作用：

1. 开发阶段通过 webpack 编译检查；
1. 打包时，将代码中的别名替换为模块的相对路径；

### 使用 rollup 编译

rollup 也是一个现代 JS 程序打包器，它的 **Tree-Shaking**特性使得其在 lib 项目打包上有较大优势，当然也可以构建应用程序。

在 rollup 打包一个 TypeScript 项目，通常需要安装 [@rollup/plugin-typescript]() 插件，并在 rollup 的配置文件对该插件进行配置。但与 webpack 类似，仅仅是完整这个步骤，打包项目时并不会转换 tsconfig.json 中的路径别名，因此还需要进行以下操作：

1. 在 rollup 配置文件中，配置路径别名；
1. 安装 [ttypescript](https://github.com/cevek/ttypescript) ，并在配置 @rollup/plugin-typescript 插件时使用（由于 TypeScript 在打包时，默认不会读取 tsconfig.json 中配置的 plugins ，而 ttypescript 解决了这个问题）；
1. 安装 [typescript-transform-paths](https://github.com/LeDDGroup/typescript-transform-paths) ，并在 tsconfig.json 的 plugins 字段中使用，声明在输出类型声明文件**（.d.ts 文件）**后，将这些文件中的路径别名进行转换（如果打包产物需要生成类型声明文件，例如 lib 模块，并且在代码中又通过路径别名导入了部分文件定义的类型，这时候生成的类型声明文件会保留 import 语句，并且导入的路径别名没有被转换，这会导致需要导入的目标类型无法被解析，从而使这部分类型定义丢失，在使用时没有类型推断和提示）。

```javascript
//...
import ttypescript from 'ttypescript'
import rollupTypescript from '@rollup/plugin-typescript'
import packageJson from '../package.json'

const ROOT_PATH = path.resolve(__dirname, '../')

export default {
  plugins: [
    // ...
    rollupTypescript({
      declaration: true,
      declarationDir: '.',
      tsconfig: path.resolve(ROOT_PATH, 'tsconfig.json'),
      // 使用 ttypescript 作为 TypeScript 编译器
      typescript: ttypescript,
      outputToFilesystem: true
    })
  ],
  external: ['fs', 'path', 'axios', 'react'],
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true
    }
  ]
}
```

```json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "outDir": ".",
    "plugins": [
      {
        "transform": "typescript-transform-paths",
        "afterDeclarations": true
      }
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "test/**/*.ts",
    "test/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## 总结

一方面，TypeScript 的编译实现并不会读取 tsconfig.json 的 Path Mapping 配置，需要开发者手动适配；
另一方面，像 webpack、rollup 等打包器有自己的路径别名解析机制（意味着 JS 也可以借助它们实现 Path Mapping），因此在使用它们打包 TypeScript 项目时，需要考虑到打包器本身的路径别名配置是否完成，配置解析规则是否与 tsconfig.json 中配置的相同；
最后，对于 lib 性质的 TypeScript 项目，需要考虑打包产物的类型声明文件是否已转换路径别名，使用者在使用该项目的发布产物时，是否能正确查看并使用所有 API 的类型定义。


TypeScript 编译实践-路径别名

> RESTful 是一种网络应用程序的设计风格和开发方式，基于 HTTP ，可以使用 XML 格式定义或 JSON 格式定义。

## 概述

对于一个服务器端应用而言，与客户端最常见的通信方式就是：
以 HTTP 资源的方式，暴露一个个具有不同职责的接口，客户端发送 HTTP 请求访问这些接口，从而与服务器端完成通信。而 RESTful 的规范，使得接口的定义更清晰，职责更明确。

## 概念说明

在介绍如何定义 RESTful 接口前，需要先简单介绍几个概念：

- Nest Module
- Nest Controller

### Nest Module

在 Nest 中，一个应用根据功能/职责的不同，将划分为多个相对独立的模块。这些相对独立的功能模块都注册在应用模块上，主要的功能实现都在各自的模块内部完成，模块与模块之间也可互相引用。
详情参考官网介绍：[模块](https://docs.nestjs.com/modules)。

![Nest 模块关系](https://cdn.cesarlai.com/images/1647686662164_4bfb6615.png!blogimage)

### Nest Controller

而 Nest 中的控制器，属于模块的一部分，为了使控制器生效，需要在模块上进行注册。只有当控制器在当前模块完成注册，并且当前模块在应用模块上完成注册，控制器才算是真正生效。

当我们需要创建与用户相关的 `UserController` 时，只需要在 `UserModule` 内部的目录中创建 `user.controller.ts`，

## 创建 User 模块

下面创建一个 User 模块，用于实现与用户操作相关的功能。

可以是手动创建，也可以使用命令创建

```typescript
nest g module user
```

一个模块，至少包含一个 `*.module.ts` 文件，用于定义模块

```typescript
/**
 * user/user.module.ts
 */

import { Module } from "@nestjs/common";

@Module({
  imports: [],
  controllers: [],
  providers: [],
  exports: [],
})
export class UserModule {}
```

在这个文件里，可以注册控制器，注册 Provider，可以导入其他模块，也可以导出 Provider 给其他模块使用。
关于 Provider 的概念，可以参考 [Provider](https://docs.nestjs.com/providers) 。

## 实现 RESTful 接口

### Controller

为了实现与 User 相关的接口，需要在 user 目录中，创建 `user.controller.ts` 文件。

```typescript
/**
 * user/user.controller.ts
 */

import { Controller, Get } from "@nestjs/common";

@Controller("user")
export class UserController {
  constructor() {}

  @Get()
  index(): string {
    return "/User";
  }
}
```

Nest 与其他服务器端框架一样，支持 AOP 编程思想，其提供了大量有用的装饰器，方便灵活的应用一些功能。

在 Nest 中，`@Controller`装饰器用于修饰一个控制器 class 类，可以将控制器的根路由作为参数，传递到装饰器当中，不传默认为 `/`，意味着根路由。在上面的例子中，就定义了一个路径为 `/user` 的控制器。

### Get

在控制器当中，为了标识某一个路由方法使用的 HTTP 方法，可以使用同名的装饰器对路由方法进行修饰。与`@Controller`类似，HTTP 方法装饰器也可以定义路由的路径。在上面的例子中，index 方法就是一个使用了 HTTP GET 方法的路由，路由的路径为 `/user`，返回的内容是 **/User** 字符串。

![GET 请求示例](https://cdn.cesarlai.com/images/1647686730658_4bfb6615.png!blogimage)

### Req/Res

为了获取请求和响应信息，可以使用`@Req`和`@Res`装饰器。

```typescript
import { Controller, Get, Req, Res } from "@nestjs/common";
import { Request, Response } from "express";

@Controller("user")
export class UserController {
  constructor() {}

  @Get()
  index(@Req() req: Request, @Res() res: Response): string {
    return "/User";
  }
}
```

Nest 本身是一个将底层抽象的框架，但由于默认使用 Express 作为底层 HTTP 服务实现，因此通过装饰器获取的 `req` 和 `res` 对象，实际上是 Express 的 Request 和 Response 对象。

取到 req 对象后，可以获取与请求相关的信息，例如：

- header
- ip
- body
- cookie
- url
- host

取到 res 对象后，可以根据需要对响应的 body、header、cookie 等内容进行修改，响应的数据也可以是文本、JSON/XML、文件流、HTML 文档等等。

```typescript
// 返回 JSON

@Get('/:id')
getUserById(@Param('id') id: string, @Res() res: Response): Response {
  const user = this.userService.getUserById(Number.parseInt(id));
  // 此处等价于 return res.json(user);
  return res.send(user);
}
```

```typescript
@Get('/:id')
getUserById(@Param('id') id: string, @Res() res: Response): Response {
  const user = this.userService.getUserById(Number.parseInt(id));
  // 设置 Header
  return res.setHeader('user-id', id).send(user);
}
```

### Param/Query

对于一个 RESTful 的路由，通过 URL 传参的方式有两种：

1. 动态路由参数（参数作为路由的一部分）；
1. 跟随在问号后的 query 参数。

在 Nest 中，可以分别使用 `@Param` 和 `@Query` 装饰器获取两种不同的参数。

```typescript
// 使用 @Param 获取动态参数

@Get('/:id')
getUserById(@Param('id') id: string, @Res() res: Response): Response {
  const user = this.userService.getUserById(Number.parseInt(id));
  return res.send(user);
}
```

![GET 动态路由](https://cdn.cesarlai.com/images/1647686784531_4bfb6615.png!blogimage)

```typescript
// 使用 @Query 获取请求参数

@Get('/list')
getUsers(
  @Query('pageIndex') pageIndex: string,
  @Query('pageSize') pageSize: string,
  @Res() res: Response,
): Response {
  const users = this.userService.list({
    pageIndex: Number.parseInt(pageIndex),
    pageSize: Number.parseInt(pageSize),
  });
  return res.send(users);
}
```

![GET 请求使用 query 参数](https://cdn.cesarlai.com/images/1647686840806_4bfb6615.png!blogimage)

### Body

上面的分页接口是使用 GET 方法实现的，下面用 POST 方法实现。

```typescript
@Post('/list')
getUsersWithPost(
  @Body() body: GetUsersWithPostDto,
  @Res() res: Response,
): Response {
  const users = this.userService.list({
    pageIndex: body.pageIndex,
    pageSize: body.pageSize,
  });
  return res.json(users);
}
```

这里的路由地址同样是 list ，由于路由受 **HTTP 方法**和**路由地址**两个条件约束，所以这个路由方法不会与 HTTP 方法为 GET 的路由方法冲突。

为了拿到请求体的内容，可以使用 `@Body` 装饰器（也可以使用 req.body 获取请求体的内容，只是需要自己去解析内容），同时由于 Nest 也可以采用领域驱动模型进行开发，因此可以为请求体定义对应的 DTO。

```typescript
/**
 * user/dto/get-users-with-post.dto.ts
 */

export interface GetUsersWithPostDto {
  pageIndex: number;
  pageSize: number;
}
```

按照 HTTP 规则，除了 POST 方法，PUT 方法也可以使用 `@Body` 装饰器获取请求体，这里就不再演示。

## 相关项目

- [nestjs-examples](https://github.com/CesarLai/nestjs-examples)


Nest实践：RESTful

![NestJS 封面图](https://cdn.cesarlai.com/images/1647692557577_2e7e4a5a.png!blogimage)

> NestJS 是一个可以高效构建可扩展的 NodeJS 服务端应用程序的框架。它使用渐进式的方式进行开发，允许使用 JavaScript 的同时也充分支持 TypeScript ，并且在开发模式上兼容 OOP / FP / FRP 等多种编程范式。总体来说，是一个全面且健壮的 Node 后端框架。

## 前言

随着 NodeJS 的兴起，JavaScript / TypeScript 在各个领域都大放光彩，[React](https://reactjs.org/)、[Vue](https://vuejs.org/)、[React Native](https://reactnative.dev/)、[Weex](http://emas.weex.io/)、[Electron](https://www.electronjs.org/) 等技术分别在 Web 端、移动端和 PC 端有一席之地，甚至于在国内的小程序领域，都有 [uni-app](https://uniapp.dcloud.io/)、[Taro](https://taro.aotu.io/) 等框架占领份额。在大前端时代，JS 已经无所不能了。

**那么在服务器端呢？**

在服务器端领域，纵然有 [Express](https://expressjs.com/) 和 [Koa](https://koajs.com/)，但像 [Spring](https://spring.io/) 那样能够提供丰富的开箱即用的中间件（功能模块），以及兼容多种不同开发模式的服务器端重型框架，在 NodeJS 平台中少之又少，而 [NestJS](https://nestjs.com/) 就是为数不多的企业级服务器端框架之一。

## 与 Express/Koa 的比较

简单来说，Express 和 Koa 更像是基于 Node 原生模块**进行简单包装的 HTTP Server**，大部分功能都是原生 Node 模块提供的，并实现了中间件和路由机制。

至于服务器端通用场景的大部分功能需求（连接/操作数据库、ORM、连接/操作 NoSQL、接入消息队列、AOP 编程模式、Cookie Session 实现、服务端加密、身份验证机制等），这些功能框架官方本身并不提供，相关开源社区提供了部分功能的实现，但在健壮性、扩展性方面表现一般，没有形成一个统一的规范或者风格。

## 搭建开发环境

官方提供了 **@nestjs/cli**脚手架用于创建 NestJS 项目，与其他框架一样，可通过**全局安装**或 **npx 命令直接使用**两种方式使用脚手架，并创建项目。

```shell
# 全局安装脚手架
npm i -g @nestjs/cli
# 创建新项目
nest new nestjs-example
```

```shell
# 临时下载脚手架并创建项目
npx @nestjs/cli new nestjs-example
```

![创建项目过程](https://cdn.cesarlai.com/images/1647692644916_2e7e4a5a.png!blogimage)

安装完成后，项目目录如下

![NestJS 项目目录](https://cdn.cesarlai.com/images/1647692681800_2e7e4a5a.png!blogimage)

## 启动项目

在新项目的 package.json 文件中，默认把常用的命令设置好了。

![NestJS 项目命令](https://cdn.cesarlai.com/images/1647692712180_2e7e4a5a.png!blogimage)

主要命令

| **命令**    | **描述**                                                            |
| ----------- | ------------------------------------------------------------------- |
| prebuild    | 删除构建目录                                                        |
| build       | 构建应用，若构建目录已存在（默认为 dist），会先删除目录，再进行构建 |
| start       | 启动项目（不监听文件修改）                                          |
| start:dev   | 启动项目并监听文件修改                                              |
| start:debug | 使用 debug 模式启动项目，同时监听文件修改                           |
| start:prod  | 启动构建后的应用                                                    |

下面执行 `yarnn start:dev` 启动项目

项目启动时，控制台会输出启动过程、路由配置情况、启动时间、时长、端口号等信息，方便开发者了解服务情况。

![NestJS 控制台输出信息](https://cdn.cesarlai.com/images/1647692756811_2e7e4a5a.png!blogimage)

默认情况下，控制台没有输出服务当前的地址和端口号，如有需要可自行添加。
默认端口号为 3000。

由于项目默认只添加了根路由，因此访问 `http://localhost:3000` 即可。

```typescript
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}
```

![NestJS 启动项目](https://cdn.cesarlai.com/images/1647692798111_2e7e4a5a.png!blogimage)

## 相关项目

- [nestjs-examples](https://github.com/CesarLai/nestjs-examples)


搭建开发环境-Windows

TypeScript 编译实践-路径别名

Nest实践：RESTful

Nest实践：入门