tRPC End-to-End Type Safe APIs · Урок

Настройка первого проекта tRPC

Пошагово установите tRPC, создайте маршрутизатор и подключите клиент для выполнения самого первого вызова с проверкой типов.

Урок 4 из 413 шагов

«Настройка первого проекта tRPC» — бесплатный урок tRPC End-to-End Type Safe APIs на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения tRPC End-to-End Type Safe APIs, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс tRPC End-to-End Type Safe APIs содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

What We Are Building

You know what tRPC is and why type safety matters. Now you'll set up a real project and make your first end-to-end type-safe call.

Installing the Packages

tRPC ships as separate server and client packages. Install them alongside Zod for validation.

npm install @trpc/server @trpc/client zod

Initializing tRPC

Create one t object with initTRPC.create() — everything else (router, procedures) is built from it.

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

Creating a Router

A router groups procedures. Here's a minimal one exposing a single greeting query.

export const appRouter = router({
  hello: publicProcedure.query(() => {
    return "Hello tRPC";
  }),
});

Exporting the Router Type

The core trick: export only the router's type, not its code. The client learns the full API shape with zero codegen.

export type AppRouter = typeof appRouter;

Serving the Router

Attach your router to an HTTP server using a tRPC adapter — here, the standalone createHTTPServer.

import { createHTTPServer } from "@trpc/server/adapters/standalone";

createHTTPServer({ router: appRouter }).listen(3000);

Creating the Client

The client imports the AppRouter type to unlock full autocomplete and type checking against your server.

import { createTRPCClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "./server";

const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: "http://localhost:3000" })],
});

Making the First Call

Call the procedure as if it were a local typed function — that's the whole point of tRPC.

const greeting = await client.hello.query();
console.log(greeting); // "Hello tRPC"

Type Safety in Action

Type safety in action: rename hello on the server and the client call becomes a compile error instantly — no runtime surprise.

Project Structure

A common project layout: server/trpc.ts for the t object, server/router.ts for procedures, and client/index.ts for the typed client.

Adding Inputs

Most procedures take input. Validate it with Zod and that input type flows to the client automatically.

greet: publicProcedure
  .input(z.object({ name: z.string() }))
  .query(({ input }) => "Hi " + input.name),

Quick Check

Test your setup knowledge.

Ответь в интерактивном уроке

Recap

Recap: you installed the tRPC packages, built a router and exported its type, and made a typed client call — a full end-to-end type-safe pipeline.

Можно начать бесплатно

Изучай tRPC End-to-End Type Safe APIs с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 10
Уроки: 40

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Настройка первого проекта tRPC» бесплатный?

Да — полный текст урока «Настройка первого проекта tRPC» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс tRPC End-to-End Type Safe APIs, подпишись на CoddyKit PRO. Курс tRPC End-to-End Type Safe APIs содержит 4 уроков всего.

Чему я научусь в уроке «Настройка первого проекта tRPC»?

Пошагово установите tRPC, создайте маршрутизатор и подключите клиент для выполнения самого первого вызова с проверкой типов. Ты практикуешь tRPC End-to-End Type Safe APIs с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать tRPC End-to-End Type Safe APIs?

Предыдущий опыт не требуется. tRPC End-to-End Type Safe APIs на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Настройка первого проекта tRPC»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке tRPC End-to-End Type Safe APIs?

Да. Каждый урок tRPC End-to-End Type Safe APIs включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к tRPC End-to-End Type Safe APIs