k8w.io
TSRPC 和 TypeScript 全栈开发实践:前后端共享代码 / 运行时类型检测 / 二进制序列化
2021-07-06作者:k8w

使用 TypeScript 同时开发前端和后端项目,跨项目跨端共享代码,近乎零成本的享受到运行时类型检测和二进制序列化的特性。


↑↑↑ 全程 110 分钟干货分享视频 ↑↑↑

TSRPC 是什么

TSRPC 是一个 TypeScript 的 RPC 框架,适用于浏览器 Web 应用、WebSocket 实时应用、NodeJS 微服务等场景。
是目前世界上唯一支持 TypeScript 复杂类型运行时检测和二进制序列化的 RPC 框架

中文文档:https://tsrpc.cn
GitHub:https://github.com/k8w/tsrpc
视频教程:https://www.bilibili.com/video/BV1hM4y1u7B4

目前,大多数项目仍在使用传统的 Restful API 进行前后端通信,这存在一些痛点。

  1. 依赖文档进行协议定义,前后端联调常被低级错误困扰(如字段名大小写错误,字段类型错误等)。
  2. 一些框架虽然实现了协议定义规范,但需要引入 Decorator 或第三方 IDL 语言。
  3. 一些框架虽然实现了类型校验,但无法支持 TypeScript 的高级类型,例如业务中常见的 Union Type
// 用户信息
interface UserInfo {
  // 来源渠道
  from: { type: '老用户邀请', fromUserId: string }
    | { type: '推广链接', url: string }
    | { type: '直接进入' },
  // 注册时间
  createTime: Date
}
  1. JSON 支持的类型有限,例如不支持 ArrayBuffer,实现文件上传会非常麻烦。
  2. 请求和响应都是明文,破解门槛太低,字符串加密方式有限且强度不够。
  3. 等等…

我们无法找到一个能完美解决这些问题的现成框架,于是我们全新设计和创造了 TSRPC

概览

一个名为 Hello 的协议,从定义、实现到浏览器调用。

协议定义

直接使用 typeinterface 定义协议,无需 Decorator 和第三方 IDL 语言。

export interface ReqHello {
  name: string;
}

export interface ResHello {
  reply: string;
}

服务端实现

运行时自动校验类型,请求参数一定类型安全。

import { ApiCall } from "tsrpc";

export async function ApiHello(call: ApiCall<ReqHello, ResHello>) {
  call.succ({
    reply: 'Hello, ' + call.req.name
  });
}

客户端调用

跨项目复用协议定义,全程代码提示,不需要接口文档。

let ret = await client.callApi('Hello', {
    name: 'World'
});
console.log(ret); // { isSucc: true, res: { reply: 'Hello, World' } }

特性

TSRPC 具有一些前所未有的强大特性,给您带来极致的开发体验。

  • 🥤 原汁原味 TypeScript
    • 直接基于 TypeScript typeinterface 定义协议
    • 无需额外注释,无需 Decorator,无需第三方 IDL 语言
  • 👓 自动类型检查
    • 在编译时刻和运行时刻,自动进行输入输出的类型检查
    • 总是类型安全,放心编写业务代码
  • 💾 二进制序列化
    • 比 JSON 更小的传输体积
    • 比 JSON 更多的数据类型:如 Date, ArrayBuffer, Uint8Array
    • 方便地实现二进制加密
  • 🔥 史上最强大的 TypeScript 序列化算法
  • 多协议
    • 同时支持 HTTP / WebSocket
  • 💻 多平台
    • NodeJS / 浏览器 / App / 小程序
  • ⚡️ 高性能
    • 单核单进程 5000+ QPS 吞吐量(测试于 Macbook Air M1, 2020)
    • 单元测试、压力测试、DevOps 方案齐备
    • 经过数个千万用户级项目验证

兼容性

完全可以在 Server 端使用 TSRPC,同时兼容传统前端。

  • 兼容 JSON 形式的 Restful API 调用
    • 可自行使用 XMLHttpRequestfetch 或其它 AJAX 框架以 JSON 方式调用接口
  • 兼容纯 JavaScript 的项目使用
    • 可在纯 JavaScript 项目中使用 TSRPC Client,也能享受类型检查和序列化特性
  • 兼容 Internet Explorer 10 浏览器
    • 浏览器端兼容至 IE 10 ,Chrome 30

运行时类型检测的实现原理

众所周知,TypeScript 的类型检测仅发生在编译时刻,这是因为类型信息(如 typeinterface)会在编译时刻被抹除。而 TSRPC 竟然能在运行时刻也检测这些被抹除的类型信息?
况且 TypeScript 编译器有大几 MB,而 TSRPC 才几十 KB……

其实,这是因为我们遵循 TypeScript 类型系统,独立实现了一套轻量的类型系统,可以在运行时完成类型检测,甚至是二进制序列化。它支持了绝大多数常用的 TypeScript 类型。

支持的类型清单

上手试试

使用 create-tsrpc-app 工具,可以快速创建 TSRPC 项目。

npx create-tsrpc-app@latest

创建过程是交互式的,在菜单上选择相应的配置,即可轻松创建包含前后端的 TSRPC 全栈应用项目。

如果你选择创建 HTTP 短连接服务,则会创建一个留言板的演示项目;如果选择 WebSocket 长连接服务,则会创建一个实时聊天室的演示项目。

参考资料

GitHub:https://github.com/k8w/tsrpc
中文文档:https://tsrpc.cn
视频教程:https://www.bilibili.com/video/BV1hM4y1u7B4

(正文完)
留言(0条)
发表新留言
您的大名:
必填
电子邮箱:
不公开,仅用于向你发送回复