Typsäkra API:er från frontend till backend med tRPC · Lektion

Datatransformatorer för serialisering

Använd tRPC:s datatransformatorer för att serialisera och deserialisera anpassade datatyper som Dates eller BigInts.

Lektion 3 av 411 steg

Datatransformatorer för serialisering är en gratis lektion i Typsäkra API:er från frontend till backend med tRPC på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Typsäkra API:er från frontend till backend med tRPC, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.

Vad är datatransformatorer?

När du bygger API:er behöver data ofta skickas mellan olika system. Den här processen kallas serialisering (att omvandla data till ett format som kan överföras, till exempel JSON) och deserialisering (att omvandla den tillbaka).

tRPC:s datatransformatorer hjälper till att hantera komplexa datatyper som JSON inte har inbyggt stöd för, så att de anländer på klientsidan precis som de lämnade servern.

JSON:s begränsningar för datatyper

JSON (JavaScript Object Notation) är användbart, men har begränsningar. Det har inbyggt stöd för strängar, tal, booleska värden, null, objekt och arrayer.

Datum: JSON representerar datum som strängar, vilket innebär att funktionaliteten hos Date-objekt går förlorad.
BigInts: Stora heltal (BigInt) är inte en inbyggd JSON-typ.
Maps, Sets, RegExps: Dessa har inte heller någon direkt representation i JSON.

Utan transformatorer kan dessa typer gå sönder eller ändras oväntat när de skickas via tRPC.

Standardserialisering i tRPC

Som standard använder tRPC standardfunktionerna JSON.stringify() och JSON.parse() för dataöverföring. Det innebär att alla datatyper som inte stöds av JSON omvandlas till sin närmaste JSON-representation.

Exempelvis blir ett JavaScript-objekt av typen Date en ISO 8601-sträng, och en BigInt kastar ett fel om den inte hanteras.

Introduktion till SuperJSON

För att övervinna JSON:s begränsningar kan du ansluta en anpassad datatransformator till tRPC. Det populäraste alternativet är superjson.

superjson är ett bibliotek som utökar JSON:s funktioner och låter det serialisera och deserialisera många vanliga JavaScript-typer, bland annat Date, BigInt, Map och Set, samtidigt som deras ursprungliga typ bevaras.

Konfigurera servern med SuperJSON

Det är enkelt att integrera superjson på servern. Du skickar det till initTRPC när du initierar din tRPC-instans. Då instrueras tRPC att använda superjson för all serialisering.

Installera 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() };
//   }),
// });

Konfigurera klienten med SuperJSON

På klientsidan behöver du också instruera din tRPC-klient att använda superjson. Det säkerställer att data som tas emot från servern deserialiseras korrekt tillbaka till sina ursprungliga JavaScript-typer.

Konfigurationen varierar något beroende på din klient (till exempel 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>;
// }

Datum: före och efter

Låt oss se hur superjson hanterar ett Date-objekt. Utan det omvandlas ett Date-objekt till en sträng. Med superjson förblir det ett Date-objekt.

Kör det här exemplet för att se serialiserings- och deserialiseringsprocessen:

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: från sträng till typ

BigInt-värden används för heltal som är större än Number.MAX_SAFE_INTEGER. JSON stöder dem inte. superjson serialiserar dem korrekt som strängar och deserialiserar dem tillbaka till typer av BigInt.

Prova det här exemplet:

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();

Bortom datum och BigInts

superjson är inte bara till för Date och BigInt. Det stöder också många andra JavaScript-typer:

Map och Set
RegExp
Error-objekt
URL-objekt
Även anpassade klasser (med viss konfiguration!)

Detta gör superjson till ett kraftfullt verktyg för att bevara typnoggrannheten genom hela din tRPC-applikation.

Kontroll av transformatorer

Föreställ dig att du har en tRPC-procedur som returnerar ett JavaScript-objekt av typen Date och en BigInt. Vilka av följande påståenden är sanna om användningen av superjson-transformatorer i tRPC?

Besvara frågan i den interaktiva lektionen

Sammanfattning: datatransformatorer

I den här lektionen har vi lärt oss om tRPC:s datatransformatorer, med särskilt fokus på superjson.

JSON:s begränsningar förhindrar inbyggd serialisering av typer som Date och BigInt.
superjson erbjuder en robust lösning för att serialisera och deserialisera dessa komplexa typer samtidigt som deras ursprungliga form bevaras.
Det kräver konfiguration på både tRPC-servern och tRPC-klienten.
superjson stöder många andra typer utöver Date och BigInt, vilket förbättrar typsäkerheten i hela applikationen.

Detta säkerställer att dina data förblir konsekventa och typsäkra från början till slut!

Gratis att börja

Lär dig Typsäkra API:er från frontend till backend med tRPC med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 10
Lektioner: 40

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Datatransformatorer för serialisering” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Typsäkra API:er från frontend till backend med tRPC, inklusive ”Datatransformatorer för serialisering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.

Vad lär jag mig i ”Datatransformatorer för serialisering”?

Använd tRPC:s datatransformatorer för att serialisera och deserialisera anpassade datatyper som Dates eller BigInts. Ni övar på Typsäkra API:er från frontend till backend med tRPC med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Typsäkra API:er från frontend till backend med tRPC?

Du behöver inga förkunskaper. Utbildningen i Typsäkra API:er från frontend till backend med tRPC på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Datatransformatorer för serialisering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Typsäkra API:er från frontend till backend med tRPC-lektionen?

Ja. Varje Typsäkra API:er från frontend till backend med tRPC-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Hantera tRPC-fel på ett robust sätt
Anpassade feltyper
Datatransformatorer för serialisering
Formatera fel och ge valideringsfeedback på fältnivå

← Tillbaka till Typsäkra API:er från frontend till backend med tRPC