0Pricing
TypeScript Academy · Lekcja

Wnioskowanie typów po stronie klienta i serwera

Uzyskuj w pełni typowanych klientów bez generowania kodu

Wnioskowanie typów po stronie klienta i serwera to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Udostępnianie typu routera

Klient uzyskuje bezpieczeństwo typów, importując typ routera serwera. Jest to import wyłącznie typu: w kliencie nie jest uruchamiany żaden element serwera, a granicę przekracza tylko statyczny kontrakt.

import type { AppRouter } from '../server/router';
// type-only import - erased at build time

Tworzenie typowanego klienta

Należy użyć createTRPCClient lub wariantu proxy, parametryzując go typem AppRouter. Obiekt klienta odzwierciedla wtedy strukturę routera serwera i zapewnia pełne autouzupełnianie dla każdej procedury.

import { createTRPCClient, httpBatchLink } from '@trpc/client';

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

Wywoływanie procedur

Wywołania odzwierciedlają drzewo routera. Do zagnieżdżonej procedury user.byId uzyskuje się dostęp przez client.user.byId, a następnie wywołuje się na niej .query lub .mutate. Dane wejściowe i wyniki są typowane na podstawie serwera.

const user = await client.user.byId.query({ id: 1 });
// user is typed exactly as the server resolver returns

Wyprowadzane dane wejściowe

Klient zna dane wejściowe każdej procedury na podstawie schematu serwera. Przekazanie danych o nieprawidłowej strukturze powoduje błąd kompilacji, zanim aplikacja zostanie uruchomiona.

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

Wyprowadzane wyniki

Typy wartości zwracanych również są przekazywane. Rozwiązana wartość zapytania jest dokładnie tym, co zwraca resolver serwera, dlatego kod korzystający z tego wyniku jest w pełni sprawdzany.

const u = await client.user.byId.query({ id: 1 });
const name: string = u.name; // ok if server returns name: string

Mutacje po stronie klienta

Mutacje wywołuje się za pomocą .mutate. Obowiązuje ta sama inferencja: dane wejściowe są walidowane przez typ schematu, a wynik jest typowany na podstawie resolvera.

const created = await client.user.create.mutate({ name: 'Bea' });
// created is typed from the create resolver's return

Przepływ inferencji

Prześledźmy przepływ typu: schemat zod na serwerze wyprowadza typ danych wejściowych, typ wartości zwracanej przez resolver wyprowadza typ wyniku, typeof appRouter przechwytuje oba typy w AppRouter, a klient odwzorowuje ten typ na wywoływane metody. Jedna zmiana automatycznie propaguje się przez cały system.

// schema -> input type
// resolver -> output type
// appRouter -> AppRouter (both captured)
// client<AppRouter> -> typed calls

Wyprowadzanie pomocniczych typów

tRPC udostępnia pomocnicze typy do wyodrębniania typów danych wejściowych i wyników w celu ich ponownego użycia, na przykład w komponentach React. inferRouterInputs i inferRouterOutputs udostępniają te mapowania na podstawie AppRouter.

import type { inferRouterOutputs } from '@trpc/server';

type Outputs = inferRouterOutputs<AppRouter>;
type User = Outputs['user']['byId'];

Gwarancja spójności

Ponieważ typ klienta jest wyprowadzany z aktualnego typu routera, serwer i klient nie mogą się rozjechać. Zmiana nazwy procedury lub zmiana danych wejściowych powoduje, że klient nie kompiluje się do czasu zaktualizowania wywołania. Kompilator jest testem kontraktu.

// Server renames user.byId -> user.find
// client.user.byId becomes a type error immediately

Batchowanie i linki

Tablica links konfiguruje transport. httpBatchLink łączy wiele wywołań wykonanych w tym samym cyklu w jedno żądanie HTTP, ograniczając liczbę cykli komunikacji. Jest to optymalizacja w czasie wykonywania, która nie wpływa na typy.

links: [httpBatchLink({ url: '/trpc' })]
// Several .query calls in one tick -> one request

Bezpieczeństwo end-to-end w praktyce

Rezultat jest następujący: wywołuje się client.user.byId.query(...) jak funkcję lokalną, z autouzupełnianiem danych wejściowych, sprawdzanymi argumentami i typowanym wynikiem, a wszystko to wynika z kodu serwera i nie wymaga generowanych plików. To właśnie bezpieczeństwo typów end-to-end zapewniane przez inferencję.

const u = await client.user.byId.query({ id: 7 });
console.log(u.name); // fully typed, no codegen

Szybkie sprawdzenie

Proszę sprawdzić swoje rozumienie inferencji po stronie klienta i serwera.

Podsumowanie

Skorzystali Państwo z API tRPC z pełnym bezpieczeństwem typów.

  • Importuj AppRouter wyłącznie jako typ.
  • createTRPCClient<AppRouter> odzwierciedla drzewo routera.
  • Dane wejściowe i wyniki są wyprowadzane na podstawie schematów i resolverów serwera.
  • Klient i serwer nie mogą się rozjechać — kompilator egzekwuje kontrakt.

Następnie: kontekst i middleware na potrzeby uwierzytelniania.

Często zadawane pytania

Czy lekcja „Wnioskowanie typów po stronie klienta i serwera” jest bezpłatna?

Tak — pełny tekst „Wnioskowanie typów po stronie klienta i serwera” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wnioskowanie typów po stronie klienta i serwera”?

Uzyskuj w pełni typowanych klientów bez generowania kodu Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Wnioskowanie typów po stronie klienta i serwera”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Architektura tRPC
  2. Definiowanie routerów i procedur
  3. Wnioskowanie typów po stronie klienta i serwera
  4. Middleware i kontekst
← Powrót do TypeScript Academy