[全程干货] TSRPC 和 TypeScript 全栈开发实践

vlambda
2021-07-15

[全程干货] TSRPC 和 TypeScript 全栈开发实践

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

TSRPC 是什么

TSRPC 是一个 TypeScript 的 RPC 框架，适用于浏览器 Web 应用、WebSocket 实时应用、NodeJS 微服务等场景。

GitHub：https://github.com/k8w/tsrpc
中文文档：https://tsrpc.cn
视频教程：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 序列化算法

Union Type
Intersection Type
Pick Type
Partial Type
Indexed Access Types
等等
无需任何注解，直接实现将 TypeScript 源码中的类型定义序列化
首个也是目前唯一支持 TypeScript 高级类型的二进制序列化算法，包括：

☎ 多协议

同时支持 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

vlambda博客
学习文章列表