TSRPC 和 TypeScript 全栈开发实践：前后端共享代码 / 运行时类型检测 / 二进制序列化

使用 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 进行前后端通信，这存在一些痛点。

依赖文档进行协议定义，前后端联调常被低级错误困扰（如字段名大小写错误，字段类型错误等）。
一些框架虽然实现了协议定义规范，但需要引入 Decorator 或第三方 IDL 语言。
一些框架虽然实现了类型校验，但无法支持 TypeScript 的高级类型，例如业务中常见的 Union Type：

// 用户信息
interface UserInfo {
  // 来源渠道
  from: { type: '老用户邀请', fromUserId: string }
    | { type: '推广链接', url: string }
    | { type: '直接进入' },
  // 注册时间
  createTime: Date
}

JSON 支持的类型有限，例如不支持 ArrayBuffer，实现文件上传会非常麻烦。
请求和响应都是明文，破解门槛太低，字符串加密方式有限且强度不够。
等等…

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

概览

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

协议定义

直接使用 type 或 interface 定义协议，无需 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 type 和 interface 定义协议
- 无需额外注释，无需 Decorator，无需第三方 IDL 语言
👓 自动类型检查
- 在编译时刻和运行时刻，自动进行输入输出的类型检查
- 总是类型安全，放心编写业务代码
💾 二进制序列化
- 比 JSON 更小的传输体积
- 比 JSON 更多的数据类型：如 Date, ArrayBuffer, Uint8Array 等
- 方便地实现二进制加密
🔥 史上最强大的 TypeScript 序列化算法
- 无需任何注解，直接实现将 TypeScript 源码中的类型定义序列化
- 首个也是目前唯一支持 TypeScript 高级类型的二进制序列化算法，包括：
  - Union Type
  - Intersection Type
  - Pick Type
  - Partial Type
  - Indexed Access Types
  - 等等
☎ 多协议
- 同时支持 HTTP / WebSocket
💻 多平台
- NodeJS / 浏览器 / App / 小程序
⚡️ 高性能
- 单核单进程 5000+ QPS 吞吐量（测试于 Macbook Air M1, 2020)
- 单元测试、压力测试、DevOps 方案齐备
- 经过数个千万用户级项目验证

兼容性

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

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

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

众所周知，TypeScript 的类型检测仅发生在编译时刻，这是因为类型信息（如 type、interface）会在编译时刻被抹除。而 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

（正文完）