• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

trpc基于typescript的api开放框架

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

trpc 是一个类型安全的api 开发框架,可以利用typescript 强大的类型能力,同时也能实现数据处理的复用,以下是一个参考案例

参考demo

  • server 端代码
    package.json
 
{
  "dependencies": {
    "@trpc/client": "^7.3.3",
    "@trpc/next": "^7.3.3",
    "@trpc/react": "^7.3.3",
    "@trpc/server": "^7.3.3",
    "express": "^4.17.1",
    "node-fetch": "^2.6.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.12",
    "@types/node": "^15.12.4",
    "@types/node-fetch": "^2.5.10"
  },
  "name": "trpc-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

app.ts

// server/index.ts
import * as trpc from '@trpc/server';
 
const appRouter = trpc.router().query('getUser', {
  input: (val: unknown) => {
    if (typeof val === 'string') return val;
    throw new Error(`Invalid input: ${typeof val}`);
  },
  async resolve(req) {
    req.input; // string
    return { id: req.input, name: 'Bilbo' };
  },
});
 
export default appRouter;
export type AppRouter = typeof appRouter;

express 集成

import * as trpcExpress from '@trpc/server/adapters/express';
import * as trpc from '@trpc/server';
 
import appRouter from "./app"
 
import express from "express"
 
const app = express();
 
// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}) // no context
type Context = trpc.inferAsyncReturnType<typeof createContext>;
 
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext: () => null, // no context
  })
);
 
app.listen(4000);
  • client 代码
import type { AppRouter } from './app';
import { createTRPCClient } from '@trpc/client';
import fetch from "node-fetch"
// 此处比较重要
global.fetch = fetch as any;
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:4000/trpc',
});
 
 
(async()=>{
    const bilbo = await client.query('getUser', 'id_bilbo');
    console.log(bilbo)
})()

说明

trpc 是一个很不错的基于typescript 开发api 的框架,而且目前已经提供了比较完备的框架支持(react,next,express)

参考资料

https://trpc.io/
https://github.com/trpc/trpc


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript3.3来了!快看看有什么新功能发布时间:2022-07-18
下一篇:
react项目添加typescript类型定义文件 .d.ts发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap