Вывод типов на стороне клиента и сервера
Получайте полностью типизированные клиенты без генерации кода
«Вывод типов на стороне клиента и сервера» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.
Совместное использование типа router
client получает безопасность типов, импортируя тип серверного router. Это импорт только типа: серверный код не выполняется в client, через границу передаётся только статический контракт.
import type { AppRouter } from '../server/router';
// type-only import - erased at build timeСоздание типизированного client
Используйте createTRPCClient (или вариант с прокси), параметризованный типом AppRouter. После этого объект client повторяет структуру серверного router и предоставляет полное автодополнение для каждой процедуры.
import { createTRPCClient, httpBatchLink } from '@trpc/client';
const client = createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: 'http://localhost:3000' })],
});Вызов процедур
Вызовы повторяют дерево router. До вложенной процедуры user.byId можно добраться через client.user.byId, а затем вызвать у неё .query или .mutate. Входные и выходные данные типизируются на основе сервера.
const user = await client.user.byId.query({ id: 1 });
// user is typed exactly as the server resolver returnsВыведенные типы входных данных
client знает входные данные каждой процедуры из серверной схемы. Передача структуры неправильной формы вызовет ошибку компиляции ещё до запуска приложения.
await client.user.byId.query({ id: 1 }); // ok
// await client.user.byId.query({ id: 'x' }); // error: id must be number
// await client.user.byId.query({}); // error: id is requiredВыведенные типы выходных данных
Типы возвращаемых значений также передаются обратно. Полученное значение query в точности соответствует тому, что возвращает серверный обработчик, поэтому последующий код полностью проверяется.
const u = await client.user.byId.query({ id: 1 });
const name: string = u.name; // ok if server returns name: stringМутации в client
Мутации вызываются с помощью .mutate. Вывод типов работает так же: входные данные проверяются схемой, а выходные данные типизируются на основе обработчика.
const created = await client.user.create.mutate({ name: 'Bea' });
// created is typed from the create resolver's returnПроцесс вывода типов
Проследите, как передаётся тип: схема zod на сервере выводит тип входных данных, возвращаемое значение обработчика выводит тип выходных данных, typeof appRouter объединяет оба типа в AppRouter, а client отображает этот тип на вызываемые методы. Одно изменение автоматически распространяется по всей цепочке.
// schema -> input type
// resolver -> output type
// appRouter -> AppRouter (both captured)
// client<AppRouter> -> typed callsВывод вспомогательных типов
tRPC предоставляет вспомогательные средства для извлечения типов входных и выходных данных и их повторного использования, например в компонентах React. inferRouterInputs и inferRouterOutputs предоставляют такие соответствия из AppRouter.
import type { inferRouterOutputs } from '@trpc/server';
type Outputs = inferRouterOutputs<AppRouter>;
type User = Outputs['user']['byId'];Гарантия отсутствия рассогласования
Поскольку тип client выводится из актуального типа router, сервер и client не могут рассогласоваться. Переименуйте процедуру или измените входные данные — и client перестанет компилироваться, пока Вы не обновите вызов. Компилятор выполняет роль теста контракта.
// Server renames user.byId -> user.find
// client.user.byId becomes a type error immediatelyПакетная обработка и ссылки
Массив links настраивает транспорт. httpBatchLink объединяет несколько вызовов, выполненных в рамках одного цикла обработки, в один HTTP-запрос, сокращая количество обменов с сервером. Это оптимизация во время выполнения, которая не влияет на типы.
links: [httpBatchLink({ url: '/trpc' })]
// Several .query calls in one tick -> one requestСквозной подход на практике
В результате Вы вызываете client.user.byId.query(...) как локальную функцию, получая автодополнение входных данных, проверенные аргументы и типизированный результат — всё это выводится из серверного кода без сгенерированных файлов. Так благодаря выводу типов обеспечивается сквозная безопасность типов.
const u = await client.user.byId.query({ id: 7 });
console.log(u.name); // fully typed, no codegenПроверьте себя
Проверьте, насколько хорошо Вы поняли вывод типов между client и сервером.
Повторение
Вы использовали программный интерфейс tRPC с полной безопасностью типов.
- Импортируйте
AppRouterтолько как тип. createTRPCClient<AppRouter>повторяет дерево router.- Входные и выходные данные выводятся из серверных схем и обработчиков.
- Client и сервер не могут рассогласоваться: компилятор обеспечивает соблюдение контракта.
Далее: контекст и middleware для аутентификации.
Часто задаваемые вопросы
Урок «Вывод типов на стороне клиента и сервера» бесплатный?
Да — полный текст урока «Вывод типов на стороне клиента и сервера» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Вывод типов на стороне клиента и сервера»?
Получайте полностью типизированные клиенты без генерации кода Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Вывод типов на стороне клиента и сервера»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Архитектура tRPC
- Определение маршрутизаторов и процедур
- Вывод типов на стороне клиента и сервера
- Промежуточное ПО и контекст