React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

如你所见，这个文件结构相对简单。代码编译成纯 JavaScript 后，dist 目录将用作输出文件夹。

我们还有一个  app.ts，它是服务器的入口。控制器、类型和路由也在它们各自以它们命名的的文件夹中。

现在，我们需要配置  tsconfig.json，使编译器运行我们的首选项。

• tsconfig.json

{

“compilerOptions”: {

“target”: “es6”,

“module”: “commonjs”,

“outDir”: “dist/js”,

“rootDir”: “src”,

“strict”: true,

“esModuleInterop”: true,

“forceConsistentCasingInFileNames”: true

},

“include”: [“src/**/*”],

“exclude”: [“src/types/*.ts”, “node_modules”, “.vscode”]

}

这里强调四个主要属性:

outDir: 告诉编译器把编译好的代码放进  dist/js  文件夹

rootDir: 告诉 TypeScript 编译 src 文件夹中的每个 .ts 文件

include: 告诉编译器包含 src 目录和子目录中的文件

exclude: 在编译时会排除数组中的文件或文件夹

现在我们安装依赖项，使项目可以使用 TypeScript。因为默认情况下，这个应用程序会使用 JavaScript。

在 NodeJS 应用程序中有两种使用 TypeScript 的方法，要么在项目中本地安装使用，要么在电脑中全局安装使用。基于个人喜好，我会选择后者。但如果你想，你也可以坚持使用本地安装使用的方式。

现在，让我们在终端上执行以下命令来安装 TypeScript。

yarn add typescript -g

这个  g  标志允许全局安装 TypeScript，这样它就能在计算机任何地方使用。

接下来，为了使用 Express 和 MongoDB，我们安装一些依赖项。

yarn add express cors mongoose

我们还需要安装它们的类型作为开发依赖项，帮助 TypeScript 编译器理解这些包。

yarn add -D @types/node @types/express @types/mongoose @types/cors

现在，TypeScript 不会再对你提示错误——它将使用这些类型来定义我们刚刚安装的库。

我们还需要安装其他依赖项，以便能够编译 TypeScript 代码并同时启动服务器。

yarn add -D concurrently nodemon

有了这些，我们现在就可以更新  package.json  的 scripts 来启动服务器。

• package.json

“scripts”: {

“build”: “tsc”,

“start”: “concurrently “tsc -w” “nodemon dist/js/app.js””

}

concurrently  帮助编译 TypeScript 代码，持续观察变化，同时启动服务器。也就是说，我们现在可以启动服务器了——但是，我们还没有创建一些有意义的东西。所以，让我们在下一节中解决这个问题。

创建 Todo 类型

• types/todo.ts

import { Document } from “mongoose”

export interface ITodo extends Document {

name: string

description: string

status: boolean

}

这里，我们有了继承  mongoose  提供的  Document  类型的 Todo 接口。稍后我们将使用它与 MongoDB 交互。也就是说，我们现在可以定义 Todo 模块。

创建 Todo 模块

• models/todo.ts

import {