📘 مميز

tRPC

نقل الأنواع من الخادم للواجهة (End-to-End Type Safety)

(5/5)
👁️ 6 مشاهدة
📅 02 Jul 2026
⚛️ React 💚 Vue.js 🧡 Svelte 🌐 عام

مستوى الخبرة المطلوب:

⚡ متوسط 🚀 محترف 🏢 مؤسسي
🔗 زيارة الموقع الرسمي
5
تقييم المستخدمين
التصنيف 📘 TypeScript
المشاهدات 6
تاريخ الإضافة 02/07/2026
آخر تحديث 02/07/2026

📖 الوصف

tRPC هو framework لبناء APIs مع type safety كامل من الخادم إلى الواجهة (end-to-end typesafety) بدون الحاجة لتعريف schemas منفصلة أو توليد كود. يستخدم TypeScript type inference لنقل تعريفات الأنواع تلقائياً من الـ Backend إلى الـ Frontend. مع tRPC، عندما تغيّر نوعاً في الـ Backend، يُحدّث تلقائياً ف...

🎯 يستخدم في

مجالات استخدام هذه الأداة

بناء APIs بسرعة مع type safety كامل

تطبيقات full-stack بـ TypeScript

Next.js مع Backend في نفس المستودع

بديل لـ REST/GraphQL في monorepo

تطبيقات تحتاج لتحديثات فورية (real-time) مع RPC pattern

المميزات

أبرز مميزات هذه الأداة

End-to-end type safety بدون code generation

أداء ممتاز – لا serialization overhead

Autocomplete كامل في الـ Frontend

لا حاجة لـ OpenAPI/schema منفصل

React/Next.js integration ممتاز

دعم subscriptions (real-time)

caching مدمج مع TanStack Query

⚠️ العيوب

نقاط يجب مراعاتها

×

يتطلب TypeScript في كلا الطرفين

×

ليس مناسباً لـ public APIs (العملاء يجب أن يستخدموا TypeScript)

×

لا يوجد schema definition language مثل GraphQL

×

مجتمع أصغر مقارنة بـ REST/GraphQL

×

أقل tools و ecosystem

🔄 البدائل

أدوات بديلة يمكنك استخدامها

REST API + OpenAPI
GraphQL + Apollo
RPC + Protocol Buffers

💻 مثال على الاستخدام

كيفية استخدام هذه الأداة

Example Code
// Backend (router)
import { initTRPC } from '@trpc/server';
import { z } from 'zod';

const t = initTRPC.create();

const appRouter = t.router({
  getUser: t.procedure
    .input(z.object({ id: z.string() }))
    .query(async ({ input }) => {
      return await db.user.findUnique({ where: { id: input.id } });
    }),
  createUser: t.procedure
    .input(z.object({ name: z.string(), email: z.string() }))
    .mutation(async ({ input }) => {
      return await db.user.create({ data: input });
    }),
});

// Frontend (React)
import { createTRPCReact } from '@trpc/react-query';
const trpc = createTRPCReact<AppRouter>();

function UserProfile({ id }: { id: string }) {
  const { data: user } = trpc.getUser.useQuery({ id });
  // user is fully typed! ✅
  return <div>{user?.name}</div>;
}

📚 أدوات أخرى في TypeScript

قد يعجبك أيضاً