MERN TypeScript 设置指南

您好，欢迎阅读我的关于使用 TypeScript 设置 MERN 堆栈项目的指南。本指南旨在帮助初学者和经验丰富的开发人员为 MERN 堆栈开发建立功能齐全的开发环境。

现在，让我们开始设置。

要求

• Node.js（推荐版本14或以上）
• MongoDB 数据库或 MongoDB 社区服务器
• 使用以下命令安装 TypeScript：

npm install -g typescript

根

1. 使用以下命令为您的项目创建一个目录：

<span>mkdir my-app</span>

2.导航到目录：

<span>cd my-app</span>

3.运行以下命令来初始化目录中的节点。

说明：此命令初始化一个新的 Node.js 项目并使用默认值创建一个 package.json 文件。

npm init -y

客户

对于客户端，您可以使用 Vite 或 Create React App。以下是两者的说明：

使用Vite

1. 在您的根目录上，键入以下命令：

说明：此命令在名为 client.

的目录中创建一个新的 Vite 应用程序

npx create-vite@latest client

2.您将看到不同的选项，选择React。
3。选择选项：TypeScript SWC.
4。完成后，使用以下命令导航到 client 目录.

<span>cd client</span>

以下命令需要在client目录下运行。

5.进入客户端目录后，运行以下命令安装所有依赖项.

说明：此命令安装 package.json 文件中列出的依赖项。

npm install

6.安装后，使用以下命令导航到项目的根目录：

<span>cd ..</span>

使用 Create React App

1. 在您的根目录上，键入以下命令：

说明：此命令在名为 client.

的目录中创建一个新的 Create React App 应用程序。

npx create-react-app client --template typescript

服务器

1. 在您的根目录上，创建服务器目录。

说明：此命令创建一个名为 server 的新目录。

<span>mkdir server</span>

2.使用以下命令导航到 server 目录：

<span>cd server</span>

以下命令需要在我们创建的服务器目录中运行。

3.运行此命令自动创建 package.json 文件。

npm <span>init -y</span>

4.现在，运行以下命令来安装我们的依赖项。

说明：这些命令为我们的服务器安装必要的依赖项。 cors 用于启用 CORS，dotenv 用于加载环境变量，express 用于构建服务器，mongoose 用于连接 MongoDB。开发依赖项包括 TypeScript 和我们的包的类型定义，以及用于在开发期间运行我们的服务器的 nodemon 和 ts-node。

npm install -g typescript

5.创建一个 .gitignore 文件并向其中添加以下行：

说明：.gitignore 文件指定 Git 应忽略的故意未跟踪的文件。

<span>mkdir my-app</span>

6.现在，让我们设置 TypeScript，创建一个名为 tsconfig.json

的文件

说明：tsconfig.json 文件是 TypeScript 的配置文件。它指定编译项目的根文件和编译器选项。

7. 复制并粘贴以下配置：

<span>cd my-app</span>

8.使用以下命令在服务器目录中创建名为 src 的目录：

npm init -y

以下命令需要在我们创建的 src 目录中运行。

9.创建一个名为 server.ts

的文件

说明：此 server.ts 文件设置一个连接到 MongoDB 数据库并开始侦听指定端口的 Express 服务器。

10。这是 server.ts 文件的基本实现：

npx create-vite@latest client

11。让我们使用以下命令返回到 server 目录：

<span>cd client</span>

说明：该命令将当前目录更改为父目录。

以下内容为服务器目录。

12。现在，让我们转到 服务器目录 中的 package.json 文件。

13。让我们添加一个命令，以便我们可以使用 ts-node 运行 nodemon 进行开发。

14。 复制并粘贴此行到package.json的脚本部分：

npm install

15。完成后，让我们使用以下命令转到根目录：

<span>cd ..</span>

运行我们的项目

以下内容为项目根目录

1. 运行以下命令来同时安装开发依赖。

说明：并发是一个允许您同时（同时）运行多个npm脚本的包。

npx create-react-app client --template typescript

2.导航到根目录中的 package.json 文件。该文件包含有关您的项目及其依赖项的元数据。

3.根据您用于创建客户端的工具（Vite 或 Create React App），复制相应的代码块并将其粘贴到 package.json 文件的脚本部分。

点赞

npm install -g typescript

创建 React 应用

<span>mkdir my-app</span>

4.现在，让我们使用以下命令运行我们的项目：

<span>cd my-app</span>

5.现在，我们的客户端和服务器应该同时运行。您应该在终端中看到以下输出：

npm init -y

以上是MERN TypeScript 设置指南的详细内容。更多信息请关注PHP中文网其他相关文章！