全栈 TypeScript CRUD 框架 Remult

Remult 是一个全栈 CRUD 库，它利用 TypeScript 模型来简化开发，并提供了类型安全的 API 客户端和查询构建器。

在软件开发中，为了确保系统功能正常，必须管理和同步两个数据模型：服务器模型和客户端模型。服务器模型指定数据库结构和 API，而客户端模型定义 API 的传入传出数据。

然而，维护单独的模型集和验证器可能会导致冗余，增加维护开销，以及模型不同步时出错的可能性。

Remult 通过提供一个集成模型来解决这个问题。该模型定义了数据库模式，暴露了简单的 CRUD API，并支持客户端集成，使开发人员能够轻松地查询数据库，并且可以确保类型安全。

Remult 使用装饰器将基本的 JavaScript 类转换为 Remult 实体。开发人员可以向类中添加 Entity 装饰器，并对每个属性应用相关的字段装饰器，从而轻松地完成这项工作。

使用装饰器，Remult 简化了创建实体及相关字段的过程，提高了开发人员的高效。

import { Entity, Fields } from "remult"

@Entity("contacts", {  allowApiCrud: true})

export class Contact {  @Fields.autoIncrement()  id = 0  @Fields.string()  name = ""  @Fields.string()  number = ""}

要开始使用 Remult，请将其与所选服务器上必要的实体一起注册。

幸运的是，Remult 针对几个流行的服务器框架提供了开箱即用的集成，包括 Express、Fastify、Next.js、Nest 和 Koa。

import express from "express";import { remultExpress } from "remult/remult-express";import Contact from "../shared/Contact.ts";

const app = express();

app.use(  remultExpress({    entities: [      Contact    ]  }));

配置完后端和实体后，下一步是将 Remult 与应用程序的前端集成。

幸运的是，Remult 的客户端集成被设计成库无关的。也就是说，它可以使用浏览器 fetch 功能或 Axios 进行操作。

为了说明这一点，请看下面的例子：

import { useEffect, useState } from "react"

import { remult } from "remult"import { Contact } from "./shared/Contact"const contactsRepo = remult.repo(Contact)

export default function App() {  const [contacts, setContacts] = useState<Contact[]>([])

  useEffect(() => {    contactsRepo.find().then(setContact)  }, [])

  return (    <div>      <h1>Contacts</h1>      <ul>        {contacts.map(contact => {          return (            <div key={contact.id}>              {contact.name} | {contact.phone}            </div>          )        })}      </ul>    </div>  )}

从这个例子可以看出，将 Remult 集成到应用程序前端非常简单、灵活。然后，开发人员就可以在整个栈中无缝地利用 Remult 的强大功能了。

Remult 是遵循 MIT 许可的开源软件。欢迎通过 Remult GitHub 存储库做贡献。

原文链接：

https://www.infoq.com/news/2023/05/remult-crud-typescript/

相关阅读：

“TypeScript 不值得！”前端框架 Svelte 作者宣布重构代码，反向迁移到 JavaScript 引争议 (https://www.infoq.cn/article/dDXbcLHT7teNYSPL3sm7 )

三年回顾：JavaScript 与 TypeScript 最新特性汇总 (https://www.infoq.cn/article/SZZal8JbzaFq1O9YejCy )

TypeScript 5.0 现已发布：全新的装饰器，速度、内存和包大小优化 (https://www.infoq.cn/article/wyGETHGV7BlRRkhIzcIF )

声明：本文由 InfoQ 翻译，未经许可禁止转载。

点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！