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

Posted TypeScript全栈开发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[全程干货] 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 进行前后端通信，这存在一些痛点。

  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 的协议，从定义、实现到浏览器调用。

协议定义

直接使用 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 具有一些前所未有的强大特性，给您带来极致的开发体验。