我们知道,如果没有适当的知识和使用打字稿,它可以回到您的旧JS代码,这可能会变得更加困难和开发。
因此,在本教程中,我们将使用Express和Prisma创建一个简单的打字稿项目,该项目将使用单个真实来源的类型,这将是数据库架构。这样我们就可以避免创建不良的TS代码。
我们将制作一个简单的快递项目,并带有将所有者记录为狗的休息端点,端点看起来像:
Owner Endpoints:
[GET] /api/owners
[GET] /api/owners/:id
[GET] /api/owners/:id/dogs
[POST] /api/owners
[PUT] /api/owners/:id
[DELETE] /api/owners/:id
Dog Endpoints:
[GET] /api/dogs
[GET] /api/dogs/:id
[POST] /api/dogs/
[PUT] /api/dogs/:id
[DELETE] /api/dogs/:id
链接到完整的github repo:express_ts
项目设置
让我们从创建一个名为express_ts的工作文件夹并将其初始化为节点项目
> mkdir express_ts
> npm init -y
让我们安装此项目所需的依赖项
//Dev dependencies
> npm i -D typescript @types/express @types/node nodemon prisma ts-node uuid
//Dependencies
> npm i @prisma/client dotenv express yup
现在让我们将项目配置为打字稿项目:
npx tsc -init
这将生成一个名为tsconfig.json
的文件,该文件看起来像这样:
//tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist"
},
"lib": ["es2015"]
}
上面的文件只是告诉打字稿编译器有关项目的元数据以及将用于编译项目的规则。 Know more about tsconfig.json
在 package.json 文件
中的"scripts"
属性中添加以下代码
{
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run build && cp .env ./dist/.env && cd dist/ && node index.js",
"db:pull": "npx prisma db pull",
"build": "npx prisma generate && npx tsc",
"dev": "npx prisma generate && npx nodemon server/index.ts"
}
这将帮助您运行项目,而无需在CLI中输入额外的行!
在您的根文件夹中创建nodemon.json
文件,然后将这些代码添加到文件中:
{
"watch": ["server"],
"ext": "js ts"
}
太好了!现在,您不必每次进行任何更改时都需要重新启动服务器。
您可以查看package.json here以了解有关项目本身的更多信息。
我会假设您已经设置了MySQL或您喜欢的任何数据库,如果您没有设置MySQL和MongoDB,则如何设置MySQL
现在我们需要设置 Prisma 这个项目
npx prisma init
在您的根文件夹中创建一个.env
文件以存储感官凭据,例如服务器PORT
,database connection URL
等。
请参阅此处有关如何将数据库与Prisma连接的,以使本教程简要介绍:
这将创建一个名为 prisma 的文件夹, contaning文件,名为 schema.prisma 。
schema.prisma 将包含Prisma语言中的数据库架构,该模式将用于:
- 从数据库架构生成类型
- 允许Prisma客户端以JS格式创建数据库查询(而无需手动编写数据库查询)
假设您已经创建了数据库表,则需要导入模式数据,以便我们需要在命令下运行:
npx prisma db pull
根据您的数据库模式是什么,您的schema.prisma文件会相应地更改,这是我的schema.prisma的样子:
设置服务器文件夹
创建一个名为server
的文件夹,其中包含这些文件:
- index.ts我们的主要应用程序将运行
- prisma-client.ts用于在单身模式中使用Prisma客户端
-
server-config.ts将数据从
.env
获取到您的项目
单击上面的链接以查看文件的内容。
这就是项目的最终文件结构的样子:
API开发
真棒!现在我们已经完成了项目,现在是时候开始烹饪API!
模型功能
我们将创建PRISMA函数,以供所有者表在表上执行CRUD操作的应用程序
//owner.model.ts
import { prisma } from "../prisma-client";
import { owner, Prisma } from "@prisma/client";
const getOwner = async (owner_id: owner["owner_id"]) => {
const owner = await prisma.owner.findUnique({
where: {
owner_id,
},
});
return owner;
};
我们可以看到owner_id
没有手动编写类型,而是从Prisma的所有者表数据库架构派生。
也是上述函数的返回类型是类型的owner
,它是由databse schema创建的。
我们走了!现在,我们不必经历为每个实体创建类型的过程,现在我们可以从 prisma 本身中导入它们,这使开发经验变得更加容易,更快!
See the rest of the model function: owner.model.ts
typesafe路线
app.get<Params,ResBody,ReqBody,ReqQuery,Locals>('/api/v1/dogs',(req,res) => {})
在每个HTTP方法中,路由器提供5个generic type,可以将自定义类型作为应用程序的类型输入。
这是我们如何键入安全 lander.routes.ts :
//owner.routes.ts
import { Prisma, owner } from "@prisma/client";
ownerRouter.get<never, owner[]>("/", async (req, res, next) => {
//your code implementation
});
让我们理解上述路由器,我们可以看到,在我们写过的通用参数中:
-
never
:这指定请求params
是一个空输入(由Never Keyword指定) -
owner
:这指定了请求的response
类型将为类型为owner
,这再次由prisma type 推出
现在让我们了解一些复杂的路线:
//This route is used to update owner model(PUT request)
ownerRouter.put<
{ owner_id: owner["owner_id"] },
owner,
Prisma.ownerUncheckedUpdateInput
>("/:owner_id", async (req, res, next) => {
//your code implementation
});
上述路线采用以下通用类型:
-
params
:包含owner_id
类型owner["owner_id"]
的对象17 -
response
:所有者对象 -
request body
:它需要Prisma的自定义类型以进行更新输入
太好了,现在我们已经学会了使用数据库架构键入代码,很明显,要创建生产代码,我们需要额外的类型,例如IBaseApiResponse
,IPagination
,请求验证等,但这是另一篇文章。
查看完整项目here。
希望本教程会有所帮助,非常感谢!