tRPC库简介及其在演示项目中的应用解析("tRPC库入门指南及演示项目实战应用解析")

原创

ithorizon 6个月前 (10-19) 阅读数 26 #后端开发

tRPC库入门指南及演示项目实战应用解析

一、tRPC库简介

tRPC（TypeScript Remote Procedure Call）是一个用于在客户端和服务器之间进行数据传输的库。它基于TypeScript，旨在提供一种易懂、高效且类型可靠的方法来实现远程过程调用。tRPC库的核心优势在于它的类型可靠性和易用性，允许开发者在编写代码时能够享受到类型检查的便利，降低不正确和调试时间。

二、tRPC库的核心特性

类型可靠：利用TypeScript的类型系统，确保数据传输的正确性。

易懂易用：通过简洁的API和自动生成客户端代码，简化开发流程。

高性能：基于HTTP协议，拥护WebSockets和JSONRPC，满足不同场景需求。

可扩展性：拥护自定义数据类型和中间件，便于功能扩展。

三、tRPC库在演示项目中的应用

下面我们将通过一个易懂的演示项目来解析tRPC库在实际开发中的应用。

3.1 演示项目概述

本次演示项目为一个易懂的博客系统，包含以下功能：

获取文章列表。

获取单篇文章详情。

创建新文章。

删除文章。

3.2 环境搭建

首先，我们需要搭建一个Node.js项目环境，并安装相关依赖性。

mkdir trpc-blog

cd trpc-blog

npm init -y

npm install trpc express

3.3 服务器端代码编写

接下来，我们编写服务器端代码。首先，创建一个易懂的Express服务器，并使用tRPC库来定义API。


// server.js
const express = require('express');
const { createRouter } = require('@trpc/server');
const { z } = require('zod');
const app = express();
const port = 3000;
const appRouter = createRouter()
    .query('getPosts', {
        resolve() {
            // 模拟数据库查询
            return [
                { id: 1, title: 'Introduction to tRPC', content: '...' },
                { id: 2, title: 'TypeScript Basics', content: '...' },
            ];
        },
    })
    .query('getPostById', {
        input: z.object({
            id: z.number(),
        }),
        resolve({ input }) {
            // 模拟结合ID查询文章
            return { id: input.id, title: 'TypeScript Basics', content: '...' };
        },
    })
    .mutation('createPost', {
        input: z.object({
            title: z.string(),
            content: z.string(),
        }),
        resolve({ input }) {
            // 模拟创建文章
            return { id: 3, ...input };
        },
    })
    .mutation('deletePost', {
        input: z.object({
            id: z.number(),
        }),
        resolve({ input }) {
            // 模拟删除文章
            return { id: input.id };
        },
    });
app.use('/trpc', appRouter);
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

3.4 客户端代码编写

接下来，我们编写客户端代码。首先，我们需要创建一个客户端实例，并使用服务器端定义的API。


// client.js
const { createClient } = require('@trpc/client');
const { httpBatchLink } = require('@trpc/client/links/httpBatchLink');
const wsLink = require('@trpc/client/links/wsLink');
const trpc = createClient({
    links: [
        httpBatchLink({
            url: 'http://localhost:3000/trpc',
        }),
        // 可以选择使用WebSockets
        // wsLink({
        //     url: 'ws://localhost:3000/trpc',
        // }),
    ],
});
async function main() {
    // 获取文章列表
    const posts = await trpc.getPosts.query();
    console.log('Posts:', posts);
    // 获取单篇文章详情
    const post = await trpc.getPostById.query({ id: 1 });
    console.log('Post:', post);
    // 创建新文章
    const newPost = await trpc.createPost.mutation({ title: 'New Post', content: 'Content of new post' });
    console.log('New Post:', newPost);
    // 删除文章
    const deletedPost = await trpc.deletePost.mutation({ id: 1 });
    console.log('Deleted Post:', deletedPost);
}
main().catch(e => {
    console.error(e);
});