TypeScript Academy · Oppitunti

tRPC-arkkitehtuuri

Ymmärtäkää, miten tRPC poistaa API-skeeman päällekkäisyyden.

Oppitunti 1/413 vaihetta

tRPC-arkkitehtuuri on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Päästä päähän ulottuva ongelma

Tyypillisessä verkkosovelluksessa palvelin määrittelee API:n ja asiakas kutsuu sitä. Niiden tyyppien pitäminen synkronoituna on vaikeaa: kun palvelimen kenttää muutetaan, asiakas rikkoutuu hiljaa ajonaikana. tRPC ratkaisee tämän jakamalla tyypit suoraan ilman koodin generointia.

// Server: returns { id: number; name: string }
// Client: must know that shape exactly
// Without sync: runtime errors when they drift

Mikä tRPC on

tRPC on kirjasto täysin tyypitettyjen TypeScript-rajapintojen rakentamiseen. Palvelin määrittelee proseduurit; asiakas kutsuu niitä kuin paikallisia funktioita, ja palvelimen koodista pääteltyinä käytettävissä ovat täydellinen automaattinen täydennys ja tyyppitarkistus.

// Client call looks like a local function:
// const user = await client.user.byId.query(1);
// user is typed automatically from the server

Ei koodin generointia

Toisin kuin GraphQL- tai OpenAPI-työnkuluissa, tRPC ei tarvitse koodin generointivaihetta. Käännettävää skeematiedostoa tai generoituja asiakasohjelmia ei ole. Tyypit kulkevat palvelimelta asiakkaalle yksinomaan TypeScriptin päättelyn kautta käännösaikana.

// No .graphql files, no generated SDK
// Just import a type from the server package

Reititin on sopimus

tRPC:n keskiössä on reititin. Se on proseduurien (kyselyjen ja mutaatioiden) puu. Palvelimen reititinobjekti ja erityisesti sen päätelty tyyppi muodostavat asiakkaan kanssa jaetun ainoan totuuden lähteen.

// appRouter (server) defines every procedure
// type AppRouter = typeof appRouter is the contract

Miten tyypit jaetaan

Palvelin vie vain reitittimensä tyypin, ei toteutusta. Asiakas tuo kyseisen tyypin ja käyttää sitä proxy-asiakkaan tyypitykseen. Palvelimen koodia ei toimiteta selaimeen, vaan ainoastaan tyypit, jotka poistetaan koontivaiheessa.

// server.ts
export type AppRouter = typeof appRouter;

// client.ts
import type { AppRouter } from '../server';

Kyselyt ja mutaatiot

Proseduureja on kaksi päätyyppiä. Kysely lukee tietoja ja on yleensä idempotentti. Mutaatio muuttaa tietoja. Erottelu liittyy välimuistien käyttöön ja HTTP-semantiikkaan sekä määrittää, miten asiakas kutsuu niitä.

// client.user.list.query()      -> read
// client.user.create.mutate(...) -> write

Ajoaika ja tyypit

tRPC:ssä on kaksi tasoa. Ajoaikana kutsut kulkevat JSON-muodossa HTTP:n yli, ja sovitin käsittelee ne. Käännösaikana jaettu AppRouter-tyyppi tarkistaa jokaisen kutsun täydellisesti. Ajonaikainen kerros on kevyt; tyyppiturvallisuus on varsinainen hyöty.

// Runtime: POST /trpc/user.byId  body: {"input":1}
// Types: client.user.byId.query(1) is checked end to end

Miksi päättely voittaa koodigeneroinnin

Koska tyypit päätellään, synkronointivaihetta ei ole, joten sitä ei voi unohtaa. Kun muokkaatte proseduuria, asiakas heijastaa muutoksen heti ja näyttää punaiset aaltoviivat kohdissa, joissa kutsut eivät enää täsmää. Palaute on välitöntä ja näkyy suoraan editorissa.

// Add a required input field on the server
// -> every client call missing it becomes a type error

Mihin tRPC sopii

tRPC sopii erinomaisesti täyden pinon TypeScript-monorepoihin, joissa asiakas ja palvelin jakavat saman koodikannan, kuten Next.js-sovelluksissa. Se ei sovellu muiden kielten kuluttamille julkisille rajapinnoille; niissä tarvitsette edelleen kieliriippumattoman skeeman, kuten OpenAPI:n tai GraphQL:n.

// Great: Next.js app, shared types, internal API
// Not ideal: public API for non-TS consumers

Kokonaiskuva

Työnkulku on seuraava: määritelkää proseduurit reitittimessä, viekää reitittimen tyyppi, liittäkää HTTP-sovitin ja luokaa tyypitetty asiakas kyseisen tyypin perusteella. Jokainen kutsu tarkistetaan palvelinsopimusta vasten ilman generoitua koodia. Seuraavilla oppitunneilla rakennetaan kaikki nämä osat.

// Roadmap:
// 1. initTRPC + procedures + appRouter
// 2. export AppRouter, create typed client
// 3. context + middleware for auth

Luottakaa kääntäjään

Ajattelutavan muutos on tämä: API-sopimus sijaitsee tyypeissä, ja kääntäjä valvoo sitä, ei dokumentaatiossa tai pelkässä ajonaikaisessa validoinnissa. Jos koodi kääntyy, asiakas ja palvelin ovat yhteensopivia. Tätä tarkoitetaan termillä "päästä päähän ulottuva tyyppiturvallisuus".

// If client.ts compiles, it matches the current server.

Pikatarkistus

Testatkaa ymmärrystänne tRPC-arkkitehtuurista.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte tRPC-mallin.

Reititin on sopimus, ja sen tyyppi on ainoa totuuden lähde.
Palvelin vie vain AppRouter-tyypin, ei koodia.
Kyselyt lukevat ja mutaatiot kirjoittavat; ajonaikaiset kutsut kulkevat JSON-muodossa HTTP:n yli.
Tyyppiturvallisuus perustuu päättelyyn ilman koodigenerointivaihetta.

Seuraavaksi: reitittimien ja proseduurien määrittäminen.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”tRPC-arkkitehtuuri” ilmainen?

Kyllä – oppitunnin ”tRPC-arkkitehtuuri” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”tRPC-arkkitehtuuri”?

Ymmärtäkää, miten tRPC poistaa API-skeeman päällekkäisyyden. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”tRPC-arkkitehtuuri”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: TypeScript Academy