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

Introduksjon til Zod-skjemaer

Utforsk Zod, et TypeScript-først-bibliotek for deklarering og validering av skjemaer, og de grunnleggende typene i det.

Leksjon 1 av 411 trinn

Introduksjon til Zod-skjemaer er en gratis leksjon i Typesikre API-er fra frontend til backend med tRPC på CoddyKit. Dette er leksjon 1 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 Zod?

Velkommen til Zod! Det er et kraftig valideringsbibliotek utviklet med TypeScript i sentrum. Tenk på det som en vokter for dataene dine.

Zod bidrar til å sikre at dataene som kommer inn i applikasjonen (fra API-er, skjemaer og så videre), samsvarer med typene du forventer, også under kjøring.

Hvorfor bruke Zod? Typesikkerhet!

TypeScript gir typesikkerhet under utviklingen, men hva med data som mottas fra en server eller fra brukerinndata? Disse dataene har ikke TypeScript-typer.

Zod bygger bro over dette gapet! Det lar deg definere et skjema, validere data under kjøring mot skjemaet og automatisk utlede en TypeScript-type fra skjemaet. Dette gir deg typesikkerhet fra ende til ende.

Zods grunnleggende byggeklosser

Zod-skjemaer opprettes ved hjelp av z-objektet. La oss se på de mest grunnleggende typene: strenger, tall og boolske verdier.

z.string(): For tekstverdier.
z.number(): For numeriske verdier.
z.boolean(): For true/false-verdier.

Dette er utgangspunktet når du skal definere datastrukturer.

Deklarere et strengskjema

Det er enkelt å deklarere et strengskjema. Deretter bruker du metoden .parse() til å validere data mot skjemaet. Hvis dataene ikke samsvarer, kaster Zod en feil.

Prøv å kjøre dette eksempelet for å se hvordan en gyldig streng analyseres:

import { z } from 'zod';

function runExample() {
  const usernameSchema = z.string();

  const validUsername = "CoddyUser";
  const parsedUsername = usernameSchema.parse(validUsername);
  console.log(`Parsed: ${parsedUsername}`);
}

runExample();

Håndtere valideringsfeil for strenger

Hva skjer hvis du prøver å analysere data som ikke er en streng? Zod kaster en ZodError. Det er god praksis å pakke kall til .parse() inn i en try...catch-blokk.

Kjør denne koden for å se hvordan Zod fanger opp en ugyldig type:

import { z } from 'zod';

function runExample() {
  const usernameSchema = z.string();

  try {
    const invalidUsername = 123; // Not a string!
    usernameSchema.parse(invalidUsername);
  } catch (error: any) {
    console.log(`Error: ${error.message.split('\n')[0]}`);
  }
}

runExample();

Skjemaer for tall og boolske verdier

Skjemaer for tall og boolske verdier fungerer på samme måte. De sikrer at dataene har riktig primitiv type. Dette forhindrer uventede feil senere i applikasjonen.

La oss se hvordan du definerer og bruker dem:

import { z } from 'zod';

function runExample() {
  const ageSchema = z.number();
  const isActiveSchema = z.boolean();

  const validAge = ageSchema.parse(30);
  console.log(`Age: ${validAge}`);

  const validStatus = isActiveSchema.parse(true);
  console.log(`Active: ${validStatus}`);

  try {
    ageSchema.parse("twenty"); // Invalid!
  } catch (error: any) {
    console.log(`Error (Age): ${error.message.split('\n')[0]}`);
  }
}

runExample();

Gjøre felt valgfrie

Noen ganger er ikke en bestemt dataverdi alltid til stede. Zod tilbyr metoden .optional() for dette. Den gjør at et skjema godtar undefined i tillegg til grunntypen.

Vær oppmerksom på at .optional() tillater undefined, men som standard ikke null.

import { z } from 'zod';

function runExample() {
  const taglineSchema = z.string().optional();

  const withTagline = taglineSchema.parse("Hello World!");
  console.log(`With tagline: ${withTagline}`);

  const withoutTagline = taglineSchema.parse(undefined);
  console.log(`Without tagline: ${withoutTagline}`);

  try {
    taglineSchema.parse(null); // Optional doesn't allow null!
  } catch (error: any) {
    console.log(`Error (null): ${error.message.split('\n')[0]}`);
  }
}

runExample();

Eksakte verdier med literaler

Hva om et felt må ha en helt bestemt, fast verdi? Zods metode .literal() passer perfekt til dette. Den sikrer at den analyserte verdien er nøyaktig lik det du definerer.

Dette er nyttig for enum-lignende felt der verdiene er kjent på forhånd.

import { z } from 'zod';

function runExample() {
  const statusSchema = z.literal("pending");

  const validStatus = statusSchema.parse("pending");
  console.log(`Valid status: ${validStatus}`);

  try {
    statusSchema.parse("completed"); // Not 'pending'!
  } catch (error: any) {
    console.log(`Error (status): ${error.message.split('\n')[0]}`);
  }
}

runExample();

Byggeklosser for komplekse data

Du har nå sett de grunnleggende typene og modifikatorene i Zod. Selv om de er enkle hver for seg, er de de grunnleggende byggesteinene.

I de kommende leksjonene lærer du hvordan du kan kombinere disse grunnleggende schemaene for å definere langt mer komplekse datastrukturer, som objekter og arrayer, og dermed sikre robust validering for hele applikasjonen.

Test Zod-grunnlaget ditt

Hvilket Zod-schema validerer riktig en variabel som må være strengen "admin" eller eventuelt et tall?

Besvar den i den interaktive leksjonen

Repetisjon av Zod-grunnlaget

Godt jobbet! Du har tatt de første stegene med Zod og forstått hovedformålet og de grunnleggende typene.

Zod tilbyr validering ved kjøring av TypeScript-data.
z.string(), z.number() og z.boolean() definerer grunnleggende typer.
.parse() validerer data og utleder typer.
Bruk try...catch til feilhåndtering.
.optional() tillater verdier som undefined.
z.literal() håndhever eksakte, faste verdier.

Dette er grunnleggende ferdigheter for å bygge robuste, typesikre applikasjoner!

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 «Introduksjon til Zod-skjemaer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Typesikre API-er fra frontend til backend med tRPC, inkludert «Introduksjon til Zod-skjemaer», 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 «Introduksjon til Zod-skjemaer»?

Utforsk Zod, et TypeScript-først-bibliotek for deklarering og validering av skjemaer, og de grunnleggende typene i det. 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 1 av 4.

Hvor lang tid tar leksjonen «Introduksjon til Zod-skjemaer»?

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

Introduksjon til Zod-skjemaer
Definering av komplekse Zod-skjemaer
Integrering av Zod i tRPC-prosedyrer
Transformering og viderevalidering av Zod-data

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