Typesikre API-er fra frontend til backend med tRPC · leksjon

Datatransformatorer for serialisering

Bruk tRPC sine datatransformatorer til å serialisere og deserialisere egendefinerte datatyper som Dates eller BigInts.

Leksjon 3 av 411 trinn

Datatransformatorer for serialisering er en gratis leksjon i Typesikre API-er fra frontend til backend med tRPC på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Typesikre API-er fra frontend til backend med tRPC, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.

Hva er datatransformatorer?

Når du bygger API-er, må data ofte sendes mellom ulike systemer. Denne prosessen kalles serialisering (å konvertere data til et format som kan overføres, for eksempel JSON) og deserialisering (å konvertere dem tilbake).

tRPCs datatransformatorer hjelper med å håndtere komplekse datatyper som JSON ikke støtter innebygd, slik at de kommer frem på klientsiden akkurat slik de forlot serveren.

JSONs begrensninger for datatyper

JSON (JavaScript Object Notation) er nyttig, men har begrensninger. Formatet støtter innebygd strenger, tall, boolske verdier, null, objekter og matriser.

Datoer: JSON representerer datoer som strenger, slik at funksjonaliteten til Date-objektet går tapt.
BigInts: Store heltall (BigInt) er ikke en innebygd JSON-type.
Maps, Sets og RegExps: Disse har heller ingen direkte representasjon i JSON.

Uten transformatorer kan disse typene bli ødelagt eller endret uventet når de sendes via tRPC.

Standardserialisering i tRPC

Som standard bruker tRPC standard JSON med JSON.stringify() og JSON.parse() til dataoverføring. Det betyr at datatyper som ikke støttes av JSON, konverteres til den nærmeste JSON-representasjonen.

Et JavaScript-Date-objekt blir for eksempel til en ISO 8601-streng, mens en BigInt utløser en feil hvis den ikke håndteres.

Introduksjon til SuperJSON

For å overvinne begrensningene i JSON lar tRPC deg koble til en egendefinert datatransformator. Det mest populære valget er superjson.

superjson er et bibliotek som utvider funksjonaliteten til JSON, slik at det kan serialisere og deserialisere mange vanlige JavaScript-typer, blant annet Date, BigInt, Map og Set, samtidig som den opprinnelige typen bevares.

Serveroppsett med SuperJSON

Det er enkelt å integrere superjson på serveren. Du sender det inn til initTRPC når du initialiserer tRPC-instansen. Dette forteller tRPC at superjson skal brukes til all serialisering.

Installer det først: npm install superjson

import { initTRPC } from '@trpc/server';
import superjson from 'superjson';

// Initialize tRPC with superjson transformer
export const t = initTRPC.context().transformer(superjson).create();

// Example of a tRPC router definition (conceptual):
// export const appRouter = t.router({
//   hello: t.procedure.query(() => {
//     return { message: 'Hello, tRPC!', now: new Date() };
//   }),
// });

Klientoppsett med SuperJSON

På klientsiden må du også angi at tRPC-klienten skal bruke superjson. Dette sikrer at dataene som mottas fra serveren, deserialiseres riktig tilbake til de opprinnelige JavaScript-typene.

Oppsettet varierer litt avhengig av klienten din (for eksempel React Query eller en vanilla-klient).

import { createTRPCReact } from '@trpc/react-query';
import superjson from 'superjson';
// import type { AppRouter } from '../server/trpc'; // Adjust path

// Initialize tRPC client with superjson transformer
export const trpc = createTRPCReact<any>({
  transformer: superjson,
});

// Example client usage (conceptual):
// function MyComponent() {
//   const hello = trpc.hello.useQuery();
//   if (hello.data) {
//     console.log(hello.data.now instanceof Date); // true!
//   }
//   return <p>...</p>;
// }

Datoer: Før og etter

La oss se hvordan superjson håndterer et Date-objekt. Uten superjson blir en Date til en streng. Med superjson forblir den et Date-objekt.

Kjør dette eksempelet for å se serialiserings- og deserialiseringsprosessen:

import superjson from 'superjson';

function main() {
  const originalDate = new Date();
  console.log("Original:", originalDate.toISOString());
  console.log("Is Date (original):", originalDate instanceof Date);

  // Simulate serialization (like tRPC server would do)
  const serialized = superjson.stringify({ date: originalDate });
  console.log("Serialized:", serialized);

  // Simulate deserialization (like tRPC client would do)
  const deserialized = superjson.parse(serialized) as { date: Date };
  console.log("Deserialized:", deserialized.date.toISOString());
  console.log("Is Date (deserialized):", deserialized.date instanceof Date);
}

main();

BigInts: Fra streng til type

BigInt-verdier brukes for heltall som er større enn Number.MAX_SAFE_INTEGER. JSON støtter dem ikke. superjson serialiserer dem riktig som strenger og deserialiserer dem tilbake til BigInt-typer.

Prøv dette eksempelet:

import superjson from 'superjson';

function main() {
  const originalBigInt = 9007199254740991n + 100n; // A BigInt
  console.log("Original:", originalBigInt);
  console.log("Type (original):", typeof originalBigInt);

  // Simulate serialization
  const serialized = superjson.stringify({ value: originalBigInt });
  console.log("Serialized:", serialized);

  // Simulate deserialization
  const deserialized = superjson.parse(serialized) as { value: bigint };
  console.log("Deserialized:", deserialized.value);
  console.log("Type (deserialized):", typeof deserialized.value);
  console.log("Is equal:", originalBigInt === deserialized.value);
}

main();

Utover datoer og BigInts

superjson er ikke bare for Date og BigInt. Det støtter også mange andre JavaScript-typer:

Map og Set
RegExp
Error-objekter
URL-objekter
Også egendefinerte klasser (med noe konfigurasjon!)

Dette gjør superjson til et kraftig verktøy for å bevare typeegenskaper gjennom hele tRPC-applikasjonen.

Kontroll av transformatorer

Tenk deg at du har en tRPC-prosedyre som returnerer et JavaScript-Date-objekt og en BigInt. Hvilke av følgende påstander om bruk av superjson-transformatorer i tRPC er riktige?

Besvar den i den interaktive leksjonen

Oppsummering: Datatransformatorer

I denne leksjonen lærte vi om tRPCs datatransformatorer, med særlig fokus på superjson.

JSONs begrensninger hindrer innebygd serialisering av typer som Date og BigInt.
superjson gir en robust løsning for å serialisere og deserialisere disse komplekse typene, samtidig som den opprinnelige formen bevares.
Det krever konfigurasjon både på tRPC-serveren og klienten.
superjson støtter mange andre typer enn datoer og BigInts, noe som gir bedre typesikkerhet i hele applikasjonen.

Dette sikrer at dataene dine forblir konsistente og typesikre fra ende til annen!

Gratis å komme i gang

Lær deg Typesikre API-er fra frontend til backend med tRPC med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 10
Leksjoner: 40

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Datatransformatorer for serialisering» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Typesikre API-er fra frontend til backend med tRPC, inkludert «Datatransformatorer for serialisering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.

Hva lærer jeg i «Datatransformatorer for serialisering»?

Bruk tRPC sine datatransformatorer til å serialisere og deserialisere egendefinerte datatyper som Dates eller BigInts. Du øver på Typesikre API-er fra frontend til backend med tRPC med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Typesikre API-er fra frontend til backend med tRPC?

Ingen tidligere erfaring er nødvendig. Typesikre API-er fra frontend til backend med tRPC på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Datatransformatorer for serialisering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Typesikre API-er fra frontend til backend med tRPC-leksjonen?

Ja. Alle Typesikre API-er fra frontend til backend med tRPC-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Elegant håndtering av tRPC-feil
Egendefinerte feiltypper
Datatransformatorer for serialisering
Formatering av feil og valideringstilbakemeldinger på feltnivå

← Tilbake til Typesikre API-er fra frontend til backend med tRPC